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

Fire!

What we are doing

A shot is a bubble in flight: a position, a velocity along the aim (SPEED pixels per frame), and the loaded color. Firing moves the next bubble into the shooter. Space shoots, and so does letting go of the pointer.

```js
const SPEED = 12

let shot // the bubble in flight: { x, y, vx, vy, color }, or null

  shot = null

function shoot() {
  if (shot) return
  shot = { x: SHOOTER.x, y: SHOOTER.y, vx: Math.cos(aim) * SPEED, vy: Math.sin(aim) * SPEED, color: loaded }
  loaded = next
  next = pickColor()
}

  else if (event.key === ' ') shoot()

canvas.addEventListener('pointerup', shoot)

  if (shot) drawBubble(shot.x, shot.y, shot.color)
```

What it means

• shot is null while nothing flies; shoot does nothing if a bubble is already flying.
• The new shot starts at the shooter with a velocity of SPEED along the aim, in the loaded color; then the next bubble is loaded and a new next is picked.
• The flying bubble is drawn when there is one.

Your turn

1. Under SHOOTER write SPEED; under let next ... write let shot ...; in reset, under aim = ..., write shot = null.
2. Under reset, leave an empty line and write shoot.
3. Add the Space line above else return, and the pointerup line under the pointerdown line.
4. In draw, under the next bubble, draw the shot.

Skills: Velocity and gravity, Keyboard and mouse input

← Aim with the pointer Fly →

All steps

1. The night sky
2. One bubble
3. A grid of cells
4. Draw the grid
5. Bubbles that nest
6. The shooter
7. Aim upwards
8. Turn with the arrows
9. Aim with the pointer
10. Fire!
11. Fly
12. Bounce off the walls
13. Touching something?
14. Stick into the grid
15. Smaller steps
16. Six neighbours
17. Flood fill
18. Three in a row pop
19. Bubbles that fall
20. Cut them loose
21. Show the score
22. Only useful colors
23. Count the shots
24. The ceiling comes down
25. Win or lose
26. The danger line
27. The end message
28. Play again
29. Best score
30. A dotted guide
31. Build it yourself: swap bubbles