const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const tileSize = 70; const grid = Array(gridSize).fill().map(() => Array(gridSize).fill(0)); let score = 0; function draw() { ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'white'; ctx.font = '20px monospace'; ctx.fillText('Score: ' + score, 10, 20); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { ctx.fillStyle = grid[y][x] ? 'white' : 'gray'; ctx.fillRect(x * tileSize + 5, y * tileSize + 30, tileSize - 10, tileSize - 10); if (grid[y][x]) { ctx.fillStyle = 'black'; ctx.fillText(grid[y][x], x * tileSize + 25, y * tileSize + 60); } } } } function addRandomTile() { const emptyTiles = []; for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (!grid[y][x]) emptyTiles.push({ x, y }); } } if (emptyTiles.length) { const { x, y } = emptyTiles[Math.floor(Math.random() * emptyTiles.length)]; grid[y][x] = Math.random() < 0.9 ? 2 : 4; } } function slide(row) { const arr = row.filter(val => val); const missing = gridSize - arr.length; const zeros = Array(missing).fill(0); return arr.concat(zeros); } function combine(row) { for (let i = 0; i < gridSize - 1; i++) { if (row[i] && row[i] === row[i + 1]) { row[i] *= 2; row[i + 1] = 0; score += row[i]; } } return row; } function moveLeft() { for (let y = 0; y < gridSize; y++) { grid[y] = slide(combine(slide(grid[y]))); } } function rotateGrid() { const newGrid = Array(gridSize).fill().map(() => Array(gridSize).fill(0)); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { newGrid[x][y] = grid[gridSize - y - 1][x]; } } return newGrid; } function move(direction) { for (let i = 0; i < direction; i++) { grid = rotateGrid(); } moveLeft(); for (let i = 0; i < (4 - direction) % 4; i++) { grid = rotateGrid(); } addRandomTile(); draw(); } document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') move(0); if (e.key === 'ArrowUp') move(1); if (e.key === 'ArrowRight') move(2); if (e.key === 'ArrowDown') move(3); }); addRandomTile(); addRandomTile(); draw();

GPTgame

Sign up for free tokens!

2048 But Progressbar 1.0 Styled (based on Windows 1.0)

GPTgame