const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const tileSize = 100; const padding = 10; const colors = { 'I': '#FF0000', 'V': '#00FF00', 'X': '#0000FF', 'L': '#FFFF00', 'C': '#FF00FF', 'D': '#00FFFF', 'M': '#FFFFFF' }; let grid = []; function init() { for (let i = 0; i < gridSize; i++) { grid[i] = []; for (let j = 0; j < gridSize; j++) { grid[i][j] = ''; } } addRandomNumber(); addRandomNumber(); drawGrid(); } function addRandomNumber() { const availableCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === '') { availableCells.push({ x: i, y: j }); } } } if (availableCells.length > 0) { const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)]; const randomNumber = Math.random() < 0.5 ? 'I' : 'V'; grid[randomCell.x][randomCell.y] = randomNumber; } } function drawGrid() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { const x = j * (tileSize + padding); const y = i * (tileSize + padding); const number = grid[i][j]; ctx.fillStyle = colors[number]; ctx.fillRect(x, y, tileSize, tileSize); ctx.fillStyle = '#000000'; ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(number, x + tileSize / 2, y + tileSize / 2); } } } function move(direction) { let moved = false; switch (direction) { case 'up': for (let j = 0; j < gridSize; j++) { for (let i = 1; i < gridSize; i++) { if (grid[i][j] !== '') { let k = i; while (k > 0 && grid[k - 1][j] === '') { grid[k - 1][j] = grid[k][j]; grid[k][j] = ''; k--; moved = true; } } } } break; case 'down': for (let j = 0; j < gridSize; j++) { for (let i = gridSize - 2; i >= 0; i--) { if (grid[i][j] !== '') { let k = i; while (k < gridSize - 1 && grid[k + 1][j] === '') { grid[k + 1][j] = grid[k][j]; grid[k][j] = ''; k++; moved = true; } } } } break; case 'left': for (let i = 0; i < gridSize; i++) { for (let j = 1; j < gridSize; j++) { if (grid[i][j] !== '') { let k = j; while (k > 0 && grid[i][k - 1] === '') { grid[i][k - 1] = grid[i][k]; grid[i][k] = ''; k--; moved = true; } } } } break; case 'right': for (let i = 0; i < gridSize; i++) { for (let j = gridSize - 2; j >= 0; j--) { if (grid[i][j] !== '') { let k = j; while (k < gridSize - 1 && grid[i][k + 1] === '') { grid[i][k + 1] = grid[i][k]; grid[i][k] = ''; k++; moved = true; } } } } break; } if (moved) { addRandomNumber(); drawGrid(); } } document.addEventListener('keydown', function (event) { if (event.key === 'ArrowUp') { move('up'); } else if (event.key === 'ArrowDown') { move('down'); } else if (event.key === 'ArrowLeft') { move('left'); } else if (event.key === 'ArrowRight') { move('right'); } }); init();

GPTgame

Sign up for free tokens!

It's 2048 but with roman numbers

GPTgame