Skip to content

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

Notifications You must be signed in to change notification settings

benjja/invaders404

 
 

Repository files navigation

#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!

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 98.0%
  • HTML 2.0%