Workshop › Simon Says Colors › Step 8 of 27

Draw again and again

What we are doing

For pads to light up and go dark, the board must be redrawn all the time. A loop draws and asks the browser to run it again before the next screen refresh (requestAnimationFrame, about 60 times a second).

```js
function loop() {
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)
```

What it means

• loop draws once, then requestAnimationFrame(loop) books the next turn, so it keeps going.
• The last line starts the loop. It replaces the old single draw() call.
• loop has no parentheses there: we hand over the function, the browser calls it later.

Your turn

Replace the draw() call at the bottom with the loop function and requestAnimationFrame(loop).

Skills: The game loop

← Light a pad The sequence to remember →

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