const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const cellSize = canvas.width / gridSize; let grid = []; let projectiles = []; function initGrid() { 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, 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; ctx.fillStyle = getColor(value); ctx.fillRect(x, y, cellSize, cellSize); if (value !== 0) { ctx.fillStyle = '#000000'; ctx.font = 'bold 20px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, x + cellSize / 2, y + cellSize / 2); } } } } function getColor(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 getRandomEmptyCell() { 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); return emptyCells[randomIndex]; } return null; } function addRandomTile() { const emptyCell = getRandomEmptyCell(); if (emptyCell) { const value = Math.random() < 0.9 ? 2 : 4; grid[emptyCell.row][emptyCell.col] = value; } } 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; } return moved; } function update() { drawGrid(); if (projectiles.length > 0) { for (let i = 0; i < projectiles.length; i++) { const projectile = projectiles[i]; projectile.x += projectile.dx; projectile.y += projectile.dy; ctx.fillStyle = '#FF0000'; ctx.beginPath(); ctx.arc(projectile.x, projectile.y, 10, 0, Math.PI * 2); ctx.fill(); if (projectile.x < 0 || projectile.x > canvas.width || projectile.y < 0 || projectile.y > canvas.height) { projectiles.splice(i, 1); i--; } } } } function combineTiles() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] >= 2048) { if (i > 0 && grid[i - 1][j] === grid[i][j]) { grid[i - 1][j] *= 2; grid[i][j] = 0; } if (i < gridSize - 1 && grid[i + 1][j] === grid[i][j]) { grid[i + 1][j] *= 2; grid[i][j] = 0; } if (j > 0 && grid[i][j - 1] === grid[i][j]) { grid[i][j - 1] *= 2; grid[i][j] = 0; } if (j < gridSize - 1 && grid[i][j + 1] === grid[i][j]) { grid[i][j + 1] *= 2; grid[i][j] = 0; } } } } } function shootProjectile(direction) { let dx = 0; let dy = 0; switch (direction) { case 'up': dy = -5; break; case 'down': dy = 5; break; case 'left': dx = -5; break; case 'right': dx = 5; break; } const projectile = { x: canvas.width / 2, y: canvas.height / 2, dx, dy }; projectiles.push(projectile); } function handleKeyPress(event) { const key = event.key.toLowerCase(); if (key === 'arrowup') { if (move('up')) { combineTiles(); addRandomTile(); } shootProjectile('up'); } else if (key === 'arrowdown') { if (move('down')) { combineTiles(); addRandomTile(); } shootProjectile('down'); } else if (key === 'arrowleft') { if (move('left')) { combineTiles(); addRandomTile(); } shootProjectile('left'); } else if (key === 'arrowright') { if (move('right')) { combineTiles(); addRandomTile(); } shootProjectile('right'); } } document.addEventListener('keydown', handleKeyPress); initGrid(); addRandomTile(); addRandomTile();

GPTgame

Sign up for free tokens!

2048 game but you need to shoot projectiles to combine them

GPTgame