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

The eight winning lines

What we are doing

Three in a row wins. There are only 8 such lines: 3 rows, 3 columns, 2 diagonals. We write them down once, as data, instead of writing a long chain of ifs.

```js
const LINES = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
  [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
  [0, 4, 8], [2, 4, 6], // diagonals
]
```

What it means

• LINES is an array of arrays: 8 items, each a small array of 3 cell numbers.
• [0, 1, 2] is the top row; [0, 3, 6] the left column; [0, 4, 8] a diagonal.
• A list can span several lines; the // comments are only notes.

Your turn

Write LINES right under const CELL = 100. Press Run.

Skills: Arrays and objects

← Clicks on any screen size Find three in a row →

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