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

Listen for clicks

What we are doing

The player plays with the mouse. We ask the canvas to tell us about every click. As a first try, any click plays the middle cell and redraws.

```js
canvas.addEventListener('click', (event) => {
  play(4)
  draw()
})
```

What it means

Your turn

Write the listener above function draw() {, under play, with empty lines around it. Run and click the board twice.

Skills: Keyboard and mouse input

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