const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const tileSize = 100; const tileMargin = 10; const canvasSize = tileSize * gridSize + tileMargin * (gridSize + 1); canvas.width = canvasSize; canvas.height = canvasSize; const tiles = []; function createTile() { const tile = { value: Math.random() < 0.9 ? 2 : 4, merged: false }; return tile; } function drawTile(tile, x, y) { ctx.fillStyle = '#eee4da'; ctx.fillRect(x, y, tileSize, tileSize); ctx.font = 'bold 40px Arial'; ctx.fillStyle = '#776e65'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(tile.value, x + tileSize / 2, y + tileSize / 2); } function drawBoard() { ctx.clearRect(0, 0, canvasSize, canvasSize); for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { const tile = tiles[i][j]; const x = tileMargin + (tileSize + tileMargin) * j; const y = tileMargin + (tileSize + tileMargin) * i; if (tile) { drawTile(tile, x, y); } } } } function addRandomTile() { const emptyTiles = []; for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (!tiles[i][j]) { emptyTiles.push({ row: i, col: j }); } } } if (emptyTiles.length > 0) { const randomIndex = Math.floor(Math.random() * emptyTiles.length); const randomTile = emptyTiles[randomIndex]; tiles[randomTile.row][randomTile.col] = createTile(); } } function initialize() { for (let i = 0; i < gridSize; i++) { tiles[i] = []; for (let j = 0; j < gridSize; j++) { tiles[i][j] = null; } } addRandomTile(); addRandomTile(); drawBoard(); } function moveTiles(direction) { let moved = false; for (let i = 0; i < gridSize; i++) { const row = tiles[i]; if (direction === 'left') { for (let j = 0; j < gridSize; j++) { const tile = row[j]; if (tile) { let k = j; while (k > 0 && !row[k - 1]) { row[k - 1] = row[k]; row[k] = null; k--; moved = true; } if (k > 0 && row[k - 1] && row[k - 1].value === tile.value && !row[k - 1].merged) { row[k - 1].value *= 2; row[k - 1].merged = true; row[k] = null; moved = true; } } } } else if (direction === 'right') { for (let j = gridSize - 1; j >= 0; j--) { const tile = row[j]; if (tile) { let k = j; while (k < gridSize - 1 && !row[k + 1]) { row[k + 1] = row[k]; row[k] = null; k++; moved = true; } if (k < gridSize - 1 && row[k + 1] && row[k + 1].value === tile.value && !row[k + 1].merged) { row[k + 1].value *= 2; row[k + 1].merged = true; row[k] = null; moved = true; } } } } } for (let i = 0; i < gridSize; i++) { for (let j = 0; j < gridSize; j++) { if (tiles[i][j]) { tiles[i][j].merged = false; } } } if (moved) { addRandomTile(); drawBoard(); } } function handleKeyDown(event) { if (event.key === 'ArrowLeft') { moveTiles('left'); } else if (event.key === 'ArrowRight') { moveTiles('right'); } else if (event.key === 'ArrowUp') { moveTiles('up'); } else if (event.key === 'ArrowDown') { moveTiles('down'); } } document.addEventListener('keydown', handleKeyDown); initialize();

GPTgame

Sign up for free tokens!

2049

GPTgame