const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const WIDTH = canvas.width; const HEIGHT = canvas.height; const CELL_SIZE = WIDTH / 4; const board = [ [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0] ]; function drawBoard() { ctx.clearRect(0, 0, WIDTH, HEIGHT); for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { const value = board[row][col]; const x = col * CELL_SIZE; const y = row * CELL_SIZE; ctx.fillStyle = value === 2 ? 'blue' : 'violet'; ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE); ctx.fillStyle = 'white'; ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, x + CELL_SIZE / 2, y + CELL_SIZE / 2); } } } function getRandomEmptyCell() { const emptyCells = []; for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { if (board[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 addRandomNumber() { const emptyCell = getRandomEmptyCell(); if (emptyCell) { const { row, col } = emptyCell; board[row][col] = Math.random() < 0.9 ? 2 : 4; } } function moveLeft() { let moved = false; for (let row = 0; row < 4; row++) { for (let col = 1; col < 4; col++) { if (board[row][col] !== 0) { let currentCol = col; while (currentCol > 0 && board[row][currentCol - 1] === 0) { board[row][currentCol - 1] = board[row][currentCol]; board[row][currentCol] = 0; currentCol--; moved = true; } if (currentCol > 0 && board[row][currentCol - 1] === board[row][currentCol]) { board[row][currentCol - 1] *= 2; board[row][currentCol] = 0; moved = true; } } } } return moved; } function moveRight() { let moved = false; for (let row = 0; row < 4; row++) { for (let col = 2; col >= 0; col--) { if (board[row][col] !== 0) { let currentCol = col; while (currentCol < 3 && board[row][currentCol + 1] === 0) { board[row][currentCol + 1] = board[row][currentCol]; board[row][currentCol] = 0; currentCol++; moved = true; } if (currentCol < 3 && board[row][currentCol + 1] === board[row][currentCol]) { board[row][currentCol + 1] *= 2; board[row][currentCol] = 0; moved = true; } } } } return moved; } function moveUp() { let moved = false; for (let col = 0; col < 4; col++) { for (let row = 1; row < 4; row++) { if (board[row][col] !== 0) { let currentRow = row; while (currentRow > 0 && board[currentRow - 1][col] === 0) { board[currentRow - 1][col] = board[currentRow][col]; board[currentRow][col] = 0; currentRow--; moved = true; } if (currentRow > 0 && board[currentRow - 1][col] === board[currentRow][col]) { board[currentRow - 1][col] *= 2; board[currentRow][col] = 0; moved = true; } } } } return moved; } function moveDown() { let moved = false; for (let col = 0; col < 4; col++) { for (let row = 2; row >= 0; row--) { if (board[row][col] !== 0) { let currentRow = row; while (currentRow < 3 && board[currentRow + 1][col] === 0) { board[currentRow + 1][col] = board[currentRow][col]; board[currentRow][col] = 0; currentRow++; moved = true; } if (currentRow < 3 && board[currentRow + 1][col] === board[currentRow][col]) { board[currentRow + 1][col] *= 2; board[currentRow][col] = 0; moved = true; } } } } return moved; } function handleKeyPress(event) { const key = event.key; let moved = false; if (key === 'ArrowLeft') { moved = moveLeft(); } else if (key === 'ArrowRight') { moved = moveRight(); } else if (key === 'ArrowUp') { moved = moveUp(); } else if (key === 'ArrowDown') { moved = moveDown(); } if (moved) { addRandomNumber(); drawBoard(); } } document.addEventListener('keydown', handleKeyPress); addRandomNumber(); addRandomNumber(); drawBoard();

GPTgame

Sign up for free tokens!

2048 but colors are blue and violet

GPTgame