Adding more scenes and interaction into our browser game

Previously we created a browser game using a Javascript library named Phaser. We loaded a background image, character sprites, some background music, and we were able to control our player sprite using our keyboard arrow keys. However there wasn’t any kind of game mechanics or interaction between anything. In this blog, we will expand on what we have so far and continue developing our game.

In our js folder within our main project folder, let’s create 2 more js files, named game_over.js and scene2.js. We will bring them into our index.html file by including them in our script tag like so:

Last time we only had 1 scene in our game. Let’s go ahead and create another scene like so:

The code we have here should be familiar, as last time we had almost the exact same code. Line 2 and 3 we created a constructor and called the super method. The “scene_1” string we passed in will serve as an alias for this scene. We will use this alias later on to go back and forth between scenes.

We need some way to transition between our scenes, such as character movement, some event triggers, or some lapse of time. In our update method(), from lines 38 to 41, we check if the x coordinate (that is, left and right horizontally) of our sprite reaches a certain point, if it is, then we stop our background music and start a new scene.

Next we will make some changes to our scene1.js file we created last time. We will rename it scene2.js and make the following changes:

In our scene2.js file, we again use the constructor to named our scene as “scene_2”. In our update() method, we check the position of our sprite, and if it reaches a certain x coordinate, we change the scene back to scene1.

In order to create some kind of interaction between our player sprite and the enemies sprites, we need to have physics attached to them and make them able to “collide” with each other, and when they do, we invoke a callback function to yet again change to a game over scene.

From lines 27 to 32, we added physics to each sprite, and from lines 59 to 63, we make the sprites able to have collision with each other. And finally the gameOver function is called when a collision occurs, that will take us to our game over scene.

Our game over scene is very simple, it will output a string onto the screen alerting the player the game is over.

Since we created 2 additional scenes, we need to add them to our config file, and specify the game physics. We can do it like so:

The order of the scene on line 11 matters, since whatever is positioned first will be displayed first. We also added a debugger to see exactly how our sprites collide with each other. A red rectangle will surround the sprites so you will know the boundaries of each sprite, and when the red rectangles touch each other, that’s when a collision happens.

If you launch the game with Live Server, this is what you should have:

The below steps are optional:

Creating your own customized background image —

For the background image, I used a tool called Tiled, which you can download at mapeditor.org, and the tileset Serene Village Revamped from itch.io. Link is at https://limezu.itch.io/serenevillagerevamped But you can definitely use whatever background image or tilesets you prefer.

Setting a world boundaries —

In a Phaser Scene, the upper left corner is coordinates 0, 0. And we have set up a width and height in our game.js config variable. In our update() method, we can check the x and y position of our character, if he/she reaches a certain point, we can reset it.

In our scene1.js, we can add the following code:

if (this.pikachu.x < 20) { this.pikachu.x = 20 }

else if (this.pikachu.y < 20) { this.pikachu.y = 20 }

else if (this.pikachu.y > 348) { this.pikachu.y = 348 }

Notice we didn’t check for the right edge of the screen, because we already have a method that checks for it, and then transitions our scene1 to scene2 if pikachu reaches the right edge. We can add this code to our scene2.js as well, just remember to omit the first line of code as we need a way for pikachu to go back to scene1.

That’s it for this blog, have fun!