const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const grid = []; const gridSize = 4; const cellSize = canvas.width / gridSize; function initGrid() { 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; const y = i * cellSize; ctx.fillStyle = '#eee'; ctx.fillRect(x, y, cellSize, cellSize); if (value !== 0) { ctx.fillStyle = '#000'; ctx.font = 'bold 20px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, x + cellSize / 2, y + cellSize / 2); } } } } function addRandomTile() { const availableCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { availableCells.push({ row: i, col: j }); } } } if (availableCells.length > 0) { const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)]; const newValue = Math.random() < 0.9 ? 2 : 4; grid[randomCell.row][randomCell.col] = newValue; } } function moveTiles(direction) { let moved = false; for (let i = 0; i < gridSize; i++) { const row = grid[i].filter(value => value !== 0); if (direction === 'left') { while (row.length < gridSize) { row.push(0); } } else { while (row.length < gridSize) { row.unshift(0); } } for (let j = 0; j < gridSize - 1; j++) { if (row[j] !== 0 && row[j] === row[j + 1]) { row[j] *= 2; row[j + 1] = 0; moved = true; } } if (direction === 'left') { grid[i] = row; } else { grid[i] = row.reverse(); } } return moved; } function handleKeyPress(event) { const key = event.key; let moved = false; if (key === 'ArrowUp') { moved = moveTiles('up'); } else if (key === 'ArrowDown') { moved = moveTiles('down'); } else if (key === 'ArrowLeft') { moved = moveTiles('left'); } else if (key === 'ArrowRight') { moved = moveTiles('right'); } if (moved) { addRandomTile(); drawGrid(); } } function startGame() { initGrid(); addRandomTile(); addRandomTile(); drawGrid(); document.addEventListener('keydown', handleKeyPress); } startGame();

GPTgame

Sign up for free tokens!

2+2 to 2048

GPTgame