Workshop › Memory › Step 22 of 25

A number that follows

What we are doing

To animate a turn, we separate the truth from what is shown. card.faceUp stays the rule; a new number card.flip goes from 0 (back) to 1 (face) and chases faceUp by 0.1 every frame.

```js
    flip: 0, // 0 = showing its back, 1 = showing its face; follows faceUp over a few frames

function loop() {
  for (const card of cards) {
    card.flip = card.faceUp ? Math.min(1, card.flip + 0.1) : Math.max(0, card.flip - 0.1)
  }
  draw()
```

What it means

• Every new card starts with flip: 0.
• Each frame, a face-up card's flip grows by 0.1, a face-down card's shrinks by 0.1.
• Math.min(1, ...) never lets it pass 1, Math.max(0, ...) never below 0. It takes 10 frames to turn.

Your turn

1. In newGame, under matched: false,, write the flip line.
2. In loop, above draw(), write the for loop.

Skills: The game loop, Game states

← Play again Swap sides halfway →

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