SSJX.CO.UK
Browser Games | Cybiko | Amiga | Applications | Windows Games | Python | Guides | Site Map

HTML5 Canvas Example - Bouncing Blocks

This expands on the previous guide by using an Array to hold the position of multiple blocks!

The Web Page

Below is a simple page, the most important parts are:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="blocks.js"></script>
</head>
<body onload="init();">
<canvas id="canvas" width="480" height="480">Canvas tag not supported..</canvas>
</body>
</html>

The above should be copied and saved as 'blocks.htm'.

The Javascript Program

Now we have our page, we need to add a block and move it! The code parts should be saved in a file called 'blocks.js'. Here's how it works:

This is just boiler plate stuff, we put the browser into strict mode, this is better for tracking errors and preventing bugs from entering our code. Always use it!

We then create variables that will be used to later manipulate our canvas and our block image. The variable 'ctx' hold the Canvas 'context', this points to the Canvas methods and properties. The last line will later hold the position of 3 blocks (0,1 and 2).

"use strict";

var ctx;
var canvas;
var img=new Image();
	 	  
var pos=new Array(3);

The init() function fills in the canvas details. The for loop allows us to use an associative array (which will hold the blocks x,y and direction) for each block. The 2 'if' lines randomly pick which direction the blocks should move in.

Once the image has loaded, the update() function is called 25 times a second to update our block.

Note : You will to change the image path if your image is in a different location. If you need a block image, right click on this and save : block.gif

function init()
{
	canvas=document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	
	for(var i=0;i<pos.length;i++)
	{
		pos[i]={x:0, y:0, xdir:2, ydir:2};
		
		if ((Math.random()*10)>5){pos[i].xdir=-2;}
		if ((Math.random()*10)>5){pos[i].ydir=-2;}
		
		pos[i].x=Math.floor(Math.random()*(canvas.width-32));
		pos[i].y=Math.floor(Math.random()*(canvas.height-32));
	}
	
	
	img.onload= function(){
		setInterval(update, 1000/25);
	}
	
	img.src = 'gfx/block.gif';	
}

The update() function simply calls the move and draw functions...

function update()
{
	move();
	draw();
}

The move() function updates each block position, if a block touches or crosses one of the edges then the direction is flipped so that it moves in the opposite direction.

Using pos.length means that if we change the 3 at the top of the program to a 10 for example, we don't need to change the code as it always returns the current array length.

function move()
{
	for(var i=0;i<pos.length;i++)
	{
		pos[i].x+=pos[i].xdir;
		pos[i].y+=pos[i].ydir;
		
		if (pos[i].x<=0 || (pos[i].x+32)>canvas.width){pos[i].xdir*=-1;}
		if (pos[i].y<=0 || (pos[i].y+32)>canvas.height){pos[i].ydir*=-1;}
	}
}

The draw() function clears the canvas and draws each of our blocks!

	ctx.fillStyle = "white";
	ctx.fillRect(0,0,canvas.width,canvas.height);
	
	for(var i=0;i<pos.length;i++)
	{	
		ctx.drawImage(img,pos[i].x,pos[i].y);
	}

Finally

All being well, you should end up with something like this:

This requires a browser that supports HTML5 / Canvas such as Mozilla Firefox 11, Apple Safari 5, Opera 11 or Google Chrome

12/05/2012

Support this site : Visit Play-Asia for games and accessories for new and classic games consoles!