const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const size = 4; const tileSize = canvas.width / size; let grid = []; let score = 0; function init() { for (let row = 0; row < size; row++) { grid[row] = []; for (let col = 0; col < size; col++) { grid[row][col] = 0; } } addTile(); addTile(); } function addTile() { let options = []; for (let row = 0; row < size; row++) { for (let col = 0; col < size; col++) { if (grid[row][col] === 0) { options.push({ row, col }); } } } if (options.length > 0) { const { row, col } = options[Math.floor(Math.random() * options.length)]; grid[row][col] = Math.random() < 0.9 ? 2 : 4; } } function drawTile(row, col) { const value = grid[row][col]; ctx.fillStyle = '#ffffff'; ctx.fillRect(col * tileSize, row * tileSize, tileSize, tileSize); if (value) { ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#000000'; ctx.fillText(value, col * tileSize + tileSize / 2, row * tileSize + tileSize / 2); } } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let row = 0; row < size; row++) { for (let col = 0; col < size; col++) { drawTile(row, col); } } } function moveUp() { for (let col = 0; col < size; col++) { for (let row = 1; row < size; row++) { if (grid[row][col] !== 0) { let newRow = row; while (newRow > 0 && grid[newRow - 1][col] === 0) { grid[newRow - 1][col] = grid[newRow][col]; grid[newRow][col] = 0; newRow--; } if (newRow > 0 && grid[newRow - 1][col] === grid[newRow][col]) { grid[newRow - 1][col] *= 2; grid[newRow][col] = 0; score += grid[newRow - 1][col]; } } } } addTile(); draw(); } function moveDown() { for (let col = 0; col < size; col++) { for (let row = size - 2; row >= 0; row--) { if (grid[row][col] !== 0) { let newRow = row; while (newRow < size - 1 && grid[newRow + 1][col] === 0) { grid[newRow + 1][col] = grid[newRow][col]; grid[newRow][col] = 0; newRow++; } if (newRow < size - 1 && grid[newRow + 1][col] === grid[newRow][col]) { grid[newRow + 1][col] *= 2; grid[newRow][col] = 0; score += grid[newRow + 1][col]; } } } } addTile(); draw(); } function moveLeft() { for (let row = 0; row < size; row++) { for (let col = 1; col < size; col++) { if (grid[row][col] !== 0) { let newCol = col; while (newCol > 0 && grid[row][newCol - 1] === 0) { grid[row][newCol - 1] = grid[row][newCol]; grid[row][newCol] = 0; newCol--; } if (newCol > 0 && grid[row][newCol - 1] === grid[row][newCol]) { grid[row][newCol - 1] *= 2; grid[row][newCol] = 0; score += grid[row][newCol - 1]; } } } } addTile(); draw(); } function moveRight() { for (let row = 0; row < size; row++) { for (let col = size - 2; col >= 0; col--) { if (grid[row][col] !== 0) { let newCol = col; while (newCol < size - 1 && grid[row][newCol + 1] === 0) { grid[row][newCol + 1] = grid[row][newCol]; grid[row][newCol] = 0; newCol++; } if (newCol < size - 1 && grid[row][newCol + 1] === grid[row][newCol]) { grid[row][newCol + 1] *= 2; grid[row][newCol] = 0; score += grid[row][newCol + 1]; } } } } addTile(); draw(); } function handleKeyPress(event) { if (event.keyCode === 38) { moveUp(); } else if (event.keyCode === 40) { moveDown(); } else if (event.keyCode === 37) { moveLeft(); } else if (event.keyCode === 39) { moveRight(); } } init(); draw(); document.addEventListener('keydown', handleKeyPress);

GPTgame

Sign up for free tokens!

2048 game but limit is 16 field 4x4

GPTgame