const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const grid = []; const gridSize = 4; const cellSize = canvas.width / gridSize; let score = 0; let gameOver = false; document.addEventListener('keydown', handleKeyDown); function init() { for (let i = 0; i < gridSize; i++) { grid[i] = []; for (let j = 0; j < gridSize; j++) { grid[i][j] = 0; } } addRandomNumber(); addRandomNumber(); drawGrid(); } function addRandomNumber() { 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)]; const randomNumber = Math.random() < 0.9 ? 2 : 4; grid[randomCell.x][randomCell.y] = randomNumber; } } 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 cellValue = grid[i][j]; ctx.fillStyle = getCellColor(cellValue); ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize); if (cellValue !== 0) { ctx.fillStyle = getTextColor(cellValue); ctx.font = 'bold 20px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(cellValue, j * cellSize + cellSize / 2, i * cellSize + cellSize / 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) { return value <= 4 ? '#776e65' : '#f9f6f2'; } function handleKeyDown(event) { if (!gameOver) { let moved = false; switch (event.key) { case 'ArrowUp': moved = moveUp(); break; case 'ArrowDown': moved = moveDown(); break; case 'ArrowLeft': moved = moveLeft(); break; case 'ArrowRight': moved = moveRight(); break; } if (moved) { addRandomNumber(); drawGrid(); if (isGameOver()) { gameOver = true; askMathQuestion(); } } } } function moveUp() { let moved = false; 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; score += grid[k - 1][j]; grid[k][j] = 0; moved = true; } } } } return moved; } function moveDown() { let moved = false; 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; score += grid[k + 1][j]; grid[k][j] = 0; moved = true; } } } } return moved; } function moveLeft() { let moved = false; 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; score += grid[i][k - 1]; grid[i][k] = 0; moved = true; } } } } return moved; } function moveRight() { let moved = false; 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; score += grid[i][k + 1]; grid[i][k] = 0; moved = true; } } } } return moved; } function isGameOver() { 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 askMathQuestion() { const num1 = Math.floor(Math.random() * 10); const num2 = Math.floor(Math.random() * 10); const operator = Math.random() < 0.5 ? '+' : '-'; const answer = operator === '+' ? num1 + num2 : num1 - num2; const userAnswer = parseInt(prompt(`You lost! Solve the following math question to continue: ${num1} ${operator} ${num2}`)); if (userAnswer === answer) { gameOver = false; score = 0; init(); } else { alert('Wrong answer! Refresh the page to start a new game.'); } } init

GPTgame

Sign up for free tokens!

2048 but anytime you lose you are asked for a math question

GPTgame