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

A mole in a hole

What we are doing

Each hole remembers until when its mole stays up: upUntil, a time. The mole is up while now has not reached it. A mole is drawn as a lighter brown circle inside its hole.

```js
    holes.push({ x: col * CELL + CELL / 2, y: TOP + row * CELL + CELL / 2, upUntil: 0 })

function isUp(hole) {
  return now < hole.upUntil
}

    if (isUp(hole)) {
      ctx.fillStyle = '#92400e'
      ctx.beginPath()
      ctx.arc(hole.x, hole.y, 32, 0, Math.PI * 2)
      ctx.fill()
    }
```

What it means

• upUntil: 0 means no mole: time is always past 0.
• isUp answers true while the current time is before upUntil.
• An up mole is drawn with radius 32, inside the hole of radius 40.

Your turn

1. Add upUntil: 0 to the object in holes.push.
2. Under let now, write isUp.
3. In draw, inside the holes loop, write the mole block under ctx.fill().

Skills: Game states

← A clock and a loop Moles pop 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