Workshop › Breakout › Step 35 of 39

A burst of particles

What we are doing

The game works; now it should feel good. When a brick breaks we will throw out a dozen tiny particles. First the function that makes them: burst(brick).

```js
let particles

  particles = []

function burst(brick) {
  for (let i = 0; i < 12; i++) {
    particles.push({
      x: brick.x + BRICK_W / 2,
      y: brick.y + BRICK_H / 2,
      vx: Math.random() * 6 - 3,
      vy: Math.random() * 6 - 3,
      life: 30,
      color: COLORS[brick.row],
    })
  }
}
```

What it means

• particles is a list that newGame() empties.
• burst adds 12 particles at the brick's center, each with a random velocity between -3 and 3.
• life: 30 means it lives 30 frames (half a second); color is the brick's color.

Your turn

1. Above let lives write let particles.
2. In newGame, under buildBricks(), write particles = [].
3. Leave an empty line under buildBricks (the function) and write burst.

Skills: Arrays and objects, Velocity and gravity

← Play again Break into sparks →

All steps

1. The field and the paddle
2. Draw again and again
3. Keep a number inside limits
4. Follow the mouse
5. A canvas shown at another size
6. A ball with a velocity
7. Draw a round ball
8. Move the ball
9. Bounce off the side walls
10. Bounce off the ceiling
11. The open floor
12. Bounce off the paddle
13. Aim with the paddle
14. A row of bricks
15. Draw the bricks
16. A whole wall: a loop inside a loop
17. A color for every row
18. Circle meets box
19. Break a brick
20. Hitting the side of a brick
21. Wait on the paddle
22. Ride along with the paddle
23. Launch the ball
24. Click or press Space
25. Remember which keys are held
26. Steer with the arrow keys
27. Three lives
28. Lives and a hint on screen
29. Game over
30. Keep score
31. Show the score
32. Win the game
33. One function for a new game
34. Play again
35. A burst of particles
36. Break into sparks
37. Move, fall and disappear
38. Fade out
39. Build it yourself: tough bricks