const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const cellSize = 100; const padding = 10; const canvasSize = gridSize * cellSize + (gridSize + 1) * padding; canvas.width = canvasSize; canvas.height = canvasSize; 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, canvasSize, canvasSize); for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { const x = padding + j * (cellSize + padding); const y = padding + i * (cellSize + padding); ctx.fillStyle = '#eee'; ctx.fillRect(x, y, cellSize, cellSize); if (grid[i][j] !== 0) { ctx.fillStyle = '#000'; ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(grid[i][j], x + cellSize / 2, y + cellSize / 2); } } } } function generateNewNumber() { 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 randomCell = emptyCells[randomIndex]; grid[randomCell.row][randomCell.col] = Math.random() < 0.9 ? 2 : 4; } } function move(direction) { let moved = false; switch (direction) { case 'up': for (let j = 0; j < gridSize; j++) { for (let i = 1; i < gridSize; i++) { if (grid[i][j] !== 0) { let k = i; while (k > 0 && grid[k - 1][j] === 0) { grid[k - 1][j] = grid[k][j]; grid[k][j] = 0; k--; moved = true; } if (k > 0 && grid[k - 1][j] === grid[k][j]) { grid[k - 1][j] *= 2; grid[k][j] = 0; moved = true; } } } } break; case 'down': for (let j = 0; j < gridSize; j++) { for (let i = gridSize - 2; i >= 0; i--) { if (grid[i][j] !== 0) { let k = i; while (k < gridSize - 1 && grid[k + 1][j] === 0) { grid[k + 1][j] = grid[k][j]; grid[k][j] = 0; k++; moved = true; } if (k < gridSize - 1 && grid[k + 1][j] === grid[k][j]) { grid[k + 1][j] *= 2; grid[k][j] = 0; moved = true; } } } } break; case 'left': for (let i = 0; i < gridSize; i++) { for (let j = 1; j < gridSize; j++) { if (grid[i][j] !== 0) { let k = j; while (k > 0 && grid[i][k - 1] === 0) { grid[i][k - 1] = grid[i][k]; grid[i][k] = 0; k--; moved = true; } if (k > 0 && grid[i][k - 1] === grid[i][k]) { grid[i][k - 1] *= 2; grid[i][k] = 0; moved = true; } } } } break; case 'right': for (let i = 0; i < gridSize; i++) { for (let j = gridSize - 2; j >= 0; j--) { if (grid[i][j] !== 0) { let k = j; while (k < gridSize - 1 && grid[i][k + 1] === 0) { grid[i][k + 1] = grid[i][k]; grid[i][k] = 0; k++; moved = true; } if (k < gridSize - 1 && grid[i][k + 1] === grid[i][k]) { grid[i][k + 1] *= 2; grid[i][k] = 0; moved = true; } } } } break; } if (moved) { generateNewNumber(); drawGrid(); } } function handleKeyDown(event) { switch (event.key) { case 'ArrowUp': move('up'); break; case 'ArrowDown': move('down'); break; case 'ArrowLeft': move('left'); break; case 'ArrowRight': move('right'); break; } } initializeGrid(); generateNewNumber(); generateNewNumber(); drawGrid(); document.addEventListener('keydown', handleKeyDown);

GPTgame

Sign up for free tokens!

The game is 2048, you connect cubes with numbers, you get more and more

GPTgame