Workshop › Rhythm Lanes › Step 12 of 35

Lanes that light up

What we are doing

When you press a lane it should light up for a moment. Each lane gets a countdown in lit: while it is above 0, the lane is drawn lighter, and every frame counts it down by one.

```js
let lit // frames each lane stays lit after a press

  lit = [0, 0, 0, 0]

  lit = lit.map((n) => Math.max(0, n - 1))

    ctx.fillStyle = lit[lane] > 0 ? '#334155' : '#1e293b'
```

What it means

• lit has one countdown per lane; reset sets all four to 0.
• lit.map(...) makes a new list with 1 taken off each number, but never below 0 (Math.max picks the bigger).
• condition ? a : b picks a when the condition is true: a lit lane is #334155, a dark one #1e293b.

Your turn

1. Under let frame write let lit.
2. At the end of reset, write lit = [0, 0, 0, 0].
3. In update, above frame += 1, write the lit.map line.
4. In draw, in the lanes loop, change the '#1e293b' color line as shown.

Skills: Game states

← The game loop Keys for the lanes →

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