Workshop › Memory › Step 5 of 25

Four rows

What we are doing

A loop inside a loop: the outer loop goes down the rows, and for each row the inner loop draws the row's four cards. 4 × 4 = 16 cards.

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

What it means

• The outer loop runs 4 times (row = 0 to 3); each time, the inner loop runs 4 times.
• y uses the same pattern as x: TOP + GAP + row * (CARD + GAP).

Your turn

Put the loop inside a new row loop and change the y part of fillRect as shown. Press Run.

Skills: Loops

← A row of cards Every fruit twice →

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