Workshop › Simon Says Colors › Step 5 of 27

All four pads

What we are doing

A forEach loop draws every pad from the list. Pad i is in column i % 2 and row Math.floor(i / 2) of a 2×2 grid, which gives the corner of its quarter.

```js
PADS.forEach((pad, i) => {
  const x = (i % 2) * HALF
  const y = TOP + Math.floor(i / 2) * HALF
  ctx.fillStyle = pad.dim
  ctx.fillRect(x + 6, y + 6, HALF - 12, HALF - 12)
})
```

What it means

• PADS.forEach((pad, i) => { ... }) runs the small function once per pad: pad is the object, i its number.
• i % 2 is the remainder after dividing by 2: 0 for the left column, 1 for the right.
• Math.floor(i / 2) rounds down: 0 for the top row, 1 for the bottom.
• x, y are the quarter's corner; the square is drawn 6 pixels in, as before.

Your turn

Replace the two green lines at the end with the forEach block. Press Run.

Skills: Arrays and objects, Loops

← Two colors for every pad A function that draws →

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