Made it modular, added splash screen and menu

game/menu.js

@@ -0,0 +1,166 @@
+window.Minia.Menu = new (function() {
+	var self = this;
+
+	self.name = "Menu";
+
+	var main;
+	var ctx;
+
+	var img_cursor;
+	var img_bg;
+	var img_header;
+	var img_raindrop;
+
+	var cv_menuopts;
+	var ctx_menuopts;
+
+	var cursor_rotate = 0.0;
+
+	var menuopt_current = 0;
+	var menuopt_count = 1;
+	var menuopt_entries = [
+		"Start game",
+		"Play level...",
+		"Sound/Music: N/A",
+		"Effects: High"
+	];
+
+	var raindrops = [];
+
+	function render_menuopts() {
+		// Clear everything
+		ctx_menuopts.clearRect(0, 0, cv_menuopts.width, cv_menuopts.height);
+
+		// Draw background
+		ctx_menuopts.fillStyle = "#000";
+		ctx_menuopts.globalAlpha = 0.25;
+		ctx_menuopts.fillRect(0, 0, cv_menuopts.width, cv_menuopts.height);
+		ctx_menuopts.globalAlpha = 1.0;
+
+		// Draw menu options
+		for (var i = 0; i < menuopt_count; i++) {
+			var t = menuopt_entries[i];
+
+			ctx_menuopts.fillStyle = "#000";
+			ctx_menuopts.fillText(t, 32, 4 + (24 * i) + 1);
+			ctx_menuopts.fillText(t, 32, 4 + (24 * i) - 1);
+			ctx_menuopts.fillText(t, 31, 4 + (24 * i));
+			ctx_menuopts.fillText(t, 33, 4 + (24 * i));
+
+			ctx_menuopts.fillStyle = "#fff";
+			ctx_menuopts.fillText(t, 32, 4 + (24 * i));
+		}
+
+		// Draw cursor
+		ctx_menuopts.save();
+		ctx_menuopts.translate(16, 16 + menuopt_current * 24);
+		ctx_menuopts.rotate(cursor_rotate);
+		ctx_menuopts.drawImage(img_cursor, 0, 0, 8, 8, -8, -8, 16, 16);
+		ctx_menuopts.restore();
+
+		// I'M SPINNING!
+		cursor_rotate += 0.125;
+		if (cursor_rotate >= 6.283) cursor_rotate -= 6.283;
+
+		// Render to screen
+		ctx.drawImage(cv_menuopts, 160 - cv_menuopts.width / 2, 72);
+	}
+
+	function render_rain() {
+		img_raindrop = Minia.Resources.sprites["player_walk_right"].frame;
+		ctx.globalAlpha = 0.8;
+
+		for (var i = 0, j = raindrops.length; i < j; i++) {
+			var r = raindrops[i];
+
+			if (r.y >= 240) {
+				r.y = -16;
+				r.x = -8 + Math.round(Math.random() * 336);
+				r.speed = 1 + Math.round(Math.random() * 3);
+			}
+
+			if (r.upsidedown) {
+				ctx.save();
+					ctx.translate(8, 0);
+					ctx.scale(1, -1);
+					ctx.drawImage(img_raindrop, r.x, -8 - r.y);
+				ctx.restore();
+			}
+			else ctx.drawImage(img_raindrop, r.x, r.y);
+
+			r.y += r.speed;
+		}
+
+		ctx.globalAlpha = 1.0;
+	}
+
+	self.start = function(_main, _ctx) {
+		main = _main;
+		ctx = _ctx;
+
+		cv_menuopts = document.createElement("canvas");
+		ctx_menuopts = cv_menuopts.getContext("2d");
+
+		cv_menuopts.width = 180;
+		cv_menuopts.height = 8 + menuopt_count * 24;
+
+		main.disable_canvas_smoothing(ctx_menuopts);
+		main.disable_canvas_smoothing(ctx);
+
+		img_cursor = Minia.Resources.tiles[4];
+		img_bg = Minia.Resources.resmap.menu_bg.ref;
+		img_header = Minia.Resources.resmap.menu_header.ref;
+
+		ctx.fillStyle = "#000";
+		ctx.globalAlpha = 1.0;
+
+		ctx_menuopts.font = "bold 16px 'Trebuchet MS','Tahoma','Bitstream Vera Sans','sans'";
+		ctx_menuopts.textAlign = "left";
+		ctx_menuopts.textBaseline = "top";
+
+		// Spawn raindrops
+		for (var i = 0; i < 5; i++) {
+			raindrops.push({
+				"x": -8 + Math.round(Math.random() * 336),
+				"y": Math.round(Math.random() * 240),
+				"speed": 1 + Math.round(Math.random() * 3),
+			});
+		}
+
+		raindrops[0].upsidedown = 1;
+	};
+
+	self.frame = function() {
+		ctx.drawImage(img_bg, 0, 0);
+		render_rain();
+		ctx.drawImage(img_header, 160 - img_header.width / 2, 16);
+		render_menuopts();
+	};
+
+	self.stop = function() { };
+
+	self.input_key_down = function(e) {
+		var k = e.keyCode;
+
+		if (k == 37) {
+			// left
+		}
+		else if (k == 39) {
+			// right
+		}
+		else if (k == 38) {
+			menuopt_current--;
+			if (menuopt_current < 0) menuopt_current += menuopt_count;
+		}
+		else if (k == 40) {
+			menuopt_current = (menuopt_current + 1) % menuopt_count;
+		}
+		else if (k == 10 || k == 13) {
+			if (menuopt_current == 0) {
+				window.Minia.Game.set_level("level01");
+				main.start_controller(window.Minia.Game);
+			}
+		}
+	}
+});
+

game/resources.js

@@ -0,0 +1,182 @@
+window.Minia.Resources = new (function() {
+	var self = this;
+
+	self.resmap = {};
+
+	var sprites;
+	var tiles;
+
+	var resources = [
+		{ "name": "splash",      "file": "/gfx/splash.png",      "type": "gfx" },
+		{ "name": "menu_bg",     "file": "/gfx/menu_bg.png",     "type": "gfx" },
+		{ "name": "menu_header", "file": "/gfx/menu_header.png", "type": "gfx" },
+		{ "name": "sprites",     "file": "/gfx/sprites.png",     "type": "gfx" },
+		{ "name": "tiles",       "file": "/gfx/tiles.png",       "type": "gfx" },
+		{ "name": "bg",          "file": "/gfx/bg.png",          "type": "gfx" },
+		{ "name": "bg2",         "file": "/gfx/bg2.png",         "type": "gfx" },
+		{ "name": "bg3",         "file": "/gfx/bg3.png",         "type": "gfx" }
+	];
+
+	self.tiledata = [
+		0x00,	// Air
+		0x01,	// Wall
+		0x01,	// Ice (?)
+		0x02,	// Spikes
+		0x00,	// Tiled wall
+		0x00,	// Tiled wall (broken)
+		0x00,	// Exit
+		0x00,	// Checkpoint (converted to entity)
+		0x00,	// Warning sign
+		0x01,	// Crate
+		0x02,	// Spikes + bg
+	];
+
+	self.tile_explode_colormap = [
+		[],
+		[ [ 200, 200, 200 ], [ 255, 255, 255 ] ],	// Wall
+		[ [   8,  82, 181 ], [  25, 130, 224 ] ],	// Ice
+		[ [ 200, 200, 200 ], [ 255, 255, 255 ] ],	// Spike
+		[ [  74, 105, 133 ], [ 102, 144, 170 ] ],	// Bg tile
+		[ [  74, 105, 133 ], [ 102, 144, 170 ] ],	// Bg tile (broken)
+		[ [ 255, 128,   0 ], [ 255, 200,   0 ] ],	// Exit
+		[],	// Checkpoint (doesn't exist)
+		[ [  74, 105, 133 ], [ 102, 144, 170 ] ],	// Warning sign
+		[ [ 133,  91,  44 ], [ 187, 148,  71 ] ],	// Crate
+		[ [ 200, 200, 200 ], [ 255, 255, 255 ] ],	// Spike + bg
+		[ [ 200, 200, 200 ], [ 255, 255, 255 ] ],	// Pillar
+		[ [ 133,  91,  44 ], [ 187, 148,  71 ] ],	// Pillar
+	];
+
+	var animsprites;
+
+	// Load resources
+	function load_resources(base_url, cb_done, cb_loading) {
+		for (var i = 0; i < resources.length; i++) {
+			if (!resources[i].ref) {
+				var res = resources[i];
+				var url = base_url + res.file;
+
+				cb_loading(res, url);
+
+				console.log("Loading " + res.name + " (" + url + ")...");
+
+				if (res.type == "gfx") {
+					var img = new Image();
+					img.onload = function() {
+						res.ref = img;
+						self.resmap[res.name] = res;
+						load_resources(base_url, cb_done, cb_loading);
+					};
+
+					img.src = url;
+				}
+				else if (res.type == "json") {
+					$.get(
+						url,
+						function(data) {
+							res.ref = data;
+							self.resmap[res.name] = res;
+							load_resources(base_url, cb_done, cb_loading);
+						});
+				}
+
+				return;
+			}
+		}
+
+		console.log("Resources loaded!");
+		cb_done();
+	}
+
+	function process_resources() {
+		console.log("Initializing resources...");
+		process_tiles();
+		process_sprites();
+
+		self.sprites = sprites;
+		self.tiles = tiles;
+	}
+
+	function process_tiles() {
+		var res = self.resmap["tiles"];
+		tiles = [];
+		for (var i = 0; i < 256; i++) {
+			var x = (i % 16) * 8;
+			var y = Math.floor(i / 16) * 8;
+
+			var c = document.createElement("canvas");
+			c.width = 8;
+			c.height = 8;
+			c.getContext("2d").drawImage(res.ref, x, y, 8, 8, 0, 0, 8, 8);
+
+			tiles.push(c);
+		}
+	}
+
+	function process_sprites() {
+		animsprites = [];
+
+		function get_frame(x, y) {
+			var c = document.createElement("canvas");
+			c.width = 8;
+			c.height = 8;
+			c.getContext("2d").drawImage(self.resmap.sprites.ref, x * 8, y * 8, 8, 8, 0, 0, 8, 8);
+			return c;
+		}
+
+		function create_static_sprite(x, y) {
+			return {
+				"type": "static",
+				"frame": get_frame(x, y)
+			};
+		}
+
+		function create_anim_sprite(x, y, frames, interval) {
+			var f = [];
+			for (var i = 0; i < frames; i++) {
+				f.push(get_frame(x + i, y));
+			}
+
+			var r = {
+				"type":     "anim", 
+				"counter":  0,
+				"interval": interval,
+				"time":     0,
+				"frame":    f[0],
+				"frames":   f
+			};
+
+			animsprites.push(r);
+
+			return r;
+		}
+
+		sprites = {
+			"player_idle_right":   create_static_sprite(0, 0),
+			"player_walk_right":   create_anim_sprite(1, 0, 2, 1/16),
+			"player_idle_left":    create_static_sprite(0, 1),
+			"player_walk_left":    create_anim_sprite(1, 1, 2, 1/16),
+			"checkpoint_inactive": create_anim_sprite(3, 0, 4, 1/4),
+			"checkpoint_active":   create_anim_sprite(3, 1, 4, 1/4),
+		};
+	}
+
+	// Update sprite animations
+	self.frame = function() {
+		for (var i = 0, j = animsprites.length; i < j; i++) {
+			var s = animsprites[i];
+
+			s.time += 1 / 30;
+			while (s.time >= s.interval) {
+				s.time -= s.interval;
+				s.counter = (s.counter + 1) % s.frames.length;
+				s.frame = s.frames[s.counter];
+			}
+		}
+	}
+
+	// Bind functions
+	this.load_resources = load_resources;
+	this.process_resources = process_resources;
+})();
+