A simple HTML5 Game tutorial – Part 4

A simple game create using HTML's canvas and JavaScript Screenshot of HTML5 game[/captifon]

In the previous parts  (1, 2 and 3) we’ve developed a basic game which allows a player to move a target around the screen and shot some bad guys. In this post we’ll add labels to show the shots fired, hits and accuracy ratio.  This will give the player a reason for playing e.g. improve your statistics by shooting all of the bad guys with the minimum amount of shots.  With this in place we can start to think about adding levels and keeping a high-score table.

To get this far we have two objects which represent the ‘bad guys’ and the ‘explosions’.  The functions that controls the main loop handles the interactions between these objects.  We already know when a shot hits a ‘bad guy’, thus, we can simply modify the code to keep a count of the hits.

Let’s remind ourselves of how a hit is detected.  When the player clicks an explosion object is created.  Each explosion object is drawn on the canvas.  Additionally, the explosion’s ‘checkhits’ method is called.  This contains the following code:

	Explosion.prototype.checkHits = function(things) {

	    if(this.drawing === false) {
		return 0;

	    var centreX = (this.x - 100)  + (this.width / 2),
		centreY = (this.y - 90) + (this.height / 2),
		hits = 0;

	    for(i = 0; i < things.length; i++) {
                if(centreX > things[i].getX() &&
		    centreX < things[i].getX() + things[i].getWidth() &&
 		    centreY > things[i].getY() &&
		    centreY < things[i].getY() + things[i].getHeight() &&
		    things[i].getHit() === false) {




	     return hits;

As described in my previous post, the above function checks to see if any of the ‘bad guys’ are within the explosion zone. What we also did when writing this function was to keep a count of the hit made for a given explosion.  This value is returned to the calling interface which is the ‘start’ function.  Therefore, we need to alter the ‘start’ function to store and use this value.  The first step is to declare three variables e.g.

var shots = 0, hits = 0, accuracy = 0;

We can then modify the ‘start’ function to store the shots and hit count and calculate the ratio:

	function start() {


	    for(i = 0; i < sprites.length; i++) {
		sprites[i].draw(ctx, sprite).move();

	    for(i =0; i < explosions.length; i++) {
 		explosions[i].draw(ctx, explosion);
 		hits += explosions[i].checkHits(sprites);

 	    if(shots > 0) {
		accuracy = Math.round((hits / shots) * 100);

	    ctx.fillStyle = "#cfcfcf";
	    ctx.font = "bold 16pt Arial";
	    ctx.fillText("Shots: " + shots + " Hits: " + hits +
		    " Accuracy: " + accuracy + "%", 10, 30);

	    //Draw target
	    ctx.drawImage(target, 0,0, 512, 512,
		targetX - 50, targetY - 50,
		100, 100);



And, finally we need to increment the shots counter. We can do this by modifying the fire function:

	function fire() {
	    explosions.push(new Explosion(targetX, targetY, new Audio('bang.wav')));

With these small changes we have a scoreboard showing the shots, hits and accuracy – albeit with rather drab Ux.

Shot, hits and accuracy ratio

Putting all the above together achieves our final objective which can be viewed here.

That concludes this tutorial series. I’d love to hear your ideas on how this can be improved. Now the tutorial is complete, a cleaned up version of the code has been published to my github account.


One thought on “A simple HTML5 Game tutorial – Part 4

  1. Hi there, thanks for these posts they are really great. I’m trying to use my own version of the game on a site where the canvas is relatively positioned. When I do this the ‘cross hair’ curser disappears. I can’t figure out how I can adjust the cursor calculations to allow for the canvas being relative. Any ideas? Thank’s in advance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s