Workshop › Tic-tac-toe › Step 26 of 33

The computer answers

What we are doing

After your X, the computer plays O right away. Only a real move by X, in a round that is not over, gets an answer; that is what the true/false from play was for.

```js
} else if (player === 'X') {
  // The canvas may be displayed at a different size than its 300×300 pixels, so scale the click.
  const rect = canvas.getBoundingClientRect()
  const x = (event.clientX - rect.left) * (canvas.width / rect.width)
  const y = (event.clientY - rect.top) * (canvas.height / rect.height)
  const moved = play(Math.floor(y / CELL) * 3 + Math.floor(x / CELL))
  if (moved && !result) play(computerMove(board))
}
```

What it means

• else if (player === 'X'): clicks only count when it is X's turn.
• moved keeps the answer of play: true if X really moved.
• !result means "no result yet". If both hold, the computer plays computerMove(board).

Your turn

1. Change } else { to } else if (player === 'X') {.
2. Replace the const index and play(index) lines with the moved line and the computer's move.

Skills: Keyboard and mouse input, Game states

← A computer that picks a cell Rule one: take the center →

All steps

1. Get the canvas and the pen
2. Paint the board
3. The first grid line
4. Repeat with a loop
5. Finish the grid
6. The board as a list
7. A function that draws
8. Write an X
9. From cell number to position
10. Draw what the board holds
11. A color for each mark
12. Make a move
13. No playing on a taken cell
14. Listen for clicks
15. Which cell was clicked?
16. Clicks on any screen size
17. The eight winning lines
18. Find three in a row
19. Win, draw or go on
20. The round ends
21. Show who won
22. Light up the winning line
23. A function for a fresh round
24. Click to play again
25. A computer that picks a cell
26. The computer answers
27. Rule one: take the center
28. Rule two: win when you can
29. Rule three: block the opponent
30. Score a finished game
31. Look ahead: minimax
32. A computer that never loses
33. Build it yourself: keep score