HTML and CSS Reference
In-Depth Information
Listing 18-10:
The bullet sprite
Q.Bullet = Q.Sprite.extend({
init: function(props) {
this._super(_(props).extend({ w:4, h:2,
gravity:0, collisionMask:3 }));
this.add('2d')
this.collisionPoints();
this.bind('hit.tile',this,'remove');
this.bind('hit.sprite',this,'damage');
},
remove: function() {
this.destroy();
},
damage: function(obj) {
obj.trigger('damage',10);
this.destroy();
},
draw: function(ctx) {
var p = this.p;
ctx.fillStyle = "#000";
ctx.fillRect(p.x,p.y,p.w,p.h);
}
});
There isn't much to the bullet class. It sets the
gravity
property to 0 to prevent gravity from affecting the
bullet. It also destroys itself when it runs into a tile and damages any sprite it runs into. Finally, it overrides the
draw
method to just draw a small black rectangle to represent the bullet.
Again the
type
and
collisionMask
come into play so that the bullet collides only with sprites and en-
emies.
Creating the Player
Last up is the player. He has some added complexity because he needs to move, jump, and fire bullets.
One issue that always needs some attention is the issue of jumping. Characters should jump only when they
are standing on solid ground, so the player needs to keep track of where that is. One way to do this is track the
last time that a collision with the
bottom
point occurred and allow jumps only when the last bottom collision
was in the past few frames. This is the technique used here.
To sync up the bullet firing animation with when a bullet is actually launched, the player can listen for events
indicating that the bullet animation has finished before actually adding the bullet sprite on the stage.
Add the code from
Listing 18-11
to finish the platformer and add in the player sprite.
Listing 18-11:
The player
