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

Bubbles that fall

What we are doing

Popped bubbles should not just vanish. Each one jumps up a little and falls off the screen, pulled by gravity.

```js
let falling // popped and dropped bubbles on their way out: { x, y, vy, r, color }
  falling = []

    const p = cellPos(r, c)
    falling.push({ x: p.x, y: p.y, vy: -2, r: R, color: grid[r][c] })

  for (const f of falling) {
    f.vy += 0.4
    f.y += f.vy
  }
  falling = falling.filter((f) => f.y - f.r < canvas.height)

  for (const f of falling) drawBubble(f.x, f.y, f.color, f.r)
```

What it means

Before a cell is emptied, a copy of its bubble goes into falling, moving up (vy: -2).
Every frame gravity adds 0.4 to vy, so it slows, turns and falls faster and faster.
Bubbles below the bottom are dropped from the list; the rest are drawn over the grid.

Your turn

Under let shot, write let falling; in reset, under shot = null, write falling = [].
In remove, write the two lines at the top of the loop.
At the start of update, write the gravity loop and the filter line.
In draw, under the grid loop, draw the falling bubbles.

Skills: Velocity and gravity

← Three in a row pop Cut them loose →

All steps