Ch026 - Game Space: Adding Level/s

Game Space: Adding Level/s

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 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 collect from data objects in the json format.

Check our 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
• Have a good grip of how all our code fits together - see Understanding our Game Structure

Going over the code:

The code for a minimal example of the code for adding levels in a simple way here- https://jamm-labs.github.io/ggcp/gamespace-more-levels-simple/js/game.js

Note this global variable at the start of our code outside of any particular function. It is located here as it needs to be used by more than one function;

 var currentLevel = 1;

This currentLevel variable keeps a track of what level we are on. It is set to 1 to start off with. Now in the create function - find the section where you design your levels using grids. Copy the formatting of levels one to three, to create a new level4 variable. This will look like the code below.

    var level4 = [
        "                 ",
        "                 ",
        "                 ",
        "                 ",
        "                 ",
        "                 ",
        "                 ",
        "                 ",
        "                 ",
        "                 ",
        "                o",
        "xxxxxxxxxxxxxxxxx"
    ];

Next we also need to add another option to the section where the code finds out what level we are on and then sends that level to the loadLevel function to make the coins, platforms and enemies appear on the screen. Add this code to that section.

  } else if (currentLevel === 4) {
    loadLevel(level4);
  }

We can keep adding more levels and using this way of designing them to add challenge to our game.

Having more control - Adding our different kinds of coins / enemies / platforms

When we use the grid layout in this way there are limits in the way we use it. For example if we want to create a larger enemy than 32 pixels wide or high then we won’t be able to do it well using this grid.

We have some options for how to overcome this limit. One way is to get rid of this grid completely and to design our levels from scratch, another is to keep the grid but also to add in our own elements to it.

Let’s take the example of adding our own larger, or moving enemy. We can follow instructions for how to create one in this chapter - Adding a moving enemy.

In short we add 4 lines to our create function. If we are using our Grid Game Template, this has the side effect of making that moving enemy appear in the same place on every level. So to avoid that happening we will add the same code but we will add it only to level 1 by placing it in the following location.

    if (!currentLevel || currentLevel === 1) {
      loadLevel(level1);
      // add extra code for just level one here

      var enemy1 = game.add.sprite(370, 320, "enemy");
      enemies.add(enemy1);
      var tween1 = game.add.tween(enemy1);
      tween1.to({x:170, y: 320}, 2000, null, true, 0,-1,true);

We can see here that this will only appear on the first level.

We can now add our own moving enemies, or special power ups and custom size platforms, coins or hazards for each level.Have fun with this!

Other ideas to extend this mechanic

Other ideas to extend this mechanic could include

• Adding a Game Over state - see Understanding our Game Structure
• Loading platform and coin data more efficiently using Json - see Add Level Data with Json

That’s it. We hope you enjoy adding this game element to your game.