Breakout-8 implements a rudimentary particle system to create a nicer visual effect when the ball collides with a brick. For a fantastic introduction to particles, please watch this video from The Coding Train. As the final update, we’re also adding music.

Important Code

• In Particle.js we define a class that represents one tiny particle in the game. Each particle has its own position, velocity, and acceleration. We can manipulate these values to achieve a little “explosion” effect in the game when a brick is hit.
• In the constructor() of Brick.js, we define a new array of particles that will be populated in hit() and a colours array of RGB values corresponding to the blue, green, red, purple, and gold colours of our bricks from the sprite sheet.
  • In hit(), we then use colours to set the colour when instantiating new particle objects.
  • In update() and render(), we make sure every particle gets updated and drawn to the screen according to each particle’s individual life value.
  • Make sure to now call brick.update(dt) in PlayState.js.
• Finally, we add some music to the game in globals.js by adding the music track to our sounds object (notice the true for looping) and calling sounds.music.play() in main.js.

And with that, we have a fully functioning game of Breakout!

📚 References

• Harvard’s CS50 Introduction to Game Development - Breakout
• Particle Systems - The Coding Train
• The Art of Video Game Title Screens - NakeyJakey