Workshop › Simon Says Colors › Step 17 of 27

Play with the keyboard

What we are doing

Q W on the top row and A S below mirror the pads; 1 to 4 work too. A lookup table, KEYS, turns a key name into a pad number, and a keydown listener presses that pad.

```js
const KEYS = { q: 0, w: 1, a: 2, s: 3, 1: 0, 2: 1, 3: 2, 4: 3 }

document.addEventListener('keydown', (event) => {
  if (event.repeat) return
  if (event.key in KEYS) press(KEYS[event.key])
})
```

What it means

• KEYS is an object used as a lookup table: key name → pad number.
• keydown fires when a key goes down; event.key is its name, like 'w'.
• A held key sends many keydowns with event.repeat true; we ignore those.
• event.key in KEYS asks whether the table has that key; KEYS[event.key] reads its pad number.

Your turn

1. Under PADS, write KEYS.
2. Under press, leave an empty line and write the keydown listener.

Skills: Keyboard and mouse input

← Check each press Which pad is at a point? →

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