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

Time's running

What we are doing

The seconds left are shown on the right, and when the time is up the round is over and the moles hide.

```js
if (now >= endsAt) {
  state = 'over'
  for (const hole of holes) hole.upUntil = 0
  return
}

if (state === 'playing') {
  ctx.textAlign = 'right'
  ctx.fillText('Time: ' + Math.ceil((endsAt - now) / 1000), canvas.width - 12, 28)
}
```

What it means

• When now reaches endsAt, the state becomes 'over' and every hole is emptied.
• (endsAt - now) / 1000 is the seconds left; Math.ceil rounds up, so 0.3 seconds still shows as 1.
• textAlign = 'right' lines the time up against the right edge.

Your turn

1. In update, under the first line, write the time-up block.
2. In draw, under the Score line, write the time block.

Skills: Game states, The game loop

← Click to start Time's up →

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