script.js

const gameBoard = document.querySelector(".game-board");
const scoreDisplay = document.querySelector("#score");
let board = [];
let score = 0;

function initBoard() {
  board = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
  ];
  addTile();
  addTile();
  renderBoard();
}

function addTile() {
  let emptyTiles = [];
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (board[i][j] === 0) {
        emptyTiles.push({ row: i, col: j });
      }
    }
  }
  if (emptyTiles.length > 0) {
    let randomTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
    board[randomTile.row][randomTile.col] = Math.random() < 0.9 ? 2 : 4;
  }
}

function renderBoard() {
  gameBoard.innerHTML = "";
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      const tileValue = board[i][j];
      const tile = document.createElement("div");
      tile.classList.add("tile");
      if (tileValue > 0) {
        tile.classList.add(`tile-${tileValue}`);
        tile.textContent = tileValue;
      }
      gameBoard.appendChild(tile);
    }
  }
  scoreDisplay.textContent = score;
}

function moveTiles(direction) {
  let moved = false;
  if (direction === "ArrowUp") {
    for (let j = 0; j < 4; j++) {
      for (let i = 1; i < 4; i++) {
        if (board[i][j] !== 0) {
          let k = i;
          while (k > 0 && board[k - 1][j] === 0) {
            board[k - 1][j] = board[k][j];
            board[k][j] = 0;
            k--;
            moved = true;
          }
          if (k > 0 && board[k - 1][j] === board[k][j]) {
            board[k - 1][j] *= 2;
            score += board[k - 1][j];
            board[k][j] = 0;
            moved = true;
          }
        }
      }
    }
  } else if (direction === "ArrowDown") {
    for (let j = 0; j < 4; j++) {
      for (let i = 2; i >= 0; i--) {
        if (board[i][j] !== 0) {
          let k = i;
          while (k < 3 && board[k + 1][j] === 0) {
            board[k + 1][j] = board[k][j];
            board[k][j] = 0;
            k++;
            moved = true;
          }
          if (k < 3 && board[k + 1][j] === board[k][j]) {
            board[k + 1][j] *= 2;
            score += board[k + 1][j];
            board[k][j] = 0;
            moved = true;
          }
        }
      }
    }
  } else if (direction === "ArrowLeft") {
    for (let i = 0; i < 4; i++) {
      for (let j = 1; j < 4; j++) {
        if (board[i][j] !== 0) {
          let k = j;
          while (k > 0 && board[i][k - 1] === 0) {
            board[i][k - 1] = board[i][k];
            board[i][k] = 0;
            k--;
            moved = true;
          }
          if (k > 0 && board[i][k - 1] === board[i][k]) {
            board[i][k - 1] *= 2;
            score += board[i][k - 1];
            board[i][k] = 0;
            moved = true;
          }
        }
      }
    }
  } else if (direction === "ArrowRight") {
    for (let i = 0; i < 4; i++) {
      for (let j = 2; j >= 0; j--) {
        if (board[i][j] !== 0) {
          let k = j;
          while (k < 3 && board[i][k + 1] === 0) {
            board[i][k + 1] = board[i][k];
            board[i][k] = 0;
            k++;
            moved = true;
          }
          if (k < 3 && board[i][k + 1] === board[i][k]) {
            board[i][k + 1] *= 2;
            score += board[i][k + 1];
            board[i][k] = 0;
            moved = true;
          }
        }
      }
    }
  }
  if (moved) {
    addTile();
    renderBoard();
  }
}

document.addEventListener("keydown", (event) => {
  moveTiles(event.key);
});

initBoard();