Workshop › Puzzle Bobble-style Bubble Shooter › Step 9 of 31

Aim with the pointer

What we are doing

The pointer aims too: the angle from the shooter to the pointer is Math.atan2(dy, dx). Points below the shooter are ignored. The page may show the canvas at another size, so the position is first turned into canvas pixels.

```js
function pointAt(event) {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * canvas.width) / rect.width
  const y = ((event.clientY - rect.top) * canvas.height) / rect.height
  if (y < SHOOTER.y) aim = clampAim(Math.atan2(y - SHOOTER.y, x - SHOOTER.x))
}

canvas.addEventListener('pointermove', pointAt)
canvas.addEventListener('pointerdown', pointAt)
```

What it means

getBoundingClientRect() gives where the canvas is on screen and how big it is shown; the event's position is scaled to canvas pixels.
Math.atan2(dy, dx) is the angle of the vector from the shooter to the point, in any direction (note: y first).
The function itself is passed to addEventListener, so it is called with the event, both on moving and on pressing.

Your turn

Above function drawBubble(...) write pointAt and the two listeners, with an empty line after them.

Skills: Keyboard and mouse input

← Turn with the arrows Fire! →

All steps