Respawning the Player

Since the player dies as soon as he collides with an enemy, we should add some logic to respawn the player. The easiest way to do this is to save out the start position of the player when he gets created so we can restore him to the same position when he dies. Let’s add the following property to our PlayerEntity class:

startPosition: null,

Then, we can store the initial position of the player by adding the following to the init() method above the call to this.parent():

this.startPosition = {x:x,y:y};

What this does is save a generic object with the x,y position that gets passed into the constructor of our player class. Now, we just need to override the kill() method to this:

kill: function(){
    this.parent(); EntityPlayer, this.startPosition.x, this.startPosition.y );

So, what will happen is that when kill() gets called after the player collides with a monster, we call this.parent(), which will properly remove the player instance from the game. Then, we immediately spawn a new player at the saved startPosition. Right now, it is a little jarring, but you could easily add a delay and then respawn after displaying some message to the user.

Another really cool trick about this approach is that since we saved the initial x,y position of the player in the startPosition property, we could easily update this value if the player walks through a checkpoint. This means that we don’t need any complex logic to continually respawn the player throughout the level. All the logic is contained inside the player instance itself.

One thing you should pay special attention to is when a monster is on top of the respawn position. Since we don’t reset the level, there is a chance that we could lock up the game if the monster kills the player as soon as he respawns, as shown in Figure 4-25.

Right now, a monster on our respawn position will lock up the game.

Figure 4-25. Right now, a monster on our respawn position will lock up the game.

The same thing can happen if there are a lot of grenades bouncing around where the player respawns. Usually, games offer some sort of invincibility mode when the player restarts. Here is a quick example of how to do that. Start by adding the following two properties to our EntityPlayer class:

invincible: true,
invincibleDelay: 2,

This will allow us to tell if the player is invincible, and also for how long. Next, we will need to add the following method to handle toggling the invincibility:

makeInvincible: function(){
    this.invincible = true;

This will allow us to call makeInvincible() on the player at any time, and we can reset the invincibleTimer as well as toggle the invincible flag. Now we are going to have to override our receiveDamage() and draw() methods:

receiveDamage: function(amount, from){
    this.parent(amount, from);
draw: function(){
        this.currentAnim.alpha = * 1 ;

In the receiveDamage() method, we are using a guard clause to test if invincibility has been toggled and, if so, we just exit the method and don’t apply any damage. In the draw method, we also test for invincibility and, if it is activated, we are going to set the alpha value of the sprite to reflect how much longer they are invincible. We start at 0 and they will slowly fade into the game. Alpha in Impact is a value between 0 and 1. We can easily find a percentage of that value by dividing the invincibleTimer’s delta by the invincibleDelay. By multiplying it by 1, the total value of alpha, we get a percentage that we can use to make the player fade in.

Before we can test this, we need to do two more things. First, we need to add the following to our init() method:

this.invincibleTimer = new ig.Timer();

Next, we need to add the following code to our update() method just before our call to this.parent():

if( > this.invincibleDelay ) {
    this.invincible = false;
    this.currentAnim.alpha = 1;

This basically tests to see if our timer is greater than the delay we defined. Once that happens, we disable invincibility by setting invincible to false and forcing the alpha to be 1. If you refresh, you should now see the player fade in when he is created and after you respawn.

When a new player is spawned, he is temporarily invincible.

Figure 4-26. When a new player is spawned, he is temporarily invincible.

This should fix the issue we had before (when the player respawns on top of a monster or grenade) so that we don’t lock up the game. Also, because of the way this was set up, you can now call makeInvincible() at any time if you wanted to give the player a power-up or show that the player has taken damage without actually respawning him.

Get Building HTML5 Games with ImpactJS now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.