MDN Breakout with Phaser 3 — Part 4

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 brickfield, collisions, and sound.

In this article, we’ll go through steps 11 through 13 of the MDN tutorial: “11. The score,” “12. Win the game,” and “13. Extra lives.”

Creating the Score

To begin with, we’ll depart from the MDN tutorial and follow the method described in the Modern JS Phaser tutorial by making a ScoreLabel class. We’ll begin by making ScoreLabel.js in the ‘src/ui’ directory.

The ScoreLabel file will contain all the methods to track and present the score. The Scene will reference an instantiated version of ScoreLabel when any events occur that will modify the score — in this case, the ball hitting the brick.

The formatScore method on line 3 converts the score into a formatted display text for ease of use.

The add method on line 16 will be called by the Scene when an event happens that calls for points to be added to the score.

Next, we import the score and create it in game using a process similar to how we created previous game objects:

1. import the label
2. make a property of the Scene object in its constructor method in which to store the label
3. make a createLabel method in the Scene
4. call the createLabel method in the Scene’s create method and assign the return value to the property created in 2.

Note that we also call the add method on the scoreLabel on line 25, in the Scene’s ballHitBrick method.

The createScoreLabel method instantiates a ScoreLabel Class object (everything in JavaScript is an object), adds it to the Phaser system, and returns the label object.

We attach a reference to the label to a property of the Scene object so we can reference it to call methods. The same could be done to call spawner events, dialog prompts, or any number of game functions.

Win the Game

In the MDN tutorial, the end of the game simply results in a message that you won and a prompt to play again.

We’ll add to this by having a variable that tracks how many times the player has cleared the bricks. Each time they clear the bricks, the ball will speed up and each brick will be worth more points.

We’ll visit that functionality in a minute, but for now we’ll use the simple method from the tutorial until we finish making lives.

The method of detecting if any of the members of the bricks group are alive is simpler than the Phaser 2 code from the MDN tutorial. That wraps up this step.

Extra Lives

We’ll implement making extra lives by making a LivesLabel similar to the ScoreLabel. We will have a starting lives constant that we can pass to the LivesLabel when instantiating it to create the starting lives.

We’ll make LivesLabel.js in the same ‘src/ui’ directory as the ScoreLabel.

Lives will only have one function for modifying lives, the removeLife method. It removes one life from the lives stored as a property on the LivesLabel object.

If the lives go below 1, this method will return false. This means we can use the return value of removeLife as a test for a game over condition.

Before we add the lives display to the screen, let’s create a file that holds a few game constants, similar to our previous physics constants file.

Now that we have game constants, let’s go back and use our basePoints constant in the ballHitBrick collision method. This will allow us to tune how many points a player earns from a logical location.

Next, we will instantiate the LivesLabel in the GameScene and add code in detectBounds to remove a life if the ball hits the bottom of the screen.

We’ll follow the steps we used for adding the ScoreLabel to the game:

1. import the label
2. make a property of the Scene object in its constructor method in which to store the label
3. make a createLabel method in the Scene
4. call the createLabel method in the Scene’s create method and assign the return value to the property created in 2.

The code for making the label follows.

With the ability to have multiple lives, we need to be able to reset the position of the ball and paddle. So we have those functionalities in the resetBallPaddlePosition method.

The deathDelay constant determines how long to wait between when the ball hits the bottom of the screen and when we launch the ball again.

The code for creating that delay is on line 31. Note the need to pass in the ‘this’ value of the Scene object to the delayedCall method.

So now we have created a score and lives. The game is getting more interesting.

Up Next

In the next article in this tutorial series, we will add the ability to increase the difficulty when the level is cleared, and we’ll go through the animations and tweens step of the MDN tutorial.