MDN Breakout with Phaser 3 — Part 6

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 extra difficulty and adding animations and tweens.

In this article, we’ll go through step 15 of the MDN tutorial: “15. Adding buttons.”

Adding Buttons

In order to start adding a ‘Start Game’ button, we first need a state variable based on which value the game will either run or not.

Next, we’ll place the code in the update method that moves the ball inside a conditional so it only runs when ‘this.playing’ is true. We’ll also take out the line of code in the create method that starts the ball moving. And we’ll make a method that stops the ball that can be called between games.

With the ball movement code updated, it’s on to putting the start button in the Scene. Before we begin, you can grab the button asset from the assets repository.

We use the same steps to put the start button in the Scene as for previous gameobjects:

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

With the start button loaded into the scene, now we can link it to an event listener and have it trigger a startGame method that begins the game.

For additional ease-of-use, we’ll connect the enter key and space key to the startGame method as well, so the user can start the game with those keys.

The last thing left to do is to update the game over logic to stop the game and reenable the start button.

This concludes our work in this MDN Breakout tutorial series, and we’ve now converted the breakout game to Phaser 3 with modern JavaScript. You should be able to apply these examples to help you start making your own game with modular design.

It’s good to remember the steps for implementing gameobjects and labels. When trying to implement functionality that hasn’t been covered, its good to try Google. There is always a way forward!

Happy coding!