Build a simple browser game with Javascript library Phaser

In this article I will go over the steps to create a simple HTML5 browser game using a Javascript library called Phaser.

Setups

1. A browser to play the game, I use Google Chrome. But any browser will work. Chrome also comes with good developer tools to identity any errors in your Javascript code.
2. A code editor. I use VS Code with Live Server extension. VS Code to write the code and Live Server allows you to make changes to your code, and immediately see those changes in your browser after you’ve saved your file. Another added benefit of Live Server is you can right click on the HTML file in VS Code and choose the option of Open with Live Server to directly launch the file via your default browser.
3. The Phaser library. It can be downloaded at https://github.com/photonstorm/phaser/releases/download/v3.52.0/phaser.min.js
4. Some character sprites, a background image of your choice, and an MP3 file for background music (Optional). I use this website to grab some Pokemon sprites https://www.dragonflycave.com/resources/sprite-generator

File structure

We only need 3 or 4 simple files to get started. So let’s create those.

1. In your main project folder, create a new folder named js, this is the folder where we will place our Javascript files. Drag the phaser.min.js file you just downloaded in the above step into this folder.
2. In the same folder, create a file named scene1.js. The game will have only 1 scene for now. This is where we create our scene with sprites and the logic happens.
3. Still in the same folder, create a file named game.js. This is our main game file where we create the game instance. It’s possible to combine scene1.js with game.js and only have 1 file, but as our game gets more complicated and we create more scenes, it’s easier and more organized to keep every scene separated.
4. Go up to the project folder and create a folder named assets, this is where you can place your character sprites, background image, audio files, etcs.
5. In the project folder, create an HTML file. In the body of the HTML file, put in <script src=”js/phaser.min.js”></script>

<script src=”js/scene1.js”></script>

<script src=”js/game.js”></script> so we can load the Phaser library and our 2 game files. The order is important because we have to load the Phaser library first, then we create the scene using methods in the library, and finally we put our scene into our game. The rest of the HTML file just needs a DOCTYPE, an HTML tag, a head and a body tag.

A scene in Phaser is similar to a scene in any video game/movie. The scene will have characters, a background, some music, and some movement by the characters, but any of the above is optional, meaning they don’t need to exist for the scene to be created. And a whole game/movie is simply a collection of scenes. So let’ s create our first scene.

Creating the scene1.js file

1. class Scene1 extends Phaser.Scene{} All of your codes should be inside the {} of this Scene1 class we just created. This class inherits from Phaser.Scene class so we can call methods from the parent class.
2. We can write a constructor for our class as well

constructor() {super(“scene1”)} but this step is optional. We can invoke the parent class constructor method and passed in “scene1” as an alias to label our scene1.js scene. So if we have multiple scenes, we can start another scene by calling the alias of a scene.

3. There’re some methods Phaser.Scene class gives us, and we will make use of them to load and display our sprites and other assets.

4. The first method preload() {} will load your game assets such as images, audio files, movie files so they become quickly accessible when the game starts. So you don’t have to stare at the screen and wait for the character/background/other objects to finish loading. This method is called once when the game starts.

5. We can load images and audio files this way: this.load.image(‘alias_for_the _image’, ‘relative_path_to_the_image’); this.load.audio(‘alias_for_the_audio’, ‘relative_path_to_the_audio’). The methods take in 2 arguments, where the first argument is an alias you can name your images/audio/background, (so you can reference them later on) and the second argument is where the file is located. (In our case, it should be something like ‘assets/pokemon.png’, where assets is the folder we created in the File Structure above.

6. Next we call the create() {} method to actually display our game assets into the screen. With the method this.add.sprite(x_coord, y_coord, ‘alias_for_the_image”) we can easily place a sprite into the scene at the selected x, y coordinates. Do keep in mind that in Phaser, the upper left corner is 0, 0. Coordinate x will increase as you move towards the right, and coordinate y will increase as you move towards down.

7. We can set a sprite or background to a local variable like so: let bg = this.add.sprite(300, 300, ‘assets/background.png’); And there’re additional methods/attributes we can call up on the bg variable. Such as bg.setScale(scale_numberK), bg.setPosition(x_coord, y_coord), bg.x = new_x_coord, bg.y = new_y_coord. bg.flipX = true, bg.flipY = true to flip the sprites left/right, or up/down. Or we can declare it like so: this.bg = this.add.sprite() so we can access the variable in the other methods.

8. The way we load an audio is by using the method: this.sound.add(‘alias_for_the_audio’).play(); Do keep in mind the audio won’t automatically start playing due to browser conventions and user experience. You will have to move your mouse pointer or press a button while on that page in order for the audio to play.

9. We will add this line: this.cursors = this.input.keyboard.createCursorKeys(); to make sure we can call the cursors variable outside of the create() method and to enable sprite movement in our update() method.

10. After the game assets are displayed onto the screen, the final method update() will be called up to 60 times per second. This is the method where the game listens for user input, mouse clicks, and any other factors that the game needs to constantly know the state of.

11. So in order for the game to listen to keyboard directional press, we can add this line: if (this.cursors.right.isDown) {this.pikachu.flipX = false; this.pikachu.x += 2; } in our update() {} method. This line is a conditional statement where we test if our right directional key is pressed, if it is, we move our sprite to the right by 2 pixels (by updating the x attribute of the pikachu variable.

Finally in our game.js file, we just need to create a dictionary with the game configs and a new Phase game instance.

// Create a config file for the game

const config = {type: Phaser.AUTO, height: 360, width: 640, scene: [Scene1] };

// Create a game

const game = new Phaser.Game(config);

Here we are creating a game config and passing in the height, width in pixels, the scene key takes in an array of Scene objects, but in our case, we only have 1 Scene, which is the Scene1 class. As we create more scenes, we can add it to the scene array. Finally we create the Phaser game instance and pass in the config dictionary as the argument.

At this point you can navigate to the HTML file and open with Live Server. If you move your character sprite, the background music should start playing.

Have fun!