HTML5 Game Development: Adding Health / Score to Your Game
  • Saturday, 3rd Mar, 2012

HTML5 Game Development: Adding Health / Score to Your Game

Welcome to the 3rd tutorial of ‘HTML5 Canvas Game Development’! We will continue using the previous coding in this tutorial, and you will learn to add health or score of HUD(heads-up display) to your HTML5 Canvas game – “bubble breaker”.

Note: This tutorial required you to use the code from previous tutorial. If you haven’t already, be sure to read the previous articles of this series first!

View Demo

Define A Variable For Health

Adding health to your game is extremely easy! What you have to do is to define a variable to hold the health status.

var health = 10;

As you can seen above, a value of 10 has been assigned to health, which means that, player has been given 10 times of chances to play the game.

Setup HUD Display & Game Over Display Function

Let’s setup the health display function to shows the health value on the game:

function healthDisplay() {
			//health
			ctx.font = "bold 14px Arial";
			ctx.fillText("Life Remaining:"+health, 80, 20);
		}

We have use the ‘font‘ – Canvas API to define the font style, size and type-family of the health value, then display it on top of the game using ‘fillText‘ method.

Note: HUD (heads-up display) is the method by which information is visually relayed to the player as part of a game’s user interface.

Next, setup a function for game over display:

function gameOverDisplay() {
			ctx.fillStyle = "rgba(0, 0, 255, 1)";
			ctx.font = "bold 24px Arial";
			ctx.fillText("Game Over", 80, 100);
		}

This time, we use ‘fillStyle‘ to change the color of text of game over to blue.

Health Counter

Next, we need to write a script that tells the browser to deduct value of health, if player fail to break bubbles. Let’s do some modification on the ‘runGame‘ function:

if (bubble[i] <= canvas.height - 220) {
							bubble[i] = 250;
							health-=1; // health variable
						}

This condition is originally tells the browser to generate new bubble at bottom, if the previous bubble has been gone out from canvas. So, we can also ask browser to deduct value of health here, if player miss to break bubbles. In order trigger the function of ‘healthDisplay’, we are required add extra line of code, after ‘ctx.fill()‘:

healthDisplay();//update health every time

Save your document, preview it on supported browser, you should able to see the health is display on your game.
Health Display

Define Game Over Condition

Lastly, we need game over condition for the game. Let’s add-in extra lines of code as shown below inside the ‘runGame’ function, and place it before for-loop of bubble:

//health checking
			if(health <= 0) {
					gameOverDisplay();
			} else {
					// create a path for each bubble goes here

This condition used to check is the value of health is below or equals to 0. If yes, a game over message will be displayed on the game.

Download Source

You can download the source in the demo page.

View Demo