onlyWebPro .com - For Designers & Developers

Welcome to the 2nd tutorial of ‘HTML5 Canvas Game Development’! We will continue using the previous coding in this tutorial, and you will learn the technique of building a simple “bubble breaker” for PC users and touch devices users. If you haven’t already, be sure to read the previous articles of this series first!

View Demo

Defining Global Variables

Open your previous code and let’s start our tutorial on the global variable section:

var canvas;
var ctx;

//change to array
var canvasX = [];
var canvasY = [];

var mouseIsDown = 0;

//new addded
var bubble = [];
var len = 0;

As you can see above, we have change the ‘canvasX‘ and ‘canvasY‘ to array, to store the data of the x, y position of click on each bubble. Besides, we create another 2 new more variables to store the data of our bubble and the quantity of the bubble.

Initialization Function

function init() {
	canvas = document.getElementById("canvas");
	ctx = canvas.getContext("2d");
			

	canvas.addEventListener("mousedown",mouseDown, false);
	canvas.addEventListener("mousemove",mouseXY, false);
	canvas.addEventListener("touchstart", touchDown, false);
	canvas.addEventListener("touchmove", touchXY, true);
	canvas.addEventListener("touchend", touchUp, false);
		
	document.body.addEventListener("mouseup", mouseUp, false);
	document.body.addEventListener("touchcancel", touchUp, false);
			
	//Initially create bubble here
	for (i=0;i<5;i++) {
		//set the initial position for each bubble
		bubble[i] = 250;
	}
			
	runGame();
		
}

Let’s look at the init function. We have added a new lines of code into the function, which is creating 5 pieces of bubbles using for loop and then call a new function ‘runGame‘ to animate the bubbles for us. Since the game is in underwater scenery, so our bubble should goes up from bottom, so we have to set the bubble’s position to 250.

Mouse & Touch Detection Functions

Next, let’s do some modification of mouse and touch function. First of all let’s add the following line of code into the touchUp function.

len = e.targetTouches.length;

Second, please remove the following code in touchXY function:

canvasX = e.targetTouches[0].pageX - canvas.offsetLeft;
canvasY = e.targetTouches[0].pageY - canvas.offsetTop;
showPos();

Replace it with the new:

len = e.targetTouches.length;
for (i=0; i	canvasX[i] = e.targetTouches[i].pageX - canvas.offsetLeft;
	canvasY[i] = e.targetTouches[i].pageY - canvas.offsetTop;
}

This is to get the current touch position, when player touch on the device’s screen.

Lastly, do the same for the mouseXY function. Replace the old line of code with this:

canvasX[0] = e.pageX - canvas.offsetLeft;
canvasY[0] = e.pageY - canvas.offsetTop;
len = 1;

Bubble Animated Function

Ok, so far we have define the essential variables and creating the required functions, now it’s time to animate the bubbles.

function runGame() {
	ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
	ctx.clearRect(0,0, canvas.width, canvas.height);
	// create a path for each bubble
	for (i=0;i<5;i++) {
		bubble[i]--;
		if (bubble[i] <= canvas.height - 220)
			bubble[i] = 250;
		var y = bubble[i];
		var x = (i + 1) * 33;
		var radius = 15;
		ctx.beginPath();
		ctx.arc(x,y, radius, 0, 2 * Math.PI);
		ctx.closePath();
		// Use isPointInPath API to detect whether user is click on the bubble
		for (j=0;j<len;j++) {
			if (ctx.isPointInPath(canvasX[j], canvasY[j]) && mouseIsDown)
				bubble[i]=250;
		}
		ctx.fill();
	}
	
	setTimeout("runGame()", 20);
}

Description:

ctx.fillStyle = “rgba(255, 255, 255, 0.3)”;
Define the bubble in white color, and make it 30% of opacity.

ctx.clearRect(0,0, canvas.width, canvas.height);
Clear the canvas every time, before draw new lines of bubbles.

for (i=0;i
Using for loop to create the path for each bubble. In this case, we required canvas to draw 5 bubbles for us. and assign every bubble nicely. Please note that, this number must be same with the number of bubbles that we defined in the init function earlier.

for (j=0;j
This loop is to use to detect, whether our click / touch is on bubble using isPointInPath. The isPointInPath API returns a Boolean (true/false) value whether or not the specified point is in the current path.

setTimeout(“runGame()”, 20);
With the help of setTimeout method, we calling the runGame function every 0.02 seconds. You can control the speed of animated bubble by changing the value here.

Assign Background Image For Canvas

Finally, you can insert any images into your canvas using CSS. In this case, we assigned an underwater image as a background for canvas. Note: You are free to use the following image created by onlyWebPro.com:

That’s all! Save your document, and view it in supported browser! Note: For touch based devices, please touch and slide to break the bubble.

View Demo