Workshop › Rhythm Lanes › Step 8 of 35

The clock decides where

What we are doing

The game counts frames in frame. A note's height is worked out from how far away its time is: on the line exactly at its time, and SPEED pixels higher for every frame still to go.

```js
const SPEED = 4 // pixels a note falls per frame

let frame

  frame = 0
}

// Where a note is drawn: on the line at its time, higher up the earlier it is.
const noteY = (note) => HIT_Y - (note.time - frame) * SPEED
```

What it means

• frame counts frames; reset sets it to 0.
• note.time - frame is how many frames are left. Times SPEED it is the distance above the line.
• noteY is a one-line arrow function: it returns the value after =>.

Your turn

1. Under HIT_Y write SPEED.
2. Under let notes write let frame.
3. At the end of reset, write frame = 0.
4. Under reset, after an empty line, write the comment and noteY.

Skills: Game states

← From text to notes Draw the notes →

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