HTML and CSS Reference
Creating a graphical user interface (Must
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...
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;
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);
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:
health -= 14;
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: