const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const tileSize = 100; const padding = 10; const canvasSize = (tileSize + padding) * gridSize + padding; canvas.width = canvasSize; canvas.height = canvasSize; let grid = []; function initializeGrid() { for (let i = 0; i < gridSize; i++) { grid[i] = []; for (let j = 0; j < gridSize; j++) { grid[i][j] = 0; } } } function drawTile(x, y, value) { ctx.fillStyle = '#eee4da'; ctx.fillRect(x, y, tileSize, tileSize); ctx.font = 'bold 32px Arial'; ctx.fillStyle = '#776e65'; ctx.textAlign = 'center'; ctx.fillText(value, x + tileSize / 2, y + tileSize / 2 + 10); } function drawGrid() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { const x = padding + j * (tileSize + padding); const y = padding + i * (tileSize + padding); const value = grid[i][j]; drawTile(x, y, value); } } } function generateRandomTile() { const emptyTiles = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { emptyTiles.push({ x: i, y: j }); } } } if (emptyTiles.length > 0) { const randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)]; const newValue = Math.random() < 0.9 ? 2 : 4; grid[randomTile.x][randomTile.y] = newValue; } } function moveTiles(direction) { let moved = false; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { let newRow = i; let newCol = j; if (direction === 'up') { while (newRow > 0 && grid[newRow - 1][newCol] === 0) { newRow--; } } else if (direction === 'down') { while (newRow < gridSize - 1 && grid[newRow + 1][newCol] === 0) { newRow++; } } else if (direction === 'left') { while (newCol > 0 && grid[newRow][newCol - 1] === 0) { newCol--; } } else if (direction === 'right') { while (newCol < gridSize - 1 && grid[newRow][newCol + 1] === 0) { newCol++; } } if (newRow !== i || newCol !== j) { grid[newRow][newCol] = grid[i][j]; grid[i][j] = 0; moved = true; } } } return moved; } function mergeTiles(direction) { let merged = false; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (direction === 'up' && i > 0 && grid[i][j] === grid[i - 1][j]) { grid[i - 1][j] *= 2; grid[i][j] = 0; merged = true; } else if (direction === 'down' && i < gridSize - 1 && grid[i][j] === grid[i + 1][j]) { grid[i + 1][j] *= 2; grid[i][j] = 0; merged = true; } else if (direction === 'left' && j > 0 && grid[i][j] === grid[i][j - 1]) { grid[i][j - 1] *= 2; grid[i][j] = 0; merged = true; } else if (direction === 'right' && j < gridSize - 1 && grid[i][j] === grid[i][j + 1]) { grid[i][j + 1] *= 2; grid[i][j] = 0; merged = true; } } } return merged; } function isGameOver() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { return false; } if (i > 0 && grid[i][j] === grid[i - 1][j]) { return false; } if (i < gridSize - 1 && grid[i][j] === grid[i + 1][j]) { return false; } if (j > 0 && grid[i][j] === grid[i][j - 1]) { return false; } if (j < gridSize - 1 && grid[i][j] === grid[i][j + 1]) { return false; } } } return true; } function handleKeyPress(event) { if (event.key === 'ArrowUp' || event.key === 'w') { const moved = moveTiles('up'); const merged = mergeTiles('up'); if (moved || merged) { generateRandomTile(); } } else if (event.key === 'ArrowDown' || event.key === 's') { const moved = moveTiles('down'); const merged = mergeTiles('down'); if (moved || merged) { generateRandomTile(); } } else if (event.key === 'ArrowLeft' || event.key === 'a') { const moved = moveTiles('left'); const merged = mergeTiles('left'); if (moved || merged) { generateRandomTile(); } } else if (event.key === 'ArrowRight' || event.key === 'd') { const moved = moveTiles('right'); const merged = mergeTiles('right'); if (moved || merged) { generateRandomTile(); } } if (isGameOver()) { alert('Game Over!'); initializeGrid(); } drawGrid(); } initializeGrid(); generateRandomTile(); generateRandomTile(); drawGrid(); document.addEventListener('keydown', handleKeyPress);

GPTgame

Sign up for free tokens!

2048

GPTgame