Project - 5

Project 5: Tic-Tac-Toe Game

Build a two-player Tic-Tac-Toe game with win detection, draw detection, and a Reset button.

Your challenge: Store the board in an array, let players take turns, check for a winner after each move, and reset the game when needed.

✦ HTML + CSS + JS Editor

▶ Live Output

Store the game board

The board array contains nine positions. An empty string means the cell has not been played yet.

Create the cells

Use forEach() to create one button for each array position.

When a cell is clicked, pass its index to handleMove().

Check for a winner

The winCombos array contains every possible winning set of three positions.

Loop through those combinations and check whether all three positions contain the same mark.

Detect a draw

If nobody has won and board.includes("") is false, every cell is filled and the game is a draw.

Try it: Play until X wins, O wins, and the board ends in a draw.

Good JavaScript habit: Keep the board data in an array and rebuild the visible board from that data. This keeps the game state easier to manage.

👀 Show Full Working Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tic-Tac-Toe</title>

  <style>
    body {
      background: #000;
      color: #8A8A8A;
      font-family: 'Courier New', monospace;
      text-align: center;
      padding: 40px;
      margin: 0;
    }

    .board {
      display: grid;
      grid-template-columns: repeat(3, 90px);
      gap: 8px;
      justify-content: center;
      margin: 25px auto;
    }

    .cell {
      width: 90px;
      height: 90px;
      background: #111;
      color: #fff;
      border: 1px solid #8A8A8A;
      font-size: 2.5rem;
      cursor: pointer;
    }

    .cell:focus-visible,
    #resetBtn:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }

    #resetBtn {
      padding: 10px 16px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <h2>Tic-Tac-Toe</h2>

  <p id="status">Player X's turn</p>

  <div id="board" class="board"></div>

  <button id="resetBtn" type="button">Reset Game</button>

  <script>
    let board = ["", "", "", "", "", "", "", "", ""];
    let currentPlayer = "X";
    let gameActive = true;

    const winCombos = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];

    const boardDiv =
      document.getElementById("board");

    const status =
      document.getElementById("status");

    const resetBtn =
      document.getElementById("resetBtn");

    function createBoard() {
      boardDiv.textContent = "";

      board.forEach(function(cell, index) {
        const button =
          document.createElement("button");

        button.className = "cell";
        button.type = "button";
        button.textContent = cell;

        button.addEventListener("click", function() {
          handleMove(index);
        });

        boardDiv.appendChild(button);
      });
    }

    function handleMove(index) {
      if (!gameActive || board[index] !== "") {
        return;
      }

      board[index] = currentPlayer;

      if (!checkResult()) {
        currentPlayer =
          currentPlayer === "X" ? "O" : "X";

        status.textContent =
          "Player " + currentPlayer + "'s turn";
      }

      createBoard();
    }

    function checkResult() {
      for (let i = 0; i < winCombos.length; i++) {
        const combo = winCombos[i];

        const a = combo[0];
        const b = combo[1];
        const c = combo[2];

        if (
          board[a] !== "" &&
          board[a] === board[b] &&
          board[a] === board[c]
        ) {
          status.textContent =
            "Player " + currentPlayer + " wins!";

          gameActive = false;
          return true;
        }
      }

      if (!board.includes("")) {
        status.textContent = "It's a draw!";
        gameActive = false;
        return true;
      }

      return false;
    }

    function resetGame() {
      board = ["", "", "", "", "", "", "", "", ""];
      currentPlayer = "X";
      gameActive = true;

      status.textContent = "Player X's turn";

      createBoard();
    }

    resetBtn.addEventListener("click", resetGame);

    createBoard();
  </script>

</body>
</html>