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

Which hole was clicked?

What we are doing

A click gives a point on the canvas. holeAt finds the hole whose circle contains that point, using the distance to the hole's middle (Pythagoras).

```js
function holeAt(x, y) {
  return holes.find((hole) => {
    const dx = x - hole.x
    const dy = y - hole.y
    return dx * dx + dy * dy <= HOLE_R * HOLE_R
  })
}
```

What it means

• find returns the first hole for which the function returns true, or undefined if none does.
• dx and dy are how far the point is from the hole's middle, sideways and up/down.
• Comparing dx² + dy² with R² avoids a square root.

Your turn

Above update, write holeAt.

Skills: Collision detection

← Moles pop up Whack! →

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