Workshop › Scorched Earth-style Artillery › Step 21 of 23

Drag and let go

What we are doing

Press on the canvas, drag to aim, and let go to fire, like pulling back a slingshot. While the finger is down every movement aims again.

```js
let dragging

  dragging = false

  dragging = true

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

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

What it means

• dragging is true between pressing and letting go.
• Letting go is heard on the whole document, so it still fires if the finger slides off the canvas.

Your turn

1. Under thinking, write dragging; at the end of reset, set it to false.
2. In the pointer-down listener, start dragging before pointAt.
3. Under it, write the move and up listeners.

Skills: Keyboard and mouse input

← Aim with the mouse The atan2 trap →

All steps

1. The ground
2. Hills
3. Two tanks
4. The barrel
5. The game loop
6. Aim
7. Angle and power
8. Fire!
9. Flight
10. Boom
11. Craters
12. Falling tanks
13. Damage
14. Taking turns
15. The computer's shot
16. Hitting a tank
17. Win or lose
18. Wind
19. The computer aims
20. Aim with the mouse
21. Drag and let go
22. The atan2 trap
23. Build it yourself: a trail