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

Aim with the mouse

What we are doing

On a phone there are no arrow keys, so you can aim by pointing: the direction from your barrel to the pointer is the angle, and the distance is the power. Math.atan2 turns a direction into an angle. After the game, a tap plays again.

```js
// Point from your tank: the direction is the aim, the distance is the power.
function pointAt(event) {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * W) / rect.width
  const y = ((event.clientY - rect.top) * H) / rect.height
  const t = tanks[0]
  const angle = Math.atan2(y - (t.y - 8), x - t.x)
  t.angle = angle
  t.power = Math.max(2, Math.min(MAX_POWER, Math.hypot(x - t.x, y - (t.y - 8)) / 12))
}

canvas.addEventListener('pointerdown', (event) => {
  if (state === 'won' || state === 'lost') return reset()
  if (state !== 'aiming' || turn !== 0) return
  pointAt(event)
})
```

What it means

The pointer position is scaled to canvas pixels, in case the canvas is shown bigger or smaller.
Math.atan2(dy, dx) gives the angle of the direction (dx, dy). Note: y first.
Every 12 pixels of distance is one unit of power, kept between 2 and 12.

Your turn

Above draw, write pointAt and the pointer listener.

Skills: Keyboard and mouse input, Velocity and gravity

← The computer aims Drag and let go →

All steps