const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const tileSize = 100; const boardSize = 4; const board = []; let score = 0; canvas.width = tileSize * boardSize; canvas.height = tileSize * boardSize; // Initialize the board for (let i = 0; i < boardSize; i++) { board[i] = []; for (let j = 0; j < boardSize; j++) { board[i][j] = 0; } } // Generate a new tile function generateTile() { const emptyTiles = []; for (let i = 0; i < boardSize; i++) { for (let j = 0; j < boardSize; j++) { if (board[i][j] === 0) { emptyTiles.push({ x: i, y: j }); } } } if (emptyTiles.length > 0) { const randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)]; board[randomTile.x][randomTile.y] = Math.random() < 0.9 ? 2 : 4; } } // Draw the board function drawBoard() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < boardSize; i++) { for (let j = 0; j < boardSize; j++) { const tile = board[i][j]; const x = j * tileSize; const y = i * tileSize; ctx.fillStyle = getTileColor(tile); ctx.fillRect(x, y, tileSize, tileSize); ctx.fillStyle = getTextColor(tile); ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(tile, x + tileSize / 2, y + tileSize / 2); } } } // Get the color for a tile function getTileColor(tile) { switch (tile) { 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'; } } // Get the text color for a tile function getTextColor(tile) { return tile >= 8 ? '#f9f6f2' : '#776e65'; } // Handle key events document.addEventListener('keydown', function (event) { event.preventDefault(); const key = event.key; if (key === 'ArrowUp') { moveUp(); } else if (key === 'ArrowDown') { moveDown(); } else if (key === 'ArrowLeft') { moveLeft(); } else if (key === 'ArrowRight') { moveRight(); } }); // Move the tiles up function moveUp() { for (let j = 0; j < boardSize; j++) { for (let i = 1; i < boardSize; i++) { if (board[i][j] !== 0) { let k = i; while (k > 0 && board[k - 1][j] === 0) { board[k - 1][j] = board[k][j]; board[k][j] = 0; k--; } if (k > 0 && board[k - 1][j] === board[k][j]) { board[k - 1][j] *= 2; score += board[k - 1][j]; board[k][j] = 0; } } } } generateTile(); drawBoard(); } // Move the tiles down function moveDown() { for (let j = 0; j < boardSize; j++) { for (let i = boardSize - 2; i >= 0; i--) { if (board[i][j] !== 0) { let k = i; while (k < boardSize - 1 && board[k + 1][j] === 0) { board[k + 1][j] = board[k][j]; board[k][j] = 0; k++; } if (k < boardSize - 1 && board[k + 1][j] === board[k][j]) { board[k + 1][j] *= 2; score += board[k + 1][j]; board[k][j] = 0; } } } } generateTile(); drawBoard(); } // Move the tiles left function moveLeft() { for (let i = 0; i < boardSize; i++) { for (let j = 1; j < boardSize; j++) { if (board[i][j] !== 0) { let k = j; while (k > 0 && board[i][k - 1] === 0) { board[i][k - 1] = board[i][k]; board[i][k] = 0; k--; } if (k > 0 && board[i][k - 1] === board[i][k]) { board[i][k - 1] *= 2; score += board[i][k - 1]; board[i][k] = 0; } } } } generateTile(); drawBoard(); } // Move the tiles right function moveRight() { for (let i = 0; i < boardSize; i++) { for (let j = boardSize - 2; j >= 0; j--) { if (board[i][j] !== 0) { let k = j; while (k < boardSize - 1 && board[i][k + 1] === 0) { board[i][k + 1] = board[i][k]; board[i][k] = 0; k++; } if (k < boardSize - 1 && board[i][k + 1] === board[i][k]) { board[i][k + 1] *= 2; score += board[i][k + 1]; board[i][k] = 0; } } } } generateTile(); drawBoard(); } // Initialize the game generateTile(); generateTile(); drawBoard();

GPTgame

Sign up for free tokens!

2048 but you can play using a touch screen

GPTgame