const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const tileSize = 100; const gridSize = 4; const padding = 10; const animationSpeed = 5; 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 grid = []; function initializeGrid() { for (let i = 0; i < gridSize; i++) { grid[i] = []; for (let j = 0; j < gridSize; j++) { grid[i][j] = 0; } } } function generateNewTile() { const availableTiles = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { availableTiles.push({ x: i, y: j }); } } } if (availableTiles.length > 0) { const randomTile = availableTiles[Math.floor(Math.random() * availableTiles.length)]; grid[randomTile.x][randomTile.y] = Math.random() < 0.9 ? 2 : 4; } } function drawTile(x, y, value) { ctx.fillStyle = colors[value]; ctx.fillRect(x * (tileSize + padding), y * (tileSize + padding), tileSize, tileSize); ctx.fillStyle = '#776E65'; ctx.font = 'bold 36px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, x * (tileSize + padding) + tileSize / 2, y * (tileSize + padding) + tileSize / 2); } 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]; if (value !== 0) { drawTile(i, j, value); } } } } function moveTiles(direction) { let moved = false; let merged = false; const offsetX = direction === 'left' ? -1 : direction === 'right' ? 1 : 0; const offsetY = direction === 'up' ? -1 : direction === 'down' ? 1 : 0; const startX = direction === 'right' ? gridSize - 1 : 0; const startY = direction === 'down' ? gridSize - 1 : 0; const endX = direction === 'right' ? -1 : gridSize; const endY = direction === 'down' ? -1 : gridSize; for (let i = startX; i !== endX; i += offsetX) { for (let j = startY; j !== endY; j += offsetY) { const value = grid[i][j]; if (value !== 0) { let newX = i; let newY = j; while ( newX + offsetX >= 0 && newX + offsetX < gridSize && newY + offsetY >= 0 && newY + offsetY < gridSize && grid[newX + offsetX][newY + offsetY] === 0 ) { newX += offsetX; newY += offsetY; moved = true; } if (newX !== i || newY !== j) { grid[i][j] = 0; grid[newX][newY] = value; } if ( newX + offsetX >= 0 && newX + offsetX < gridSize && newY + offsetY >= 0 && newY + offsetY < gridSize && grid[newX + offsetX][newY + offsetY] === value && !merged ) { grid[newX + offsetX][newY + offsetY] *= 2; grid[newX][newY] = 0; merged = true; } } } } return moved; } function checkGameOver() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { return false; } if ( (i < gridSize - 1 && grid[i][j] === grid[i + 1][j]) || (j < gridSize - 1 && grid[i][j] === grid[i][j + 1]) ) { return false; } } } return true; } function handleKeyPress(event) { if (event.key === 'ArrowUp') { if (moveTiles('up')) { generateNewTile(); } } else if (event.key === 'ArrowDown') { if (moveTiles('down')) { generateNewTile(); } } else if (event.key === 'ArrowLeft') { if (moveTiles('left')) { generateNewTile(); } } else if (event.key === 'ArrowRight') { if (moveTiles('right')) { generateNewTile(); } } if (checkGameOver()) { alert('Game Over'); initializeGrid(); generateNewTile(); } drawGrid(); } initializeGrid(); generateNewTile(); generateNewTile(); drawGrid(); document.addEventListener('keydown', handleKeyPress);

GPTgame

Sign up for free tokens!

2048 with animation and colors

GPTgame