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

Time's up

What we are doing

At the end of a round a dark band across the field shows the result. A click starts a new round (that already works: any click while not playing calls start).

```js
if (state === 'over') {
  ctx.fillStyle = 'rgba(0, 0, 0, 0.6)'
  ctx.fillRect(0, 150, canvas.width, 150)
  ctx.fillStyle = 'white'
  ctx.font = 'bold 30px sans-serif'
  ctx.fillText("Time's up!", canvas.width / 2, 190)
  ctx.font = '20px sans-serif'
  ctx.fillText('Score: ' + score, canvas.width / 2, 225)
  ctx.font = '16px sans-serif'
  ctx.fillText('Click to play again', canvas.width / 2, 282)
}
```

What it means

• rgba(0, 0, 0, 0.6) is black at 60%, so the field shows faintly through the band.
• "Time's up!" uses double quotes because the text contains an apostrophe.

Your turn

At the end of draw, under the ready block, write the over block.

Skills: Drawing on a canvas

← Time's running Best score →

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