O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Weapons

Right now, our player is defenseless. As soon as he hits a monster, he dies, and there is no way for the player to kill a monster. Well, that is about to change. One way to add a weapon is to create a new entity class. Weltmeister will then offer it as an option when placing entities on the map—convenient if you want to place weapons the player can pick up during the game. However, if your player will have access to the weapon throughout the game, you can keep Weltmeister’s menu options simple by creating an inner class within the player.js file.

Let’s find the player class’s closing blocks around line 59. Between the two closing block tags is where we will put our inner class:

EntityBullet = ig.Entity.extend({

});

Now you should have your bullet entity just before the end of the player.js class as shown in Figure 4-20.

Add the EntityBullet class just before the end of the player module.

Figure 4-20. Add the EntityBullet class just before the end of the player module.

Now we are ready to customize our player’s weapon.

As you can see, our EntityBullet is just like any other entity you have created. It extends ig.Entity, which means it has all the same inherited properties and methods as our player and monster. Basically, we are going to spawn a new bullet every time the player presses the fire button and, based on which way the player is facing, the bullet entity will move in that direction. When the bullet hits a wall or monster, it will remove itself and, in the case of a monster, apply damage. Let’s start by adding a few properties to our bullet:

size: {x: 5, y: 3},
animSheet: new ig.AnimationSheet( 'media/bullet.png', 5, 3 ),
maxVel: {x: 200, y: 0},

This will set up our bullet’s size, graphic, and maximum velocity. It’s important to note that our bullets don’t have y velocity since they only move horizontally. Also, we need to make sure our bullet can move faster than the player. We don’t want to fire our gun and run into or beyond our bullet as it flies through the air. Next, we will need to set up some collision information for the bullet:

type: ig.Entity.TYPE.NONE,
checkAgainst: ig.Entity.TYPE.B,
collides: ig.Entity.COLLIDES.PASSIVE,

As you can see, we are going to have our bullet test for TYPE.B entities, and its collides property is set to passive so it doesn’t displace entities it collides with. Now we can add our init() method:

init: function( x, y, settings ) {
    this.parent( x + (settings.flip ? −4 : 8) , y+8, settings );
    this.vel.x = this.accel.x = (settings.flip ? -this.maxVel.x : this.maxVel.x);
    this.addAnim( 'idle', 0.2, [0] );
},

Here we are taking the flip value that will be passed into the EntityBullet via the optional settings object and applying an offset to the x,y values we pass to the parent method. This ensures that the bullet starts in the correct position and appears to be fired from the gun. Next, we set the velocity and acceleration x value to our maximum velocity x value. If the player is facing left, make this negative. This forces the bullet to fire at its maximum speed instead of slowly accelerating toward its maximum velocity.

Now we need to test for our collisions. Let’s start by reacting any time the bullet hits something in the collision layer:

handleMovementTrace: function( res ) {
    this.parent( res );
    if( res.collision.x || res.collision.y ){
        this.kill();
    }
},

The handleMovementTrace() gets called while an entity is moving. This method is associated with the collision map, so we can detect when an entity hits a wall. We check the res object parameter if a collision happens on the x or y values.

check: function( other ) {
    other.receiveDamage( 3, this );
    this.kill();
}

All we need to do now is add some code to our player in order to fire the bullets.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required