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

Aim upwards

What we are doing

The aim is an angle in radians. On the canvas y grows downwards, so straight up is -π/2. A short line from the shooter shows it: Math.cos(aim) is how far right and Math.sin(aim) how far down for each unit along it.

```js
let aim // angle of the shot, in radians

  aim = -Math.PI / 2

  ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)'
  ctx.lineWidth = 2
  ctx.beginPath()
  ctx.moveTo(SHOOTER.x, SHOOTER.y)
  ctx.lineTo(SHOOTER.x + Math.cos(aim) * 80, SHOOTER.y + Math.sin(aim) * 80)
  ctx.stroke()
```

What it means

At -π/2, cos is 0 and sin is -1: the line goes 80 pixels straight up.
moveTo puts the pen down, lineTo draws to the end point, stroke paints the line. It is drawn before the loaded bubble, which covers its start.

Your turn

Under let grid ... write let aim ...; in reset, above loaded = pickColor(), write aim = -Math.PI / 2.
In draw, above the loaded bubble, write the six line-drawing lines.

Skills: Drawing on a canvas

← The shooter Turn with the arrows →

All steps