Workshop › Pool › Step 27 of 33

Pull back and let go

What we are doing

Now the slingshot is complete: a press starts dragging, moving the pointer keeps pulling, and letting go shoots. We listen for the release on the document, so letting go outside the canvas still shoots.

```js
let dragging

  dragging = false

  dragging = true

canvas.addEventListener('pointermove', (event) => {
  if (dragging) pull(toCanvas(event))
})

document.addEventListener('pointerup', () => {
  if (!dragging) return
  dragging = false
  if (power >= 1) shoot()
})
```

What it means

dragging is true between the press and the release.
pointermove updates the aim and power while dragging.
On release: stop dragging and shoot, unless the pull was tiny.

Your turn

Under let power write let dragging; in reset, under power = 8, write dragging = false.
In pointerdown, write dragging = true above pull(...).
Under the pointerdown listener write the pointermove and pointerup listeners, with empty lines between.

Skills: Keyboard and mouse input

← Press to aim Smaller steps →

All steps