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

Floating +1

What we are doing

Each popup is drawn as a yellow "+1" that rises 30 pixels and fades out over its 600 ms.

```js
ctx.fillStyle = '#fef08a'
ctx.font = 'bold 24px sans-serif'
ctx.textAlign = 'center'
for (const p of popups) {
  const t = (now - p.born) / 600 // 0 → 1 over the popup's life
  ctx.globalAlpha = 1 - t
  ctx.fillText('+1', p.x, p.y - t * 30)
}
ctx.globalAlpha = 1
```

What it means

• t goes from 0 when the popup is born to 1 when it dies.
• globalAlpha is how see-through everything drawn next is: 1 − t fades it out.
• p.y - t * 30 moves it up by up to 30 pixels.
• globalAlpha = 1 afterwards, so the rest of the picture is drawn solid again.

Your turn

In draw, between the holes loop and the white score text, write the popup lines.

Skills: Drawing on a canvas

← Remember each hit Build it yourself: combos →

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