Workshop › Memory › Step 4 of 25

A row of cards

What we are doing

Instead of four nearly identical lines, a for loop draws a row of four cards. Card col starts at GAP + col * (CARD + GAP): each card is one card plus one gap further right.

```js
for (let col = 0; col < SIZE; col++) {
  ctx.fillRect(GAP + col * (CARD + GAP), TOP + GAP, CARD, CARD)
}
```

What it means

• let col = 0 starts a counter at 0; col < SIZE keeps going while it is below 4; col++ adds 1 after each round.
• So the body runs for col = 0, 1, 2, 3: x = 12, 109, 206, 303.

Your turn

Replace the line ctx.fillRect(GAP, TOP + GAP, CARD, CARD) with the loop. Press Run.

Skills: Loops

← One card Four rows →

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