pjnovas / invaders404

Another custom HTML5 CANVAS 404 error page with the classic game Space Invaders made in JavaScript.

#Invaders 404 A code for fun, yet another custom HTML5 CANVAS 404 error page with the classic game Space Invaders made in JavaScript.

##How to Use Its easy, just instanciate the class and suscribe to the events:

var invaders = new Invaders404({
	canvasId: 'game-canvas',
	onLoose: function(){
		alert('You Loose!');
	},
	onWin: function(){
		alert('You Win!');
	}
});

invaders.start();

• Browser compatibility: any browser which supports HTML5

##About the code Prototypal OOP-like code in JavaScript - thanks to John Resig (http://ejohn.org/) for the utility to make inheritance simplier: classes/class.js.

It has a prove of concept to use no images at all. They are all generated on the fly from a JSON array map of numbers; drawing them first to a canvas and then using canvas.toDataURL("image/png") for better performance (classes/ImageCreator.js).

// The Alien Crab JSON array
// 0 = transparent | 1 = static | 2 & 3 = animation states
ImageMapper.AlienCrab = function(){
	return [
		[0,0,1,0,0,0,0,0,1,0,0],
		[3,0,0,1,0,0,0,1,0,0,3],
		[3,0,0,1,0,0,0,1,0,0,3],
		[3,0,1,1,1,1,1,1,1,0,3],
		[3,0,1,0,1,1,1,0,1,0,3],
		[3,1,1,1,1,1,1,1,1,1,3],
		[2,1,1,1,1,1,1,1,1,1,2],
		[2,0,1,1,1,1,1,1,1,0,2],
		[2,0,1,1,1,1,1,1,1,0,2],
		[2,0,1,0,0,0,0,0,1,0,2],
		[2,0,1,0,0,0,0,0,1,0,2],
		[0,3,0,2,2,0,2,2,0,3,0]
	];
};

It has also some JSON arrays to configure the Aliens Invasion and the Shield disposition...

// The Aliens Invasion JSON array making the "404"
// 1 = Alien Squid | 2 = Alien Crab
ImageMapper.Invasion = function(){
	return [
		[2,2,2,2,2,2,2,2,2,2,2,2,2],
		[2,2,2,1,2,1,1,1,2,2,2,1,2],
		[2,2,1,1,2,1,2,1,2,2,1,1,2],
		[2,1,2,1,2,1,2,1,2,1,2,1,2],
		[2,1,1,1,2,1,2,1,2,1,1,1,2],
		[2,2,2,1,2,1,1,1,2,2,2,1,2],
		[2,2,2,2,2,2,2,2,2,2,2,2,2]
	];
};

// The Shield JSON array making the "NOT FOUND"
// 1 = Shield brick
ImageMapper.Shield = function(){
	return [ 
		[1,0,0,1,0,1,1,1,0,1,1,1,0,0,0,0,1,1,1,0,1,1,1,0,1,0,1,0,1,0,0,1,0,1,1,0],
		[1,1,0,1,0,1,0,1,0,0,1,0,0,0,0,0,1,0,0,0,1,0,1,0,1,0,1,0,1,1,0,1,0,1,0,1],
		[1,1,1,1,0,1,0,1,0,0,1,0,0,0,0,0,1,1,0,0,1,0,1,0,1,0,1,0,1,1,1,1,0,1,0,1],
		[1,0,1,1,0,1,0,1,0,0,1,0,0,0,0,0,1,0,0,0,1,0,1,0,1,0,1,0,1,0,1,1,0,1,0,1],
		[1,0,0,1,0,1,1,1,0,0,1,0,0,0,0,0,1,0,0,0,1,1,1,0,1,1,1,0,1,0,0,1,0,1,1,0]
	];
};

... so try it out, Fork me and have fun!