Tic-Tac-Toe

HTML

document.addEventListener("DOMContentLoaded", () => {
  const squares = Array.from(document.querySelectorAll(".square"));
  const statusDisplay = document.getElementById("status");
  const movesList = document.getElementById("moves");

  let history = [Array(9).fill(null)];
  let xIsNext = true;
  let currentMove = 0;

  function render() {
    const currentSquares = history[currentMove];
    squares.forEach((square, i) => {
      square.textContent = currentSquares[i];
    });

    const winner = calculateWinner(currentSquares);
    if (winner) {
      statusDisplay.textContent = `Winner: ${winner}`;
    } else {
      statusDisplay.textContent = `Next player: ${xIsNext ? "X" : "O"}`;
    }

    renderMoves();
  }

  function renderMoves() {
    movesList.innerHTML = "";
    history.forEach((_, move) => {
      const moveItem = document.createElement("li");
      const button = document.createElement("button");
      button.textContent = move ? `Go to move #${move}` : "Go to game start";
      button.addEventListener("click", () => jumpTo(move));
      moveItem.appendChild(button);
      movesList.appendChild(moveItem);
    });
  }

  function handleSquareClick(index) {
    const currentSquares = history[currentMove];
    if (calculateWinner(currentSquares) || currentSquares[index]) {
      return;
    }

    const nextSquares = currentSquares.slice();
    nextSquares[index] = xIsNext ? "X" : "O";

    history = [...history.slice(0, currentMove + 1), nextSquares];
    currentMove++;
    xIsNext = !xIsNext;

    render();
  }

  function jumpTo(move) {
    currentMove = move;
    xIsNext = move % 2 === 0;
    render();
  }

  function calculateWinner(squares) {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6],
    ];
    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (
        squares[a] &&
        squares[a] === squares[b] &&
        squares[a] === squares[c]
      ) {
        return squares[a];
      }
    }
    return null;
  }

  squares.forEach((square, index) => {
    square.addEventListener("click", () => handleSquareClick(index));
  });

  render();
});

HTML Tic-tac-toeCSS Tic-tac-toeTS Tic-tac-toe