const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const tileSize = 70; const tilePadding = 10; const board = []; let score = 0; let gameOver = false; function initBoard() { for (let i = 0; i < gridSize; i++) { board[i] = []; for (let j = 0; j < gridSize; j++) { board[i][j] = 0; } } addRandomTile(); addRandomTile(); } function addRandomTile() { const emptyTiles = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (board[i][j] === 0) { emptyTiles.push({ x: i, y: j }); } } } if (emptyTiles.length > 0) { const { x, y } = emptyTiles[Math.floor(Math.random() * emptyTiles.length)]; board[x][y] = Math.random() < 0.9 ? 2 : 4; } } function drawBoard() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { drawTile(i, j, board[i][j]); } } } function drawTile(x, y, value) { ctx.fillStyle = value ? '#eee4da' : '#cdc1b4'; ctx.fillRect(y * (tileSize + tilePadding), x * (tileSize + tilePadding), tileSize, tileSize); if (value) { ctx.fillStyle = '#776e65'; ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, y * (tileSize + tilePadding) + tileSize / 2, x * (tileSize + tilePadding) + tileSize / 2); } } function move(direction) { let moved = false; for (let i = 0; i < gridSize; i++) { let line = []; for (let j = 0; j < gridSize; j++) { line.push(direction === 'left' || direction === 'right' ? board[i][j] : board[j][i]); } if (direction === 'right' || direction === 'down') { line.reverse(); } const newLine = mergeLine(line); if (direction === 'right' || direction === 'down') { newLine.reverse(); } for (let j = 0; j < gridSize; j++) { if ((direction === 'left' || direction === 'right') && board[i][j] !== newLine[j]) { board[i][j] = newLine[j]; moved = true; } else if ((direction === 'up' || direction === 'down') && board[j][i] !== newLine[j]) { board[j][i] = newLine[j]; moved = true; } } } if (moved) { addRandomTile(); if (isGameOver()) { gameOver = true; } } } function mergeLine(line) { let newLine = line.filter(value => value !== 0); for (let i = 0; i < newLine.length - 1; i++) { if (newLine[i] === newLine[i + 1]) { newLine[i] *= 2; score += newLine[i]; newLine[i + 1] = 0; } } return newLine.filter(value => value !== 0).concat(Array(gridSize).fill(0)).slice(0, gridSize); } function isGameOver() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (board[i][j] === 0) return false; if (j < gridSize - 1 && board[i][j] === board[i][j + 1]) return false; if (i < gridSize - 1 && board[i][j] === board[i + 1][j]) return false; } } return true; } function gameLoop() { drawBoard(); if (!gameOver) { requestAnimationFrame(gameLoop); } } document.addEventListener('keydown', (e) => { if (!gameOver) { switch (e.key) { case 'ArrowLeft': move('left'); break; case 'ArrowRight': move('right'); break; case 'ArrowUp': move('up'); break; case 'ArrowDown': move('down'); break; } } }); initBoard(); gameLoop();

GPTgame

Sign up for free tokens!

i will be a realistic 2048 game with unlimited block number and with block shadows also

GPTgame