index.html

<title>Tic Tac Toe</title>
<meta charset="UTF-8" />

<style>
  body,
  td,
  input,
  button {
    font-size: 24px;
    line-height: 1.5;
    text-align: center;
    font-family: system-ui, sans-serif;
  }
  td {
    height: 3rem;
    width: 3rem;
    text-align: center;
  }
  table {
    margin: 5rem auto;
  }
  @media (prefers-color-scheme: dark) {
    body,
    input {
      background: #222;
      color: #ccc;
    }
  }
</style>

<h1>Tic Tac Toe</h1>

<table>
  <tr>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" /></td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" /></td>
  </tr>
  <tr>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" /></td>
  </tr>
</table>

<h2 hidden>Game over</h2>
<button id="play-again" hidden>Play again</button>

<script>
  // Initialization
  const boxes = Array.from(document.querySelectorAll("td"));
  const inputs = Array.from(document.querySelectorAll("[type=checkbox]"));
  const rows = [1, 2, 3].map((n) =>
    Array.from(document.querySelectorAll(`tr:nth-child(${n}) td`))
  );
  const columns = [1, 2, 3].map((n) =>
    Array.from(document.querySelectorAll(`td:nth-child(${n})`))
  );
  const diagonals = [
    [
      [1, 1],
      [2, 2],
      [3, 3],
    ],
    [
      [3, 1],
      [2, 2],
      [1, 3],
    ],
  ].map((set) =>
    set.map(([x, y]) =>
      document.querySelector(`tr:nth-child(${x}) td:nth-child(${y})`)
    )
  );
  const gameOver = document.querySelector("h2");
  const playAgainBtn = document.getElementById("play-again");
  const HUMAN = "🧑‍💻";
  const ROBOT = "🤖";

  // Decide who goes first
  if (Math.random() > 0.5) {
    runRobotTurn();
  }

  // Handle when a user clicks an input
  for (const input of inputs) {
    input.addEventListener("click", handleClickInput);
  }

  // Play again: reload the page to reset state
  playAgainBtn.addEventListener("click", () => window.location.reload());

  // The user chose a box, check for win, robot turn, check for win
  function handleClickInput(evt) {
    evt.target.closest("td").innerHTML = HUMAN;
    if (hasWin()) {
      return endGame("human");
    }
    if (hasDraw()) {
      return endGame("draw");
    }
    runRobotTurn();
    if (hasWin()) {
      return endGame("robot");
    }
    if (hasDraw()) {
      return endGame("draw");
    }
  }

  // Choose a random available box
  function runRobotTurn() {
    const robotBoxes = shuffle(boxes);
    while (robotBoxes.length) {
      const box = robotBoxes.shift();
      if (box.querySelector("input")) {
        box.innerHTML = ROBOT;
        break;
      }
    }
  }

  // Determine win
  function hasWin() {
    return (
      rows.some(hasAllSame) ||
      columns.some(hasAllSame) ||
      diagonals.some(hasAllSame)
    );
  }

  // Determine draw (no more available inputs)
  function hasDraw() {
    return !document.querySelector("td input[type=checkbox]");
  }

  // Determine if every cell matches
  function hasAllSame(arr) {
    return arr.every(
      (td) => !td.querySelector("input") && td.innerHTML === arr[0].innerHTML
    );
  }

  // Display game over, cancel events
  function endGame(result) {
    if (result === "draw") {
      gameOver.textContent = "Game over: Draw";
    } else if (result === "human") {
      gameOver.textContent = "Game over: You win";
    } else if (result === "robot") {
      gameOver.textContent = "Game over: Robot wins";
    }
    gameOver.hidden = false;
    playAgainBtn.hidden = false;
    // Move focus to the button for quick replay
    playAgainBtn.focus();
    for (const input of inputs) {
      input.removeEventListener("click", handleClickInput);
      input.remove();
    }
  }

  // Shuffle a copy of the input array
  function shuffle(array) {
    array = array.slice(0);
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * i);
      const temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  }
</script>