Ch027 - Game Space: Keys and Doors

Game Space: Keys and Doors

The game mechanic of collecting keys to be able to open doors to enter other spaces is well used in platform games to increase a sense of adventure. Let’s look at one way to do this. We draw on the code of a similar tutorial here by Belen Albeza.

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 More levels - Game Mechanic: Adding Levels

Going over the code:

The code for a minimal example of the Keys and Doors game mechanic is shown here - https://jamm-labs.github.io/ggcp/key-and-doors-grid/js/game.js

Make sure you have or add these variables at the start of our code that are located outside of any one function as they are needed by more than one function.

  var hasKey = false;
  var key;
  var door;

In the playState.preload function we will need to load some images for our keys and doors. Here are two lines which you can copy and use while testing. You can replace these images with your own.

  game.load.image("key", "https://cdn.glitch.com/5d318c12-590d-47a1-b471-92a5dc0aae9d%2Fkey.png");
  game.load.spritesheet("door2, "https://cdn.glitch.com/5d318c12-590d-47a1-b471-92a5dc0aae9d%2Fdoor.png", 42, 66);

Then we will create a key and door for our first level. Add the following code to our if statement in the playState.create function which controls which level is loaded.

  if (!currentLevel || currentLevel === 1) {
    loadLevel(level1);
    // add extra code for just level one here
    key = game.add.sprite(100,25,"key");
    door = game.add.sprite(20,260,"door");
    door.animations.add("open", [1, 2], 8); // 8fps

Then when the play is happening. We want to set up overlap conditions in our ****playState.update function for player and keys and doors.

  game.physics.arcade.overlap(player, key, hitKeys);
  game.physics.arcade.overlap(player, door, hitDoors);

We then create new functions mentioned in these overlap statements. Create these functions after your update function in your code.

In hitKeys we want to kill off the key and set our hasKey variable to true, ready to open the door.

var hitKeys = function (player, key) {
    key.kill();
    hasKey = true;
};

For the hitDoor function we need to check to see if the player has already picked up the key, as we don’t want anything to happen if that is not the case, or if they haven’t collected all the coins yet too.

var hitDoors = function (player, door) {
    if (hasKey === true && coins.total === 0){
      door.animations.play("open");
      hasKey = false;
      player.kill();
      game.time.events.add(1000, nextLevel, this);
    }
};

If the player does have the key then we want to play the animation of the door opening, then reset the value of hasKey as we don’t want that to continue to the next level, make the player disappear, and then call the next level function after one second so that we get to see the door opening.

We also need to comment out the code which would allow the player to progress to the next level if they have just collected all the coins.

    // MAKE SURE TO COMMENT OUT OR REMOVE THE FOLLOWING CODE
    //if the player has collected all the coins move them on to the next level
    // if (coins.total === 0) {
    //     nextLevel();
    // }

That’s it. We hope you enjoy adding this game space element to your game to allow the use of keys and doors to encourage exploration.