const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const GRID_SIZE = 4; const CELL_SIZE = 100; const CELL_PADDING = 10; const FONT_SIZE = 50; const WINNING_VALUE = 2048; let grid = []; function initializeGrid() { for (let row = 0; row < GRID_SIZE; row++) { grid[row] = []; for (let col = 0; col < GRID_SIZE; col++) { grid[row][col] = 0; } } } function drawGrid() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let row = 0; row < GRID_SIZE; row++) { for (let col = 0; col < GRID_SIZE; col++) { const x = col * (CELL_SIZE + CELL_PADDING) + CELL_PADDING; const y = row * (CELL_SIZE + CELL_PADDING) + CELL_PADDING; const value = grid[row][col]; ctx.fillStyle = getCellColor(value); ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE); ctx.fillStyle = getTextColor(value); ctx.font = `${FONT_SIZE}px Arial`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, x + CELL_SIZE / 2, y + CELL_SIZE / 2); } } } function getCellColor(value) { switch (value) { case 2: return '#eee4da'; case 4: return '#ede0c8'; case 8: return '#f2b179'; case 16: return '#f59563'; case 32: return '#f67c5f'; case 64: return '#f65e3b'; case 128: return '#edcf72'; case 256: return '#edcc61'; case 512: return '#edc850'; case 1024: return '#edc53f'; case 2048: return '#edc22e'; default: return '#cdc1b4'; } } function getTextColor(value) { if (value <= 4) { return '#776e65'; } return '#f9f6f2'; } function generateRandomCell() { const emptyCells = []; for (let row = 0; row < GRID_SIZE; row++) { for (let col = 0; col < GRID_SIZE; col++) { if (grid[row][col] === 0) { emptyCells.push({ row, col }); } } } if (emptyCells.length > 0) { const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)]; grid[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4; } } function isGameOver() { for (let row = 0; row < GRID_SIZE; row++) { for (let col = 0; col < GRID_SIZE; col++) { if (grid[row][col] === 0) { return false; } if (row !== GRID_SIZE - 1 && grid[row][col] === grid[row + 1][col]) { return false; } if (col !== GRID_SIZE - 1 && grid[row][col] === grid[row][col + 1]) { return false; } } } return true; } function mergeCells(direction) { let moved = false; switch (direction) { case 'up': for (let col = 0; col < GRID_SIZE; col++) { for (let row = 1; row < GRID_SIZE; row++) { if (grid[row][col] !== 0) { let newRow = row; while (newRow > 0 && grid[newRow - 1][col] === 0) { grid[newRow - 1][col] = grid[newRow][col]; grid[newRow][col] = 0; newRow--; moved = true; } if (newRow > 0 && grid[newRow - 1][col] === grid[newRow][col]) { grid[newRow - 1][col] *= 2; grid[newRow][col] = 0; moved = true; } } } } break; case 'down': for (let col = 0; col < GRID_SIZE; col++) { for (let row = GRID_SIZE - 2; row >= 0; row--) { if (grid[row][col] !== 0) { let newRow = row; while (newRow < GRID_SIZE - 1 && grid[newRow + 1][col] === 0) { grid[newRow + 1][col] = grid[newRow][col]; grid[newRow][col] = 0; newRow++; moved = true; } if (newRow < GRID_SIZE - 1 && grid[newRow + 1][col] === grid[newRow][col]) { grid[newRow + 1][col] *= 2; grid[newRow][col] = 0; moved = true; } } } } break; case 'left': for (let row = 0; row < GRID_SIZE; row++) { for (let col = 1; col < GRID_SIZE; col++) { if (grid[row][col] !== 0) { let newCol = col; while (newCol > 0 && grid[row][newCol - 1] === 0) { grid[row][newCol - 1] = grid[row][newCol]; grid[row][newCol] = 0; newCol--; moved = true; } if (newCol > 0 && grid[row][newCol - 1] === grid[row][newCol]) { grid[row][newCol - 1] *= 2; grid[row][newCol] = 0; moved = true; } } } } break; case 'right': for (let row = 0; row < GRID_SIZE; row++) { for (let col = GRID_SIZE - 2; col >= 0; col--) { if (grid[row][col] !== 0) { let newCol = col; while (newCol < GRID_SIZE - 1 && grid[row][newCol + 1] === 0) { grid[row][newCol + 1] = grid[row][newCol]; grid[row][newCol] = 0; newCol++; moved = true; } if (newCol < GRID_SIZE - 1 && grid[row][newCol + 1] === grid[row][newCol]) { grid[row][newCol + 1] *= 2; grid[row][newCol] = 0; moved = true; } } } } break; } return moved; } function checkWin() { for (let row = 0; row < GRID_SIZE; row++) { for (let col = 0; col < GRID_SIZE; col++) { if (grid[row][col] === WINNING_VALUE) { return true; } } } return false; } function handleKeyDown(event) { let moved = false; switch (event.key) { case 'ArrowUp': moved = mergeCells('up'); break; case 'ArrowDown': moved = mergeCells('down'); break; case 'ArrowLeft': moved = mergeCells('left'); break; case 'ArrowRight': moved = mergeCells('right'); break; } if (moved) { generateRandomCell(); drawGrid(); if (checkWin()) { alert('You win!'); } if (isGameOver()) { alert('Game over!'); } } } document.addEventListener('keydown', handleKeyDown); initializeGrid(); generateRandomCell(); generateRandomCell(); drawGrid();

GPTgame

Sign up for free tokens!

2048 with diffrenct conept

GPTgame