Workshop › Angry Birds-style Slingshot › Step 21 of 47

Grab the sling

What we are doing

Pressing the pointer near the sling (within 60 pixels) while aiming grabs it: dragging becomes true and the aim follows the point.

```js
let dragging

  dragging = false

canvas.addEventListener('pointerdown', (event) => {
  if (state !== 'aiming') return
  const point = toCanvas(event)
  if (Math.hypot(point.x - SLING.x, point.y - SLING.y) > 60) return
  dragging = true
  pull(point)
})
```

What it means

pointerdown fires when a mouse button or a finger goes down on the canvas.
Math.hypot(point.x - SLING.x, point.y - SLING.y) is the distance from the sling; more than 60 means "not on the sling".
dragging remembers that the sling is held, for the next step.

Your turn

Under let aim write let dragging; in reset, under aim = ..., write dragging = false.
Above function draw() { write the pointerdown listener.

Skills: Keyboard and mouse input

← From a point to an aim Drag and let go →

All steps