Workshop › Memory › Step 10 of 25

Draw again and again

What we are doing

Cards will turn over, so the picture must follow every change. A loop redraws the board before every screen refresh (requestAnimationFrame, about 60 times a second). Then any change to a card shows up by itself.

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

newGame()
requestAnimationFrame(loop)
```

What it means

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

Your turn

Write loop above newGame() at the bottom, and replace the last draw() with requestAnimationFrame(loop).

Skills: The game loop

← Draw the cards from the list The face of a card →

All steps

1. Get the canvas and the pen
2. The table
3. One card
4. A row of cards
5. Four rows
6. Every fruit twice
7. Cards that know themselves
8. A card's corner
9. Draw the cards from the list
10. Draw again and again
11. The face of a card
12. A fair shuffle
13. Which card is at a point?
14. Click to turn a card
15. One place for the rules
16. Two cards at a time
17. Pair or no pair
18. Count the moves
19. Show moves and pairs
20. All pairs found
21. Play again
22. A number that follows
23. Swap sides halfway
24. Animate the turn
25. Build it yourself: your best game