O'Reilly logo

Instant HTML5 2D Platformer by Aidan Temple

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required