Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 32

Creating a graphical user interface (Must
know)

Finally, no game would be complete without a user interface to display the player's score and
health. In order to do this we will need to adjust the game frameworks draw method to allow
text to be drawn to the canvas as well as introduction a number of variables which monitor
and update the player's score and health.

How to do it...

1. To begin with, we will introduce two new variables that hold the player's score and

health at the top of the Main object.
var score = 0;
var health = 100;

2. Next, we will draw the user interface elements to the screen, these elements are

used to represent the player's score and health. Inside of the object manager 's Draw
function place the following code before the drawImage function call:
this.context.font = "30px Arial";
this.context.fillText("Score: " + score, 15, 50);
this.context.fillText("Health: " + health, 625, 50);

3. Inside of the Enemy object's Update function, we will decrement the player's health

each time they collide with an enemy. To do this update the collision detection check
with the following:
if(this.BoundingBox().Intersects(player.BoundingBox())) {
this.DisposeEnemy();
health -= 14;
}

4. We will also need to increase the player's score each time they collect a pickup.

Therefore in order to do this we will need to update the collision detection check
within the Pickup object with the following:
if(this.BoundingBox().Intersects(player.BoundingBox())) {
this.DisposePickup();
effect.play();
score++;
}