Workshop › Rhythm Lanes › Step 13 of 35

Keys for the lanes

What we are doing

The keys D, F, J and K (where your fingers rest) or the four arrows press the lanes. A table turns a key into a lane, and press(lane) lights that lane up.

```js
const KEYS = { d: 0, f: 1, j: 2, k: 3, ArrowLeft: 0, ArrowDown: 1, ArrowUp: 2, ArrowRight: 3 }

function press(lane) {
  lit[lane] = 8
}

document.addEventListener('keydown', (event) => {
  const lane = KEYS[event.key] ?? KEYS[event.key.toLowerCase()]
  if (lane === undefined) return
  event.preventDefault()
  press(lane)
})
```

What it means

• KEYS is an object used as a table: KEYS['j'] is 2. A key that is not in it gives undefined.
• press(lane) sets that lane's countdown to 8 frames.
• addEventListener('keydown', ...) runs the arrow function each time a key goes down; event.key is its name.
• a ?? b uses b when a is missing: the key as it is, or else in lower case (so a capital D works too).
• preventDefault() stops the arrow keys from scrolling the page.

Your turn

1. Under LEAD write KEYS.
2. Above function update() { write press, with an empty line after it.
3. Above function draw() { write the keydown listener, with an empty line after it.

Skills: Keyboard and mouse input

← Lanes that light up Show the keys →

All steps

1. A stage for the notes
2. The first lane
3. Four lanes with a loop
4. The hit line
5. A function that draws
6. The song as text
7. From text to notes
8. The clock decides where
9. Draw the notes
10. A clock that ticks
11. The game loop
12. Lanes that light up
13. Keys for the lanes
14. Show the keys
15. Hit the closest note
16. Close enough in time
17. One press, one hit
18. A message on the screen
19. Say Hit
20. Let the message go
21. Perfect or good
22. Keep count
23. Missed notes
24. Score
25. Hits in a row
26. The multiplier
27. The song ends
28. Stop the clock
29. Accuracy
30. The grade
31. The results
32. Play again
33. Best score
34. Lanes you can tap
35. Build it yourself: a speed setting