MDN Breakout with Phaser 3 — Part 3
By: Michael Bragg
Tags: Phaser 3, JavaScript, Game Development

The MDN “2D breakout game with Phaser” tutorial shows you a basic way to make a game with Phaser 2. I recently did the tutorial so I could guide others through it.

However, the tutorial doesn’t show you how to use the most recent version of Phaser, or how to use good design concepts that will help you make your own game using JavaScript best practices.

So I set about adapting the MDN tutorial according to the format set out in the Ourcade “Modern JavaScript” phaser tutorial. The tutorial uses the phaser3-parcel-template, which helps with starting up a complex phaser project.

Here is a link to the finished code, and another link to the assets used in the project.

The last step of the tutorial covered creating the player paddle and controls and adding a game over.

In this article, I will cover adding sound and steps 9 and 10 of the MDN tutorial: “9. Build the brickfield,” “10. Collision detection,” and “10.5 adding sound.”

Build the Brickfield

Before we get started adding bricks, be sure to grab the brick image from the asset files.

The first thing we’ll do is create the brickInfo constant, which holds the information on the size of bricks, how many there are, and how they’re positioned on the screen.

This code will go on the root level of the GameScene.js file.

Next, we go through the same steps to create gameobjects that we did with the ball and paddle:

create a key constant to use when loading the asset make a property of the Scene object in its constructor method in which to store the asset load the asset in the Scene’s preload method make a createObject method in the Scene call the createObject method in the Scene’s create method and assign the return value to the property created in 2.

The bricks will exist in a staticGroup, as opposed to the ball and paddle, as they don’t need to be moved or react to any physics.

Most of the magic happens on line 27, with the create method. This tells a group to create a gameobject at given coordinates with an asset and add it to its collection of gameobjects.

We could change the size of the bricks and the padding by altering brickInfo, and the createBricks method will produce bricks accordingly. By rendering the bricks based on constant values, we can more easily make tweaks as needed.

Adding Brick Collision

To add brick collision, we will simply create a between the ball gameobject and the bricks group, set a method to be triggered by the collision, and pass the “this” value of the Scene object into the collider call.

The disableBody() method replaces the Phaser 2 gameobject.kill() method. The first parameter of disableBody toggles the physics and the second toggles the visability.

Adding Sound

Before we start adding sound, be sure to download the sounds and put them in your assets folder. The sounds, themselves, were sourced from freesound.org.

Adding sounds is a bit like adding images. We’ll follow a similar pattern to adding gameobjects:

create a key constant to use when loading the asset load the asset in the Scene’s preload method play the sound as needed

Let’s get started. There’s not much code for this one.

We will need to add method to call when the ball hits the paddle so that we can trigger a sound there.

And with that, we have bricks that can be destroyed, and we have sound effects.

Up Next

In the next article in this tutorial series, we will cover adding a score, creating simple victory conditions, and adding extra lives.