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

Find three in a row

What we are doing

winningLine(cells) looks through LINES and returns the first line whose three cells hold the same mark, and that mark is not empty.

```js
function winningLine(cells) {
  return LINES.find(([a, b, c]) => cells[a] !== '' && cells[a] === cells[b] && cells[a] === cells[c])
}
```

What it means

• LINES.find(test) returns the first line that passes the test, or undefined if none does.
• ([a, b, c]) => ... names the three numbers of each line a, b and c.
• && means "and": all three conditions must be true.
• The board comes in as a parameter cells instead of reading board, so we can test any board.

Your turn

Under let player = 'X', leave an empty line and write winningLine. It stays above function play.

Skills: Arrays and objects, Functions

← The eight winning lines Win, draw or go on →

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