const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const tileSize = 100; const gridSize = 4; const grid = []; function initGrid() { for (let i = 0; i < gridSize; i++) { grid[i] = []; for (let j = 0; j < gridSize; j++) { grid[i][j] = 0; } } } function drawTile(x, y, value) { const colors = { 0: '#CDC1B4', 2: '#EEE4DA', 4: '#EDE0C8', 8: '#F2B179', 16: '#F59563', 32: '#F67C5F', 64: '#F65E3B', 128: '#EDCF72', 256: '#EDCC61', 512: '#EDC850', 1024: '#EDC53F', 2048: '#EDC22E', }; ctx.fillStyle = colors[value]; ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize); ctx.fillStyle = '#776E65'; ctx.font = 'bold 36px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(value, x * tileSize + tileSize / 2, y * tileSize + 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++) { drawTile(j, i, grid[i][j]); } } } function getRandomEmptyCell() { const emptyCells = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { emptyCells.push({ x: j, y: i }); } } } if (emptyCells.length > 0) { const randomIndex = Math.floor(Math.random() * emptyCells.length); return emptyCells[randomIndex]; } return null; } function addRandomTile() { const emptyCell = getRandomEmptyCell(); if (emptyCell) { const newValue = Math.random() < 0.9 ? 2 : 4; grid[emptyCell.y][emptyCell.x] = newValue; } } function isGameOver() { for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (grid[i][j] === 0) { return false; } if (i > 0 && grid[i][j] === grid[i - 1][j]) { return false; } if (i < gridSize - 1 && grid[i][j] === grid[i + 1][j]) { return false; } if (j > 0 && grid[i][j] === grid[i][j - 1]) { return false; } if (j < gridSize - 1 && grid[i][j] === grid[i][j + 1]) { return false; } } } return true; } function moveTiles(direction) { let moved = false; let merged = false; const oldGrid = JSON.parse(JSON.stringify(grid)); const reverse = direction === 'right' || direction === 'down'; const transpose = direction === 'up' || direction === 'down'; for (let i = 0; i < gridSize; i++) { const row = []; for (let j = 0; j < gridSize; j++) { const x = transpose ? j : i; const y = transpose ? i : j; row.push(grid[y][x]); } if (reverse) { row.reverse(); } let newRow = []; let mergedRow = []; for (let j = 0; j < gridSize; j++) { if (row[j] !== 0) { if (newRow.length > 0 && newRow[newRow.length - 1] === row[j] && !mergedRow.includes(newRow.length - 1)) { newRow[newRow.length - 1] *= 2; mergedRow.push(newRow.length - 1); merged = true; } else { newRow.push(row[j]); } } } while (newRow.length < gridSize) { newRow.push(0); } if (reverse) { newRow.reverse(); } for (let j = 0; j < gridSize; j++) { const x = transpose ? j : i; const y = transpose ? i : j; if (grid[y][x] !== newRow[j]) { moved = true; } grid[y][x] = newRow[j]; } } if (moved || merged) { addRandomTile(); } if (isGameOver()) { // Game over logic here } drawGrid(); } function handleKeyDown(event) { if (event.key === 'ArrowUp') { moveTiles('up'); } else if (event.key === 'ArrowDown') { moveTiles('down'); } else if (event.key === 'ArrowLeft') { moveTiles('left'); } else if (event.key === 'ArrowRight') { moveTiles('right'); } } function startGame() { initGrid(); addRandomTile(); addRandomTile(); drawGrid(); document.addEventListener('keydown', handleKeyDown); } startGame();

GPTgame

Sign up for free tokens!

2048, each tile with a number has its own color

GPTgame