Workshop › Rhythm Lanes › Step 1 of 35

Rhythm Lanes: A stage for the notes

Hit the notes as they reach the line. A song written as text, notes placed by time and drawn from the clock, timing windows for perfect and good, misses, combos that raise a multiplier, accuracy and a grade, and lanes you can tap on a phone.

What we are doing

In a rhythm game notes slide down lanes towards a line, and you press the lane's key the moment a note reaches it. First the stage: find the canvas, take its pen and paint it dark.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```

What it means

• document.getElementById('game') finds the canvas; const canvas = names it.
• canvas.getContext('2d') gives the pen with all drawing commands; we call it ctx.
• fillStyle picks a color, fillRect(x, y, width, height) fills a rectangle. (0, 0) is the top-left corner, and canvas.width, canvas.height (400, 560) make it cover everything.

Your turn

Write the lines under the three comment lines, then press Run.

Skills: Drawing on a canvas

The first lane →

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