const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const tileSize = 100; const gridSize = 4; const padding = 10; const boardSize = (tileSize + padding) * gridSize + padding; canvas.width = boardSize; canvas.height = boardSize; const colors = { 2: '#eee4da', 4: '#ede0c8', 8: '#f2b179', 16: '#f59563', 32: '#f67c5f', 64: '#f65e3b', 128: '#edcf72', 256: '#edcc61', 512: '#edc850', 1024: '#edc53f', 2048: '#edc22e', }; let score = 0; let board = []; function drawTile(x, y, value) { ctx.fillStyle = colors[value]; ctx.fillRect(x, y, tileSize, tileSize); ctx.fillStyle = '#776e65'; ctx.font = 'bold 36px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, x + tileSize / 2, y + tileSize / 2); } function drawBoard() { ctx.clearRect(0, 0, boardSize, boardSize); for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { const value = board[row][col]; const x = padding + col * (tileSize + padding); const y = padding + row * (tileSize + padding); drawTile(x, y, value); } } } function generateTile() { const row = Math.floor(Math.random() * gridSize); const col = Math.floor(Math.random() * gridSize); if (board[row][col] === 0) { board[row][col] = Math.random() < 0.9 ? 2 : 4; } else { generateTile(); } } function startGame() { score = 0; board = Array.from({ length: gridSize }, () => Array(gridSize).fill(0)); generateTile(); generateTile(); drawBoard(); } function moveTiles(direction) { let moved = false; let merged = false; function mergeTiles(row, col, nextRow, nextCol) { if (board[row][col] === board[nextRow][nextCol]) { board[row][col] *= 2; board[nextRow][nextCol] = 0; score += board[row][col]; merged = true; } } function moveTile(row, col, nextRow, nextCol) { if (board[nextRow][nextCol] === 0) { board[nextRow][nextCol] = board[row][col]; board[row][col] = 0; moved = true; } } function slideTiles() { for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { if (board[row][col] !== 0) { let nextRow, nextCol; switch (direction) { case 'up': nextRow = row - 1; nextCol = col; break; case 'down': nextRow = row + 1; nextCol = col; break; case 'left': nextRow = row; nextCol = col - 1; break; case 'right': nextRow = row; nextCol = col + 1; break; } if ( nextRow >= 0 && nextRow < gridSize && nextCol >= 0 && nextCol < gridSize ) { if (board[nextRow][nextCol] === 0) { moveTile(row, col, nextRow, nextCol); } else { mergeTiles(row, col, nextRow, nextCol); } } } } } } slideTiles(); if (moved || merged) { generateTile(); drawBoard(); if (checkGameOver()) { alert('Game Over!'); startGame(); } } } function checkGameOver() { for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { if (board[row][col] === 0) { return false; } if ( col < gridSize - 1 && board[row][col] === board[row][col + 1] ) { return false; } if ( row < gridSize - 1 && board[row][col] === board[row + 1][col] ) { return false; } } } return true; } function handleKeyDown(event) { event.preventDefault(); switch (event.key) { case 'ArrowUp': moveTiles('up'); break; case 'ArrowDown': moveTiles('down'); break; case 'ArrowLeft': moveTiles('left'); break; case 'ArrowRight': moveTiles('right'); break; } } document.addEventListener('keydown', handleKeyDown); startGame();

GPTgame

Sign up for free tokens!

2048, with colors, with animations, with score board.

GPTgame