HTML5 canvas experiments

Peekaboo!

Demo: click handling
//generate random color
function getColor() {
	"use strict";
	
	return "rgb(" + (Math.round(Math.random() * 180) + 30) + ", " + (Math.round(Math.random() * 180) + 30) + ", " + (Math.round(Math.random() * 180) + 30) + ")";
}

function start(ctx, size, x, y, coordinates, halfWidth) {
	"use strict";
	
	var draw,
		find,
		anim,
		container = document.getElementById("container"),
		i;

	draw = function(x, y, fill) {
		ctx.fillStyle = fill || getColor();
		ctx.fillRect(x, y, size, size);
	};
	
	draw(x, y);

	for (i = coordinates.length - 1; i >= 0; i -= 1) {
		draw(coordinates[i][0], coordinates[i][1], coordinates[i][2]);
	}

	anim = function(callback, time, x, y, fill) {
		setTimeout(function() {
			callback(x, y, fill);
		}, time);
	};
	
	find = function(mouseX, mouseY) {
	
		var i = 0;

		//check if mouse was clicked where target square was drawn
		if (mouseX >= x && mouseX <= (x + size) && mouseY >= y && mouseY <= (y + size)) {
		
			container.innerHTML = "You found me!";

			for (i = 0; i <= 800; i += 200) {
				anim(draw, i, x, y);
			}
			
			anim(draw, 1200, x, y);
		}

		else {
		
			container.innerHTML = "Cold...";
		
			//if x is on right half of canvas, reverse array (=start search from highest value) to minimize amount of loops
			if (mouseX > halfWidth) {
				coordinates.reverse();
			}

			for (i = coordinates.length - 1; i >= 0; i -= 1) {

				if (mouseX >= coordinates[i][0] && mouseX <= (coordinates[i][0] + size) && mouseY >= coordinates[i][1] && mouseY <= (coordinates[i][1] + size)) {

					container.innerHTML = "Try again";

					//draw square
					draw(coordinates[i][0], coordinates[i][1], "#222");
					
					//return state in 0.8 seconds
					anim(draw, 500, coordinates[i][0], coordinates[i][1], coordinates[i][2]);
					
					if (mouseX > halfWidth) {
						coordinates.reverse();
					}
				}
			}
		}
	};
	
	//call function when canvas is clicked
	document.getElementById("cnv").addEventListener("click", function(e) {
	
		//send mouse click coordinates (pageX and target are for standards-compliant browsers)
		find(
			e.pageX - e.target.offsetLeft || e.clientX - e.srcElement.offsetLeft,
			e.pageY - e.target.offsetTop || e.clientY - e.srcElement.offsetTop
		);

	}, false);
}

function init(w, h, size, count) {
	"use strict";
	
	//declare variables
	var a = document.getElementById("cnv"),
		ctx = a.getContext("2d"),
		b,
		c = [1],
		i,
		j;
		
	//set canvas dimensions
	a.width = w;
	a.height = h;

	//generate x, y coordinates
	a = function() {
		return [
			Math.floor((Math.random() * Math.floor(w / size))) * size,
			Math.floor((Math.random() * Math.floor(h / size))) * size
		];
	};

	//add to array
	for (i = 0; i <= count; i += 1) {
		
		c[i] = a();
		c[i][2] = getColor();

		//check for duplicate values
		for (j = i - 1; j >= 0; j -= 1) {

			//current coordinates (i) match one of previously generated (j)
			if (j >= 0 && c[i][0] === c[j][0] && c[i][1] === c[j][1]) {

				//generate new
				c[i] = a();
				c[i][2] = getColor();
				
				//start over by setting second counter to array length (can't use i here)
				j = c.length - 1;
			}
		}
	}

	//assign first pair to target square
	a = c[0][0];
	b = c[0][1];

	//delete
	c.shift();

	//sort based on x
	c.sort(function(a, b) {
		return a[0] - b[0];
	});
	
	start(ctx, size, a, b, c, (w / 2));
}

//check if browser supports addEventListener (rules out IE9 and below)
if (window.addEventListener) {
	window.addEventListener("load", function load() {
		"use strict";
		
		//event listener is no longer needed
		window.removeEventListener("load", load, false);

		//start with: canvas width, canvas height, square dimensions, square count
		init(600, 400, 75, 4);
		
	}, false);
}

Square Pac-Man on a Sunday Stroll

Demo: keyboard input
//generate random color
function getColor() {
	"use strict";

	return "rgb(" + (Math.round(Math.random() * 180) + 30) + ", " + (Math.round(Math.random() * 180) + 30) + ", " + (Math.round(Math.random() * 180) + 30) + ")";
}

function start() {
	"use strict";
	
	var c = document.getElementById("cnv"),
		ctx = c.getContext("2d"),
		x = 0,
		y = 120,
		i;

	//set canvas dimensions
	c.width = 600;
	c.height = 420;
	
	//draw random squares
	for (i = 0; i < 10; i += 1) {
		ctx.fillStyle = getColor();
		ctx.fillRect(Math.floor(Math.random() * 20) * 30, Math.floor(Math.random() * 14) * 30, 30, 30);
	}
	
	ctx.fillStyle = "#000";
	ctx.fillRect(x, y, 30, 30);
	
	ctx.fillStyle = "#eee";
	ctx.moveTo(x + 30, y);
	ctx.lineTo(x + 18, y + 15);
	ctx.lineTo(x + 30, y + 30);
	ctx.closePath();
	ctx.fill();
	
	c = function(dir) {
	
		ctx.fillStyle = "#eee";
		ctx.fillRect(x, y, 30, 30);
		
		ctx.beginPath();
		
		if (dir === "up" && y >= 30) {
			y -= 30;
			ctx.moveTo(x, y);
			ctx.lineTo(x + 30, y);
			ctx.lineTo(x + 15, y + 12);
		}
		else if (dir === "down" && y <= 360) {
			y += 30;
			ctx.moveTo(x, y + 30);
			ctx.lineTo(x + 15, y + 18);
			ctx.lineTo(x + 30, y + 30);
		}
		else if (dir === "right" && x <= 540) {
			x += 30;
			ctx.moveTo(x + 30, y);
			ctx.lineTo(x + 18, y + 15);
			ctx.lineTo(x + 30, y + 30);
		}
		else if (dir === "left" && x >= 30) {
			x -= 30;
			ctx.moveTo(x, y);
			ctx.lineTo(x + 12, y + 15);
			ctx.lineTo(x, y + 30);
		}

		ctx.fillStyle = "#000";
		ctx.fillRect(x, y, 30, 30);
		
		ctx.fillStyle = "#eee";
		ctx.closePath();
		ctx.fill();
	};

	//handle key presses
	window.addEventListener("keydown", function(e) {

		if (e.keyCode === 38) {
			c("up");
		}
		else if (e.keyCode === 40) {
			c("down");
		}
		else if (e.keyCode === 39) {
			c("right");
		}
		else if (e.keyCode === 37) {
			c("left");
		}
		
	}, false);
}

//check if browser supports addEventListener (rules out IE9 and below)
if (window.addEventListener) {
	window.addEventListener("load", function load() {
		"use strict";

		//event listener is no longer needed
		window.removeEventListener("load", load, false);

		start();
		
	}, false);
}	

Comments