document.addEventListener('DOMContentLoaded', () => { const dimension = 4; let grid = []; const gridContainer = document.getElementById('grid-container'); const restartButton = document.getElementById('restart-button'); function initializeGrid() { grid = Array(dimension).fill().map(() => Array(dimension).fill(0)); gridContainer.innerHTML = ''; for (let row = 0; row < dimension; row++) { for (let col = 0; col < dimension; col++) { const tile = document.createElement('div'); tile.classList.add('tile'); gridContainer.appendChild(tile); } } } function generateRandomTile() { let emptyTiles = []; for (let row = 0; row < dimension; row++) { for (let col = 0; col < dimension; col++) { if (grid[row][col] === 0) { emptyTiles.push({ row, col }); } } } if (emptyTiles.length > 0) { const randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)]; grid[randomTile.row][randomTile.col] = Math.random() < 0.9 ? 2 : 4; updateGrid(); } } function updateGrid() { const tiles = document.querySelectorAll('.tile'); grid.flat().forEach((value, index) => { tiles[index].innerHTML = value === 0 ? '' : value; tiles[index].setAttribute('data-value', value); }); } function slide(row) { const currentRow = row.filter(val => val); const emptyCells = Array(dimension - currentRow.length).fill(0); return [...currentRow, ...emptyCells]; } function combine(row) { for (let i = 0; i < dimension - 1; i++) { if (row[i] === row[i + 1] && row[i] !== 0) { row[i] *= 2; row[i + 1] = 0; } } return row; } function slideAndCombineRowRight(row) { return slide(combine(slide(row))); } function slideGridRight() { for (let i = 0; i < dimension; i++) { grid[i] = slideAndCombineRowRight(grid[i]); } } function rotateGridClockwise() { const newGrid = Array(dimension).fill().map(() => Array(dimension).fill(0)); for (let row = 0; row < dimension; row++) { for (let col = 0; col < dimension; col++) { newGrid[col][dimension - 1 - row] = grid[row][col]; } } grid = newGrid; } function moveGrid(direction) { for (let i = 0; i < direction; i++) { rotateGridClockwise(); } slideGridRight(); for (let i = 0; i < (4 - direction) % 4; i++) { rotateGridClockwise(); } generateRandomTile(); } function control(e) { if (e.key === 'ArrowRight') { moveGrid(0); } else if (e.key === 'ArrowDown') { moveGrid(1); } else if (e.key === 'ArrowLeft') { moveGrid(2); } else if (e.key === 'ArrowUp') { moveGrid(3); } } function restartGame() { initializeGrid(); generateRandomTile(); generateRandomTile(); } document.addEventListener('keyup', control); restartButton.addEventListener('click', restartGame); restartGame(); });

2048 Puzzle Game