const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const cellSize = 100; const padding = 10; const colors = { 2: '#EEE4DA', 4: '#EDE0C8', 8: '#F2B179', 16: '#F59563', 32: '#F67C5F', 64: '#F65E3B', 128: '#EDCF72', 256: '#EDCC61', 512: '#EDC850', 1024: '#EDC53F', 2048: '#EDC22E', }; 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 drawGrid() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { const value = grid[i][j]; const x = j * (cellSize + padding); const y = i * (cellSize + padding); ctx.fillStyle = colors[value] || '#CDC1B4'; ctx.fillRect(x, y, cellSize, cellSize); if (value !== 0) { ctx.fillStyle = '#776E65'; ctx.font = 'bold 36px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, x + cellSize / 2, y + cellSize / 2); } } } } function generateRandomTile() { const emptyCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { emptyCells.push({ row: i, col: j }); } } } if (emptyCells.length > 0) { const randomIndex = Math.floor(Math.random() * emptyCells.length); const { row, col } = emptyCells[randomIndex]; grid[row][col] = Math.random() < 0.9 ? 2 : 4; } } function moveTiles(direction) { let moved = false; for (let i = 0; i < gridSize; i++) { let row = grid[i].filter(value => value !== 0); if (direction === 'left' || direction === 'up') { row = row.concat(Array(gridSize - row.length).fill(0)); } else { row = Array(gridSize - row.length).fill(0).concat(row); } for (let j = 0; j < gridSize - 1; j++) { if (row[j] === row[j + 1] && row[j] !== 0) { row[j] *= 2; row[j + 1] = 0; moved = true; } } if (direction === 'left' || direction === 'up') { row = row.filter(value => value !== 0).concat(Array(gridSize - row.filter(value => value !== 0).length).fill(0)); } else { row = Array(gridSize - row.filter(value => value !== 0).length).fill(0).concat(row.filter(value => value !== 0)); } grid[i] = row; } return moved; } function rotateGrid() { const rotatedGrid = []; for (let i = 0; i < gridSize; i++) { rotatedGrid[i] = []; for (let j = 0; j < gridSize; j++) { rotatedGrid[i][j] = grid[gridSize - j - 1][i]; } } grid = rotatedGrid; } function handleKeyDown(event) { let moved = false; switch (event.key) { case 'ArrowUp': rotateGrid(); moved = moveTiles('up'); rotateGrid(); rotateGrid(); rotateGrid(); break; case 'ArrowDown': rotateGrid(); rotateGrid(); rotateGrid(); moved = moveTiles('down'); rotateGrid(); break; case 'ArrowLeft': moved = moveTiles('left'); break; case 'ArrowRight': rotateGrid(); rotateGrid(); moved = moveTiles('right'); rotateGrid(); rotateGrid(); break; } if (moved) { generateRandomTile(); } drawGrid(); } function startGame() { initializeGrid(); generateRandomTile(); generateRandomTile(); drawGrid(); document.addEventListener('keydown', handleKeyDown); } startGame();

GPTgame

Sign up for free tokens!

Runner 2048

GPTgame