Workshop › Simon Says Colors › Step 14 of 27

Show the whole sequence

What we are doing

A for loop cannot show the sequence: it would run through it in a single frame. Instead showAt remembers which step comes next, and timer spreads the steps over many frames. After the last step, it is the player's turn.

```js
let showAt // which step of the sequence is being shown, and when

  showAt = 0

  if (showAt === sequence.length) {
    state = 'input'
    return
  }
  // Light the next pad, then wait a little longer than it stays lit, so repeats are two separate flashes.
  light(sequence[showAt], 30)
  showAt += 1
  timer = 30 + 8
```

What it means

• showAt is the step of the sequence to show next; nextRound starts it at 0.
• When every step has been shown (showAt === sequence.length), it is the player's turn.
• Otherwise light sequence[showAt], move on to the next step, and wait 38 frames.
• The wait is 8 frames longer than the light: if the same pad comes twice, it goes dark in between.

Your turn

1. Under let state, write let showAt.
2. In nextRound, write showAt = 0 under state = 'showing'.
3. In update, replace light(sequence[0], 30) and state = 'input' with the new lines.

Skills: Game states, The game loop

← The computer shows a pad Watch, then your turn →

All steps

1. Get the canvas and the pen
2. A dark board
3. The first pad
4. Two colors for every pad
5. All four pads
6. A function that draws
7. Light a pad
8. Draw again and again
9. The sequence to remember
10. Show the round
11. Light a pad for a while
12. Go dark again
13. The computer shows a pad
14. Show the whole sequence
15. Watch, then your turn
16. Check each press
17. Play with the keyboard
18. Which pad is at a point?
19. Play with the mouse
20. Progress and mistakes
21. A function for a new game
22. Click to retry
23. Light up when pressed
24. Faster and faster
25. Save the best score
26. Show the best score
27. Build it yourself: no dawdling