Difficulty Levels

You have two AIs hiding in one function: a random guesser and a strategist. Today you give them names, let the player pick between them with a dropdown, and lay the slot where next lesson's unbeatable AI will drop in. The real lesson is choosing behavior at runtime.

The plan: separate "decide" from "dispatch"

Right now computerMove does two jobs tangled together: it decides which cell to play (the win/block/random logic) and it's the thing called to move. To support difficulty, split those:

• Each difficulty becomes its own strategy function that takes the board and returns an index — it decides, but doesn't move.
• computerMove becomes a thin dispatcher: look at the chosen difficulty, call the matching strategy, play its answer.

Step 1: Pull out the shared helper

Both Easy and Normal need the list of empty cells, so give it a home:

function getEmptyCells() {
  const empty = [];
  for (let i = 0; i < board.length; i++) {
    if (board[i] === "") empty.push(i);
  }
  return empty;
}

Step 2: Name the two strategies

Easy is your old random pick. Normal is the win/block/random logic you just built. Each returns an index:

// EASY: pure random
function easyMove() {
  const empty = getEmptyCells();
  return empty[Math.floor(Math.random() * empty.length)];
}

// NORMAL: win, else block, else random
function normalMove() {
  let choice = findWinningMove(computer);
  if (choice === null) choice = findWinningMove(human);
  if (choice === null) choice = easyMove();   // reuse Easy as the fallback
  return choice;
}

Notice normalMove falls back to easyMove() for its random case — the levels build on each other instead of duplicating code.

Step 3: A dispatch table (functions as values)

Here's the elegant part. You can store the strategies in an object, keyed by difficulty name — then picking a strategy is just a lookup, exactly like playerNames[currentPlayer], except the values are functions:

const strategies = {
  easy: easyMove,
  normal: normalMove,
  crazy: normalMove    // placeholder — becomes minimax in Lesson 10
};

Step 4: The dispatcher

let difficulty = "normal";   // current setting (state)

function computerMove() {
  if (isGameOver) return;

  const strategy = strategies[difficulty];   // pick the function
  const choice = strategy();                    // run it -> an index

  makeMove(choice);                          // one shared "play it" path
}

Three difficulties, one dispatcher. Adding minimax next lesson is now a two-line change: write crazyMove, point crazy: at it.

Step 5: The dropdown

A <select> gives the player the choice. Add it to index.html:

<label for="difficulty">Difficulty:</label>
<select id="difficulty">
  <option value="easy">Easy</option>
  <option value="normal" selected>Normal</option>
  <option value="crazy">Crazy</option>
</select>

Then listen for changes. When the player switches difficulty, update the state and reset for a clean game:

document.querySelector("#difficulty")
        .addEventListener("change", (event) => {
  difficulty = event.target.value;   // "easy" | "normal" | "crazy"
  resetGame();
});

Live demo

Switch difficulty and play. Easy guesses randomly (very beatable); Normal blocks and takes wins. (Crazy currently mirrors Normal — next lesson it becomes unbeatable.)

Build it yourself

1. Add getEmptyCells(), then easyMove() and normalMove() (move your existing logic into them).
2. Add the strategies object and let difficulty = "normal";.
3. Rewrite computerMove as the dispatcher.
4. Add the <select> to your HTML and the change listener.

What you just learned

• Strategy functions: each difficulty is a function that returns a decision; one dispatcher does the acting.
• Dispatch table: an object mapping names to functions replaces an if/else ladder. Functions are values.
• The <select> element and the change event, reading event.target.value.
• Designing for extension: the crazy slot is ready; minimax drops in with no other changes.