const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const size = 4; const tileSize = canvas.width / size; let board = []; let score = 0; let gameOver = false; function createBoard() { for (let row = 0; row < size; row++) { board[row] = []; for (let col = 0; col < size; col++) { board[row][col] = 0; } } } function drawTile(row, col, value) { ctx.beginPath(); ctx.rect(col * tileSize, row * tileSize, tileSize, tileSize); switch (value) { case 2: ctx.fillStyle = '#eee4da'; break; case 4: ctx.fillStyle = '#ede0c8'; break; case 8: ctx.fillStyle = '#f2b179'; break; case 16: ctx.fillStyle = '#f59563'; break; case 32: ctx.fillStyle = '#f67c5f'; break; case 64: ctx.fillStyle = '#f65e3b'; break; case 128: ctx.fillStyle = '#edcf72'; break; case 256: ctx.fillStyle = '#edcc61'; break; case 512: ctx.fillStyle = '#edc850'; break; case 1024: ctx.fillStyle = '#edc53f'; break; case 2048: ctx.fillStyle = '#edc22e'; break; default: ctx.fillStyle = '#cdc1b4'; break; } ctx.fill(); if (value) { ctx.font = 'bold 30px Arial'; ctx.fillStyle = '#776e65'; ctx.textAlign = 'center'; ctx.fillText(value, col * tileSize + tileSize / 2, row * tileSize + tileSize / 2 + 10); } } function drawBoard() { for (let row = 0; row < size; row++) { for (let col = 0; col < size; col++) { drawTile(row, col, board[row][col]); } } } function addTile() { let emptyTiles = []; for (let row = 0; row < size; row++) { for (let col = 0; col < size; col++) { if (board[row][col] === 0) { emptyTiles.push({ row, col }); } } } if (emptyTiles.length > 0) { const randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)]; const newValue = Math.random() < 0.9 ? 2 : 4; board[randomTile.row][randomTile.col] = newValue; } } function move(direction) { let flipped = false; let rotated = false; if (direction === 'left') { // Do nothing } else if (direction === 'up') { board = rotateBoard(); rotated = true; } else if (direction === 'right') { board = flipBoard(); flipped = true; } else if (direction === 'down') { board = flipBoard(); board = rotateBoard(); flipped = true; rotated = true; } let moved = false; for (let row = 0; row < size; row++) { for (let col = 0; col < size; col++) { if (board[row][col] !== 0) { let newRow = row; let newCol = col; while (newRow > 0 && board[newRow - 1][newCol] === 0) { newRow--; } if (board[newRow][newCol] === 0) { board[newRow][newCol] = board[row][col]; board[row][col] = 0; moved = true; } else if (board[newRow][newCol] === board[row][col]) { board[newRow][newCol] *= 2; board[row][col] = 0; score += board[newRow][newCol]; moved = true; } } } } if (moved) { if (flipped) { board = flipBoard(); } if (rotated) { board = rotateBoard(); board = rotateBoard(); board = rotateBoard(); } addTile(); checkGameOver(); } } function rotateBoard() { let newBoard = []; for (let row = 0; row < size; row++) { newBoard[row] = []; for (let col = 0; col < size; col++) { newBoard[row][col] = board[col][size - row - 1]; } } return newBoard; } function flipBoard() { let newBoard = []; for (let row = 0; row < size; row++) { newBoard[row] = []; for (let col = 0; col < size; col++) { newBoard[row][col] = board[row][size - col - 1]; } } return newBoard; } function checkGameOver() { for (let row = 0; row < size; row++) { for (let col = 0; col < size; col++) { if (board[row][col] === 0) { return; } if (col !== size - 1 && board[row][col] === board[row][col + 1]) { return; } if (row !== size - 1 && board[row][col] === board[row + 1][col]) { return; } } } gameOver = true; } function resetGame() { createBoard(); score = 0; gameOver = false; addTile(); addTile(); } function keyDownHandler(event) { if (!gameOver) { if (event.key === 'ArrowLeft') { move('left'); } else if (event.key === 'ArrowUp') { move('up'); } else if (event.key === 'ArrowRight') { move('right'); } else if (event.key === 'ArrowDown') { move('down'); } } } document.addEventListener('keydown', keyDownHandler); resetGame(); function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBoard(); if (gameOver) { ctx.font = 'bold 40px Arial'; ctx.fillStyle = '#776e65'; ctx.textAlign = 'center'; ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2); } requestAnimationFrame(gameLoop); } gameLoop();

GPTgame

Sign up for free tokens!

2048 game. You need to connect cubes and achieve 2048

GPTgame