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

Smaller steps

What we are doing

At 12 pixels a frame, a shot can jump over a narrow gap or deep into a bubble before we check. So each frame is split into three smaller steps of 4 pixels, each checking for a touch.

```js
// A few small steps per frame, so the bubble cannot jump past a gap.
for (let i = 0; i < 3 && shot; i++) {
  shot.x += shot.vx / 3
  shot.y += shot.vy / 3
  if (shot.x < R || shot.x > canvas.width - R) {
    shot.vx = -shot.vx // bounce off the side walls
    shot.x = Math.max(R, Math.min(canvas.width - R, shot.x))
  }
  if (touches(shot.x, shot.y)) {
    const cell = snap(shot.x, shot.y)
    attach(cell.r, cell.c, shot.color)
    shot = null
  }
}
```

What it means

The loop runs three times, but stops early once shot is null (&& shot): after sticking there is nothing to move.
Each step moves a third of the velocity.

Your turn

In update, put the lines after if (!shot) return inside the for loop (with its comment), indented, and divide the velocities by 3.

Skills: Velocity and gravity, Collision detection

← Stick into the grid Six neighbours →

All steps