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

Whack-a-Mole: A green field

Moles pop out of holes; click them before they hide. Time-based state, circle hit tests, a timed round and a difficulty curve.

What we are doing

We are building Whack-a-Mole: moles pop out of holes and you click them before they hide. First the field: get the canvas, get its drawing pen, paint it green.

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

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

What it means

• getElementById('game') finds the canvas; getContext('2d') gives the object with the drawing commands.
• fillStyle picks a color, fillRect fills a rectangle: here the whole canvas.

Your turn

Write the lines under the comments, then press Run.

Skills: Drawing on a canvas

Nine holes →

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