Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 25

How to do it...

1. To begin with, we will implement the Enemy object, which will be responsible for

creating and drawing enemies to the canvas. We will also be updating the enemy's
position and performing collision detection.
function Enemy() {

this.velocity = 30;

this.InitEnemy = function(texture, x, y, z, frameCount,
frameRate) {
this.InitAnimationManager(texture, x, y, z, frameCount,
frameRate);

return this;
}

this.DisposeEnemy = function() {
this.DisposeAnimationManager();
}

this.Update = function(deltaTime, context, deltaX, deltaY) {
this.x -= this.velocity * deltaTime;

if(this.BoundingBox().Intersects(player.BoundingBox())) {
this.DisposeEnemy();
}
}
}

Enemy.prototype = new AnimationManager;

2. The Enemy object makes use of a function known as Intersects , which determines

if two rectangles have collided. In order to utilize this function, we will need to
implement a new object known as Rectangle .
function Rectangle() {
this.left = 0;
this.top = 0;
this.width = 0;
this.height = 0;

this.InitRectangle = function(left, top, width, height) {
this.left = left;
this.top = top;
this.width = width;
this.height = height;