Workshop › Whack-a-Mole › Step 4 of 18

A clock and a loop

What we are doing

Moles come and go with time, so the game needs a clock. A loop redraws about 60 times a second, and the browser tells it the time in milliseconds; we keep it in now.

```js
let now = 0 // time of the current frame, in ms

function loop(time) {
  now = time
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)
```

What it means

• requestAnimationFrame(loop) asks the browser to run loop before the next screen refresh, passing the time.
• loop saves the time, draws, and asks again, so it never stops.
• The call at the bottom starts it (it replaces the single draw()).

Your turn

1. Under the holes loop, write let now = 0.
2. Replace the draw() call at the bottom with loop and requestAnimationFrame(loop).

Skills: The game loop

← Draw the holes A mole in a hole →

All steps

1. A green field
2. Nine holes
3. Draw the holes
4. A clock and a loop
5. A mole in a hole
6. Moles pop up
7. Which hole was clicked?
8. Whack!
9. Show the score
10. Click to start
11. Time's running
12. Time's up
13. Best score
14. How far into the round?
15. Faster and faster
16. Remember each hit
17. Floating +1
18. Build it yourself: combos