Ch014 - Game Mechanic: Extra Lives

Game Mechanic: Extra Lives

To allow our game levels to be more challenging but still give our game player a chance we can give extra lives.

What we need to know and what we will 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
• Working with Levels - see Adding More Levels
• Understand spritesheet images - see Adding an Animated Character

You can use the following stages of this tutorial as a check list;

• Create an animated sprite which displays how many lives we have left in Piskel or similar
• Create new variables in our list of global variables called lives and livesSprite
• Add code to our create function to check how many lives we have and display the right
• Add code to our hitHazard function to take off a life if the player is zapped and restart the game with one less life but at the same level

Create an image for your Lives Indicator and import it to your project

You can use a pixel art tools like Piskel or something similar to create an image with a single frame for each of your lives. And example is shown below.

You should then export this from Piskel as a PNG spritesheet and upload it to the assets folder of your project on glitch.com

There is help on how to do these stages in the tutorial called Add Animation to your Characters.

Going over the code:

The code for a minimal example of the code for adding levels extra lives for your player is here - https://jamm-labs.github.io/ggcp/sgte-extra-lives/game.js

Add a new global variable at the start of our code. It is located outside any particular function as they are needed by more than one of our functions;

var lives = 3;

The lives variable keeps a track of how many lives we have left.

Now add this line to load in an image as a spritesheet which will change when you lose a life into preload function.

  game.load.spritesheet("lives", "https://cdn.glitch.com/df3d4bd4-a145-4f00-bfad-97b20729e2ee%2Fanimated%20heart.png",48,12);

You may want to create your own image which does this.

Next, in the create function add the following lines which add our lives image to the screen in the top left and changes it depending on how many lives are left.

  livesSprite = game.add.sprite(20, 20, "lives");

  if (lives === 3){
    livesSprite.animations.frame = 0;
  }
  else if (lives === 2){
    livesSprite.animations.frame = 1;
  }
  else if (lives === 1){
    livesSprite.animations.frame = 2;
  }

Then when the play is happening and the player hits a Hazard we need to take off a life and restart the game with one less life but at the same level. We already have a function which gets called when our player overlaps with a hazard called hitHazard so we can add the following code to it.

var hitHazard = function (player, enemy) {
  splatNoise.play();
  if (lives > 1) {
    lives--;
    game.state.start("play", true, false, lives, currentLevel);
  }
  else {
    lives = 3;
    currentLevel = 1;
    game.state.start("play", true, false, lives, currentLevel);
  }
};

We have a conditional statement which runs when the number of lives is more than 1. In this case, when we start our play state there is the option to pass the value of lives and the currentLevel along, this allows us to not start from level one.

When the lives variable reaches 1 then you are on your last life. Then when you hit a hazard, the second condition runs which resets the values of lives to three again and resets the currentLevel variable to be 1. This has the effect of starting the game again at the beginning with three lives.

Other ideas to extend this mechanic

Other ideas to extend this mechanic could include;

• Adding a Game Over state - see Adding Game States