Workshop › Simon Says Colors › Step 4 of 27

Two colors for every pad

What we are doing

Each pad has two colors: a dim one for "off" and a bright one for "lit". We keep both in an object, and the four pads in an array, PADS.

```js
// Each pad: its dim color and its lit color. Pads 0 1 on top, 2 3 below.
const PADS = [
  { dim: '#14532d', lit: '#4ade80' },
  { dim: '#7f1d1d', lit: '#f87171' },
  { dim: '#713f12', lit: '#facc15' },
  { dim: '#1e3a8a', lit: '#60a5fa' },
]
```

What it means

• { dim: ..., lit: ... } is an object: two named colors in one package.
• [ ... ] is an array of four such objects: green, red, yellow, blue.
• Items are numbered from 0: PADS[0] is green (top left), PADS[3] blue (bottom right).

Your turn

Under HALF, write the comment and PADS. Copy the color codes carefully. Press Run.

Skills: Arrays and objects

← The first pad All four pads →

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