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

The shooter

What we are doing

The shooter sits at the bottom. It shows the loaded bubble, and a smaller one beside it shows the next. Knowing the next color lets a player plan two moves ahead.

```js
const SHOOTER = { x: 200, y: 490 }

let loaded // color of the bubble in the shooter
let next // color of the one after

function pickColor() {
  return Math.floor(Math.random() * COLORS.length)
}

  loaded = pickColor()
  next = pickColor()

  drawBubble(SHOOTER.x, SHOOTER.y, loaded)
  drawBubble(SHOOTER.x + 60, SHOOTER.y + 10, next, 12)
```

What it means

SHOOTER is where shots start.
loaded and next are color numbers, picked at the end of reset.
The next bubble is drawn smaller (radius 12), to the right of the shooter.

Your turn

Under COLORS write SHOOTER; under let grid ... write let loaded and let next.
Above function reset() { write pickColor; at the end of reset pick the two colors.
In draw, after the grid loops, leave an empty line and draw the two bubbles.

Skills: Game states

← Bubbles that nest Aim upwards →

All steps