const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const tileSize = 100; const gridSize = 4; const grid = []; function drawTile(x, y, value) { ctx.fillStyle = '#eee4da'; ctx.fillRect(x, y, tileSize, tileSize); ctx.font = 'bold 36px Arial'; ctx.fillStyle = '#776e65'; ctx.textAlign = 'center'; ctx.fillText(value.toString(), x + tileSize / 2, y + tileSize / 2 + 12); } function drawGrid() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { const x = j * tileSize; const y = i * tileSize; const value = grid[i][j]; drawTile(x, y, value); } } } function generateTile() { const emptyTiles = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { emptyTiles.push({ row: i, col: j }); } } } if (emptyTiles.length > 0) { const randomIndex = Math.floor(Math.random() * emptyTiles.length); const { row, col } = emptyTiles[randomIndex]; grid[row][col] = Math.random() < 0.9 ? 2 : 4; } } function init() { for (let i = 0; i < gridSize; i++) { grid.push(new Array(gridSize).fill(0)); } generateTile(); drawGrid(); } function moveLeft() { for (let i = 0; i < gridSize; i++) { let currentRow = grid[i]; let merged = false; for (let j = 1; j < gridSize; j++) { if (currentRow[j] !== 0) { let k = j - 1; while (k >= 0 && currentRow[k] === 0) { currentRow[k] = currentRow[k + 1]; currentRow[k + 1] = 0; k--; } if (k >= 0 && currentRow[k] === currentRow[k + 1] && !merged) { currentRow[k] *= 2; currentRow[k + 1] = 0; merged = true; } } } } } function moveRight() { for (let i = 0; i < gridSize; i++) { let currentRow = grid[i]; let merged = false; for (let j = gridSize - 2; j >= 0; j--) { if (currentRow[j] !== 0) { let k = j + 1; while (k < gridSize && currentRow[k] === 0) { currentRow[k] = currentRow[k - 1]; currentRow[k - 1] = 0; k++; } if (k < gridSize && currentRow[k] === currentRow[k - 1] && !merged) { currentRow[k] *= 2; currentRow[k - 1] = 0; merged = true; } } } } } function moveUp() { for (let j = 0; j < gridSize; j++) { let currentCol = []; let merged = false; for (let i = 0; i < gridSize; i++) { currentCol.push(grid[i][j]); } for (let i = 1; i < gridSize; i++) { if (currentCol[i] !== 0) { let k = i - 1; while (k >= 0 && currentCol[k] === 0) { currentCol[k] = currentCol[k + 1]; currentCol[k + 1] = 0; k--; } if (k >= 0 && currentCol[k] === currentCol[k + 1] && !merged) { currentCol[k] *= 2; currentCol[k + 1] = 0; merged = true; } } } for (let i = 0; i < gridSize; i++) { grid[i][j] = currentCol[i]; } } } function moveDown() { for (let j = 0; j < gridSize; j++) { let currentCol = []; let merged = false; for (let i = gridSize - 1; i >= 0; i--) { currentCol.push(grid[i][j]); } for (let i = gridSize - 2; i >= 0; i--) { if (currentCol[i] !== 0) { let k = i + 1; while (k < gridSize && currentCol[k] === 0) { currentCol[k] = currentCol[k - 1]; currentCol[k - 1] = 0; k++; } if (k < gridSize && currentCol[k] === currentCol[k - 1] && !merged) { currentCol[k] *= 2; currentCol[k - 1] = 0; merged = true; } } } for (let i = gridSize - 1; i >= 0; i--) { grid[i][j] = currentCol[gridSize - 1 - i]; } } } function handleKeyPress(event) { const key = event.key; if (key === 'ArrowLeft') { moveLeft(); } else if (key === 'ArrowRight') { moveRight(); } else if (key === 'ArrowUp') { moveUp(); } else if (key === 'ArrowDown') { moveDown(); } generateTile(); drawGrid(); } document.addEventListener('keydown', handleKeyPress); init();

GPTgame

Sign up for free tokens!

2048 but starts from 2048 and go to 2

GPTgame