const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const tileSize = 64; const gridSize = 2; const gridWidth = tileSize * gridSize; const gridHeight = tileSize * gridSize; let grid = [ [0, 0], [0, 0] ]; function drawTile(x, y, value) { ctx.fillStyle = '#EEE4DA'; ctx.fillRect(x, y, tileSize, tileSize); ctx.font = 'bold 24px Arial'; ctx.fillStyle = '#776E65'; ctx.textAlign = 'center'; ctx.fillText(value, x + tileSize / 2, y + tileSize / 2 + 8); } function drawGrid() { ctx.clearRect(0, 0, gridWidth, gridHeight); for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { const x = col * tileSize; const y = row * tileSize; const value = grid[row][col]; drawTile(x, y, value); } } } function getRandomEmptyCell() { const emptyCells = []; for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { if (grid[row][col] === 0) { emptyCells.push({ row, col }); } } } if (emptyCells.length === 0) { return null; } const randomIndex = Math.floor(Math.random() * emptyCells.length); return emptyCells[randomIndex]; } function addRandomTile() { const emptyCell = getRandomEmptyCell(); if (emptyCell) { const { row, col } = emptyCell; grid[row][col] = Math.random() < 0.9 ? 2 : 4; } } function moveTiles(direction) { let moved = false; switch (direction) { case 'up': for (let col = 0; col < gridSize; col++) { for (let row = 1; row < gridSize; 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--; moved = true; } if (newRow > 0 && grid[newRow - 1][col] === grid[newRow][col]) { grid[newRow - 1][col] *= 2; grid[newRow][col] = 0; moved = true; } } } } break; case 'down': for (let col = 0; col < gridSize; col++) { for (let row = gridSize - 2; row >= 0; row--) { if (grid[row][col] !== 0) { let newRow = row; while (newRow < gridSize - 1 && grid[newRow + 1][col] === 0) { grid[newRow + 1][col] = grid[newRow][col]; grid[newRow][col] = 0; newRow++; moved = true; } if (newRow < gridSize - 1 && grid[newRow + 1][col] === grid[newRow][col]) { grid[newRow + 1][col] *= 2; grid[newRow][col] = 0; moved = true; } } } } break; case 'left': for (let row = 0; row < gridSize; row++) { for (let col = 1; col < gridSize; 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--; moved = true; } if (newCol > 0 && grid[row][newCol - 1] === grid[row][newCol]) { grid[row][newCol - 1] *= 2; grid[row][newCol] = 0; moved = true; } } } } break; case 'right': for (let row = 0; row < gridSize; row++) { for (let col = gridSize - 2; col >= 0; col--) { if (grid[row][col] !== 0) { let newCol = col; while (newCol < gridSize - 1 && grid[row][newCol + 1] === 0) { grid[row][newCol + 1] = grid[row][newCol]; grid[row][newCol] = 0; newCol++; moved = true; } if (newCol < gridSize - 1 && grid[row][newCol + 1] === grid[row][newCol]) { grid[row][newCol + 1] *= 2; grid[row][newCol] = 0; moved = true; } } } } break; } return moved; } function isGameOver() { for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { if (grid[row][col] === 0) { return false; } if (row < gridSize - 1 && grid[row][col] === grid[row + 1][col]) { return false; } if (col < gridSize - 1 && grid[row][col] === grid[row][col + 1]) { return false; } } } return true; } function handleKeyDown(event) { if (isGameOver()) { return; } let moved = false; switch (event.key) { case 'ArrowUp': moved = moveTiles('up'); break; case 'ArrowDown': moved = moveTiles('down'); break; case 'ArrowLeft': moved = moveTiles('left'); break; case 'ArrowRight': moved = moveTiles('right'); break; } if (moved) { addRandomTile(); drawGrid(); if (isGameOver()) { console.log('Game Over!'); } } } document.addEventListener('keydown', handleKeyDown); addRandomTile(); addRandomTile(); drawGrid();

GPTgame

Sign up for free tokens!

2048 but 128 with 2x2 canvas

GPTgame