Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 33

5. Once you have completed these inal steps, your game should look something
similar to the following screenshot:
How it works...
We begin by creating two variables that are responsible for holding the player's score and
their health.
The values of these variables are then drawn to the canvas through the use of string
concatenation and the HTML5's fillText function that outputs text, with no effects
applied to it, to the canvas.
Both of the score and health values are updated inside of either the Enemy or Pickup
Update functions. The score value is incremented by one each time the player collides
with a collectible object. Similarly the health value is decremented each time the player
collides with an enemy object. Each of these values is updated in real time and the player's
results are relected on the canvas.
Finally, we perform a check to see if the player has collided with a pickup, that is, a berry,
and if they have we play our sound effect and increment the score.