• OPENING SCENE
• Introduction
• Jumping Right In
• Jumping Right In
• Choose your own Adventure
• Getting Started
• Building a World
• Adding Movement
• Create a Game Space
• Making Things Happen
• Adding a Reward
• Hazards and Enemies
• Adding Game States
• GAME MECHANICS
• Game Mechanic: Add a Countdown Timer
• Game Mechanic: Jumping on Enemies
• Game Mechanic: Player Health
• Game Mechanic: Longer Jumps if Holding Jump Down
• Game Mechanic: Smaller Sprite Collision Boxes
• Game Mechanic: Extending the Game Size
• Game Mechanic: Adding Levels
• Game Mechanic: Keys and Doors
• ADDING POLISH
• Polish: Animate Sprite when Zapped
• Polish: Scaling our Game and Sprites
• Polish: Screen Shake
• Polish: Add Soundtrack Music
• Polish: Explosions using Particles
• Appendix
• Summary of our approach to learning Game Making
• How we approach Coding
• Playful and Reflective Approaches

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;

• Adding Sprites in Groups - see Create a Game Space
• Working with Loops - see Adding a Reward

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}],
                 "coins":[{"image":"coin","x":0,"y":225},{"image":"coin","x":150,"y":200}]    

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.