Ch007 - Hazards and Enemies

Hazards and Enemies

We need things for our player to avoid to add some challenge to the game. In this chapter will we learn how to create static hazards and moving enemies. Because they are both official hazards that zap our player we will put them both in a group called hazards.

Adding an Animated Hazard

Let’s add a hazard into our game a location and let’s make it move. We will add a very simple flickering flame. It consists of two frames of animation. They alternate give the flickering effect. Here is an image of both frames, one besides the other.

To create an image like this you can use a tool like Piskel which we used in the first chapter Jumping Right In.

To make our image animated, we will add it as a spritesheet, and specify the width and height the frames, here 11 pixels wide and 27 high. And after that we can also load in a sound to play when we hit a hazard. Put this code in preload:

  game.load.spritesheet("hazard", "https://cdn.glitch.com/5d318c12-590d-47a1-b471-92a5dc0aae9d%2Ffire2.png", 11, 27);

Then add the hazard to the game. Again as with the coins in the previous chapter, we will create a group called hazards in case we want to add more later. Add the following code to create:

  hazards = game.add.group();
  hazards.enableBody = true;
  hazard1 = hazards.create(100, 250, 'hazard');
  hazard1.animations.add('flicker', [0, 1], 6, true);
  hazard1.animations.play('flicker');

The next stage is to make the player disappear when they touch this flickering flame hazard. This is done in a similar way to working with the coins but in reverse. Add the following line to update part of the code.

  game.physics.arcade.overlap(player, hazards, hitHazard);

We now need a hitHazard function to disappear our player if they hit a hazard. Take care to follow the same pattern and to add this after the takeCoins function.

  var hitHazard = function(player,hazard) {
    player.kill();
  };

This does give us win and lose conditions, so hey presto, we have a game. But either of those options mean we are stuck in a form of limbo, either alive with nothing to do, or you disappear leaving only the game world. You will have to refresh the page to progress. Clearly this is not ideal and we’ll deal with that in the next section.

Restarting our Game

We need something to happen when we hit a hazard / enemy or collect all the coins. To make things simple let’s just restart the game. To restart our game when we die we’re going to add a new function called restart() to our code.

  var restart = function () {
    game.state.start("play");
  };

This restarts the currently running game state (we talk more about this later) called ‘play’.
We now add a line of code to restart the game to our hitHazard() function. It should now read as follows.

  var hitHazard = function () {
    player.kill();
    restart();
  };

We now need to restart the game when we have collected all the coins. This is a little more complicated and involves creating a new function that goes through. To do this add the following lines to update:

  if (coins.total === 0){
    restart();
  }

This line keep checking to see if there are any coins left and if there aren’t then then it will restart the game. Be aware that this could cause a bug. If you don’t include any coins in your game, then it will just keep restarting.

Check your Code

You can check your code against this chapters code demo here - https:/game.js//glitch.com/edit/#!/add-hazards-chapter