const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const gridSize = 4; const cellSize = canvas.width / gridSize; let grid = []; let score = 0; let gameOver = false; function initializeGrid() { for (let i = 0; i < gridSize; i++) { grid[i] = []; for (let j = 0; j < gridSize; j++) { grid[i][j] = 0; } } } 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({ x: i, y: j }); } } } if (availableCells.length > 0) { const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)]; grid[randomCell.x][randomCell.y] = Math.random() < 0.9 ? 2 : 4; } } function drawGrid() { context.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; context.fillStyle = value === 0 ? '#cdc1b4' : '#'+(value*1234567).toString(16).substr(-6); context.fillRect(x, y, cellSize, cellSize); if (value !== 0) { context.fillStyle = value < 8 ? '#776e65' : '#f9f6f2'; context.font = 'bold 24px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(value, x + cellSize / 2, y + cellSize / 2); } } } } 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] *= 2; score += row[j]; 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 checkGameOver() { 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 (gameOver) { 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 (checkGameOver()) { gameOver = true; alert('Game Over!'); } } } function startGame() { initializeGrid(); addRandomTile(); addRandomTile(); drawGrid(); document.addEventListener('keydown', handleKeyPress); } startGame();

GPTgame

Sign up for free tokens!

Game 2048 for phone

GPTgame