FLOSS Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Learn JavaScript with Phaser

Game Mechanic: Adding More Levels

 To allow our game to be playable more than one screen and keep the player coming back for more we can add levels get harder and harder.

Here we will add the ability to use more than one level layout and have complete control over where we place our enemies, platforms and rewards (coins). We will do this in two ways. Firstly we will create separate functions to load those elements, and then we'll explore a way to load in platforms and coins to collelct from data objects in the json format.


Check the Code: what we need to know and do

There is some background knowledge in this book that will be useful for us in getting this mechanic to work;

The code for a minimal example of the Adding More Levels game mechanic is shown here - https://game-mechanic-more-levels.glitch.me/

Going over the code:

Note these variables at the start of our code that are located here as they are needed by more than one function;

var player;
var platforms;
var coins;
var wlevel = 1;
var leveldata;

 Next we should create an init() function

playState.init = function (wlevel) {
    wlevel = wlevel;

This wlevel variable keeps a track of what level we are on. It is set to one to start off with.

Then create some data in the json style format. We could have these in external files but we'll keep them in our game.js file to reduce the complexity of this example. All we need to know right now is we are using this approach to store the data for where our coins and platforms are. The json format is explained in more detail here https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

We can have a look at our entry for level one below.

    var level1 = {"platforms":[{"image":"ground","x":0,"y":325},{"image":"grass:4x1","x":150,"y":240},{"image":"grass:4x1","x":250,"y":160}],

This contains two main parts, one for platforms and one for coins. Within those parts there is an entry for the image name (from preload), and where it will appear on the screen.There is one for each level we want.

When generating the game area in create we have added a two loops to loop through  each of lists of sprites, add them to the screen and add them to the relavant group. Here is the example for the platforms, but the one for the coins is similar.

    for (var i = 0; i < leveldata.platforms.length; i++) {
        var platform = platforms.create(leveldata.platforms[i].x, leveldata.platforms[i].y, leveldata.platforms[i].image);
        platform.body.immovable = true;

Then when the play is happening. We then need to check if there are any coins left and if there aren't then increase our level by one. There is a check coins function that we created in Adding a Reward that we can add to.

    if (count_alive === 0 && wlevel < 3) {
        wlevel = wlevel + 1
        game.state.start("play", true, false, wlevel);
    } else if (count_alive === 0 && wlevel === 3) {
        //normally game over but loop back here to start
        wlevel = 1
        game.state.start("play", true, false, wlevel);

We also have an option here to return to level one if we have played out all the levels, in this example we have three levels. You might want to change that to create a game over state.

That's it. We hope you enjoy adding this game dynamic to your game to jump on enemies.


There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.