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
O'Reilly logo

Creating a Monster Class

Creating a monster is similar to creating a player. In fact, we are going to use the same basic class code but change its name and namespace. Create a new file called zombie.js in the entities folder.

Now, copy the following code into the monster class:

1    ig.module(
2        'game.entities.zombie'
3    )
4    .requires(
5        'impact.entity'
6    )
7    .defines(function(){
8        EntityZombie = ig.Entity.extend({
10        });
11    });

As you can see, we simply changed the entity name and class name, but everything else is the same as the code we used to start the player class. Now we are ready to add our monster’s animation and set its initial properties:

animSheet: new ig.AnimationSheet( 'media/zombie.png', 16, 16 ),
size: {x: 8, y:14},
offset: {x: 4, y: 2},
maxVel: {x: 100, y: 100},
flip: false,

Now we need to set up the animations just like we did for the player. This is a simple monster, so there are only a few sprites representing its animation. Let’s create a new init() method with the following code:

init: function( x, y, settings ) {
    this.parent( x, y, settings );
    this.addAnim('walk', .07, [0,1,2,3,4,5]);

With our default animation in place, we can start adding instances of the monster to test the level. Let’s switch over to Weltmeister, select the entities layer, and then add a monster by clicking into the layer and pressing the space bar, just as we did when adding the player. You can then click on the map to add the monster where you want it.

Select Zombie from the drop-down entity list.

Figure 4-15. Select Zombie from the drop-down entity list.

Feel free to add a few of them, as shown in Figure 4-16.

I’ve added two zombies to the level.

Figure 4-16. I’ve added two zombies to the level.

Once you have done this, refresh the game in your browser and you should see your new monsters. We haven’t added any movement logic yet, so they don’t do much right now. Let’s add some basic code to make them walk back and forth, but be smart enough not to fall off ledges. We’ll need to create an update function that will handle the basic movement logic or AI (Artificial Intelligence) for our monster:

update: function() {
    // near an edge? return!
    if( !
          this.pos.x + (this.flip ? +4 : this.size.x −4),
               this.pos.y + this.size.y+1
    ) {
          this.flip = !this.flip;
    var xdir = this.flip ? −1 : 1;
    this.vel.x = this.speed * xdir;
    this.currentAnim.flip.x = this.flip;

This function tests to see if the monster hits anything in the collision map. If it does, we toggle the value of the class flip property. After testing, the direction and velocity are updated before this.parent() is called. We will also need to define the monster’s friction and speed. You can add that toward the top of the class just under where we define the flip property:

friction: {x: 150, y: 0},
speed: 14,

Refresh the game to take a look at it in action. You will see the monster instances moving around, and when they hit the edge of a ledge, they flip and go the other way.

We want to make sure our zombies flip direction once they hit a wall or the end of a platform.

Figure 4-17. We want to make sure our zombies flip direction once they hit a wall or the end of a platform.

We just need to add a few more lines of code to clean this up. Add the following block of code to the end of your defines() function:

handleMovementTrace: function( res ) {
    this.parent( res );
    // collision with a wall? return!
    if( res.collision.x ) {
          this.flip = !this.flip;

This helps make sure that if a monster runs into a wall, that it also turns around. Collisions with walls and the collision map are handled through the handleMovementTrace function. Now we have covered all our bases and made sure our zombies will not fall off ledges or platforms, but we still have one issue. There is no collision detection between the monster and the player.

The player simply passes through zombies without collision detection.

Figure 4-18. The player simply passes through zombies without collision detection.

Before we get into adding more code to the monster, we need to talk a little bit about entity-based collision detection in Impact.

So far, we’ve handled simple interactions with walls and platforms manually. However, Impact has built-in collision detection that we can use for interaction between our entities. That is, we can focus on setting up collision relationships instead of creating all that collision code from scratch. Let’s look a little closer at how we can use Impact to do this work for us.

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