HTML and CSS Reference
In-Depth Information
Colliding Enemies with the Player
To make it a fair fight, enemies need to have the ability to take down the player as well when they make contact.
Adding essentially the same chunk of code to the
Enemy step
method allows the
Enemy
to take out the
player. Modify the step method to read as follows:
Enemy.prototype.step = function(dt) {
this.t += dt;
this.vx = this.A + this.B * Math.sin(this.C * this.t + this.D);
this.vy = this.E + this.F * Math.sin(this.G * this.t + this.H);
this.x += this.vx * dt;
this.y += this.vy * dt;
var collision = this.board.collide(this,OBJECT_PLAYER);
if(collision) {
collision.hit(this.damage);
this.board.remove(this);
}
if(this.y > Game.height ||
this.x < -this.w ||
this.x > Game.width) {
this.board.remove(this);
}
}
This code is identical to the code added to the
PlayerMissile
object except that it calls
collide
with
an
OBJECT_PLAYER
object type.
After making those changes, fire up the game and let your player be taken out by one of the ships.
Making It Go Boom
So far the collisions have the correct effect; however, there's something to be said for a more dramatic effect
to liven things up. The
sprites.png
file has a nice explosion animation in there for just that reason. The
explosion image was generated using the explosion generator on
http://www.positech.co.uk/
.
Add the sprite definition to the top of
game.js
for the explosion:
var sprites = {
ship: { sx: 0, sy: 0, w: 37, h: 42, frames: 1 },
missile: { sx: 0, sy: 30, w: 2, h: 10, frames: 1 },
enemy_purple: { sx: 37, sy: 0, w: 42, h: 43, frames: 1 },
enemy_bee: { sx: 79, sy: 0, w: 37, h: 43, frames: 1 },
enemy_ship: { sx: 116, sy: 0, w: 42, h: 43, frames: 1 },
enemy_circle: { sx: 158, sy: 0, w: 32, h: 33, frames: 1 }
,
explosion: { sx: 0, sy: 64, w: 64, h: 64, frames: 12 }
};
Now add some
health
to the blueprint for a basic enemy:
