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

Whack!

What we are doing

A click on a hole whose mole is up scores a point and sends the mole back down at once.

```js
let score = 0

canvas.addEventListener('pointerdown', (event) => {
  // The canvas may be displayed at a different size than its own pixels, so scale the pointer.
  const rect = canvas.getBoundingClientRect()
  const x = (event.clientX - rect.left) * (canvas.width / rect.width)
  const y = (event.clientY - rect.top) * (canvas.height / rect.height)
  const hole = holeAt(x, y)
  if (hole && isUp(hole)) {
    score += 1
    hole.upUntil = 0
  }
})
```

What it means

pointerdown fires when a mouse button or a finger goes down on the canvas.
The event's position is in page pixels; subtracting the canvas's position and scaling gives canvas pixels.
A hit adds a point and sets upUntil to 0, which hides the mole.

Your turn

Under let nextPop, write let score = 0.
Above update, write the pointerdown listener.

Skills: Keyboard and mouse input

← Which hole was clicked? Show the score →

All steps