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

A dotted guide

What we are doing

The short aiming line becomes a dotted path that follows the shot, bouncing off the walls, up to the bubble it would hit. Bank shots get much easier.

```js
// The path the shot will take, bouncing off the walls, until it would touch a bubble.
function guide() {
  let x = SHOOTER.x
  let y = SHOOTER.y
  let vx = Math.cos(aim) * 4
  const vy = Math.sin(aim) * 4
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
  for (let i = 1; i < 200; i++) {
    x += vx
    y += vy
    if (x < R || x > canvas.width - R) vx = -vx
    if (touches(x, y)) break
    if (i % 5 === 0) ctx.fillRect(x - 1.5, y - 1.5, 3, 3)
  }
}

  if (state === 'playing') guide()
```

What it means

A pretend bubble starts at the shooter and moves in small steps of 4 pixels in the aim's direction.
At a side wall its vx flips, like the real shot; when it would touch a bubble or the ceiling, the loop stops.
Every fifth step a small dot is drawn.

Your turn

Above function draw() {, write the comment and guide.
In draw, replace the six lines that draw the aiming line with if (state === 'playing') guide().

Skills: Velocity and gravity

← Best score Build it yourself: swap bubbles →

All steps