You are previewing Building HTML5 Games with ImpactJS.

Building HTML5 Games with ImpactJS

Cover of Building HTML5 Games with ImpactJS by Jesse Freeman Published by O'Reilly Media, Inc.
  1. Introducing HTML5 Game Development
  2. SPECIAL OFFER: Upgrade this ebook with O’Reilly
  3. A Note Regarding Supplemental Files
  4. Preface
    1. About This Book
    2. Who This Book Is For
    3. Who This Book Is Not For
    4. Conventions Used in This Book
    5. This Book’s Example Files
    6. Using Code Examples
    7. How To Use This Book
    8. Safari® Books Online
    9. How to Contact Us
    10. Acknowledgments
  5. 1. Introduction To Impact
    1. Why Use Impact?
    2. Setting Up a Local Environment
    3. Install WebStorm/PHPStorm
    4. Install Apache/PHP/MySQL
    5. Other Hosting Options
    6. Setting Up a New Impact Project
    7. Modules
    8. How Classes Work
    9. Core Classes
    10. How Inner Classes Work
    11. Level Editor
  6. 2. Working With Sprites
    1. Sprites and Sprite Sheets
    2. Scripting in Photoshop
    3. Working with Sprites in Photoshop
    4. Optimizing Sprites
  7. 3. Introduction To Game Design
    1. What is Game Design?
    2. Sample Game Design Document
      1. Gameplay
      2. Exploring a Map
      3. Combat
      4. Completing a Map
      5. Death
      6. Main Character
      7. Monsters
      8. Bosses
      9. Equipment
      10. Inventory
      11. Equipping Items
      12. Weapons and Armor
      13. Leveling Up
      14. Winning the Game
    3. Coming Up With Ideas
    4. Books to Read
  8. 4. Building A Game
    1. Creating Our First Level
    2. Saving/Loading Maps in Weltmeister
    3. CollisionMaps
    4. The Main Class
    5. Customizing the Main Class
    6. Key Binding
    7. Creating the Player Class
      1. Using Your Sprite Sheet
      2. Adding Simple Physics
      3. Defining Animation Sequences
    8. Creating a Monster Class
    9. Collision Detection
    10. type Property
    11. checkAgainst Property
    12. collides Property
    13. Health
    14. Weapons
    15. Firing the Weapon
    16. Add Multiple Weapons
    17. Killing Entities
    18. Respawning the Player
    19. Create Death Animations
    20. Adding Grenade Explosions
    21. Customizing the Camera
    22. Loading New Levels
  9. 5. Working With Text
    1. Creating Font Sprite Sheets
    2. Adding Text to Your Game
  10. 6. Working With Sound
    1. Adding Sounds
    2. Adding Music
    3. Mobile Browser Sound Compatibility Issues
  11. 7. Creating Game Screens and HUDs
    1. Extending Impact’s Game Class
    2. Creating a Start Screen
    3. Player Stats Screen
    4. Creating the Game Over Screen
    5. Adding In-Game HUD
    6. Game Rewards
    7. In-Game Analytics
  12. 8. Debugging Your Game
    1. Impact’s Debugger
    2. Publishing Your Game
    3. Baking Your Game
    4. Mobile Web Support
    5. Compiling for Native iOS
  13. 9. Wrapping Up
    1. References and Links
  14. About the Author
  15. SPECIAL OFFER: Upgrade this ebook with O’Reilly

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.

The best content for your career. Discover unlimited learning on demand for around $1/day.