Loading screen code.

Fix dimensions in desktop browsers.

cat.html

@@ -258,8 +258,12 @@ var llamatext = "llama";
 var image = new Array();
 var winimg = null;
 
+var nimages = 0;
+var maximages = 0;
+
 function loadimage(name, filename) {
 	image[name] = new Image();
+	image[name].onload = game.incloadprogress();
 	image[name].src = filename;
 }
 
@@ -572,26 +576,18 @@ function getdir(thing1, thing2) {
 }
 
 function startGame() {
+	var i;
 
-	loadimage('cat', 'images/cat.png');
-	loadimage('catfull', 'images/catfull.png');
-	loadimage('catscared', 'images/catscared.png');
-	loadimage('llama', 'images/alpaca.png');
-	loadimage('cheese', 'images/cheese.png');
-	loadimage('title', 'images/title.png');
+	imagenames = ['cat', 'catfull', 'catscared', 'llama', 'cheese', 'title',
+			'goat','door','sunlight','lock','catwalkl','catwalkr','starfull','starempty' ];
 	
-	loadimage('goat', 'images/goat.png');
-	loadimage('door', 'images/door.png');
-	loadimage('sunlight', 'images/sunlight.png');
-
-	loadimage('lock', 'images/lock.png');
-
-	loadimage('catwalkl', 'images/catwalkl.png');
-	loadimage('catwalkr', 'images/catwalkr.png');
-
-	loadimage('starfull', 'images/starfull.png');
-	loadimage('starempty', 'images/starempty.png');
 
+	nimages = 0;
+	maximages = 0;
+	for (i in imagenames) {
+		maximages++;
+		loadimage(imagenames[i], 'images/' + imagenames[i] + '.png');
+	}
 
 	game.init();
 	game.initlevels();
@@ -964,7 +960,7 @@ var game = {
 	curw: null,
 	curh: null,
 	levels: null,
-	state: "title",
+	state: "loader",
 	cheat: 0,
 	winimgsize: 0,
 	frameNo: 0,
@@ -990,11 +986,27 @@ var game = {
 		}
 	},
 
+	incloadprogress : function() {
+		nimages++;
+		console.log(nimages + " / " + maximages + " images loaded.");
+	},
+
+	drawloader : function() {
+		var bgcol = "#00ccff";
+		var pct = nimages / maximages;
+
+		ctx.fillStyle = bgcol;
+		this.context.fillRect(0, 0, this.canvas.width, pct * this.canvas.height);
+		this.dirty = true;
+	console.log("loader");
+	},
+
 	init : function() {
 
 		this.canvas = document.createElement("canvas");
 
-		this.ratio = SCREENH / SCREENW;
+		this.hratio = SCREENH / SCREENW;
+		this.wratio = SCREENW / SCREENH;
 		this.curw = SCREENW;
 		this.curh = SCREENH;
 
@@ -1056,7 +1068,7 @@ var game = {
 
 		window.addEventListener('keypress', this.handlekeypress, false);
 
-		this.setstate("title");
+		this.setstate("loader");
 	},
 
 	isbanned : function(lev, what) {
@@ -1087,8 +1099,17 @@ var game = {
 	},
 
 	resize : function() {
-		game.curw = window.innerWidth - 16;
-		game.curh = game.curw * game.ratio;
+		if (window.innerWidth > window.innerHeight) {
+			console.log("scaling to wid");
+			// scale to width
+			game.curh = window.innerHeight;
+			game.curw = game.curh * game.wratio;
+		} else {
+			console.log("scaling to height");
+			// scale to width
+			game.curw = window.innerWidth - 16;
+			game.curh = game.curw * game.hratio;
+		}
 
 		// hide address bar on phones
 		if (game.android || game.ios) {
@@ -1096,12 +1117,6 @@ var game = {
 		}
 
 		// scale canvas
-		////this.canvas.style.width = this.curw + 'px';
-		//this.canvas.style.height = this.curh + 'px';
-
-	//	this.canvas.style.width = this.curw + 'px';
-	//	this.canvas.style.height = this.curh + 'px';
-console.log("game.canvas = " + game.canvas);
 		game.canvas.style.width = game.curw + 'px';
 		game.canvas.style.height = game.curh + 'px';
 
@@ -1515,7 +1530,7 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 
 	clear : function() {
 		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
-		},
+	},
 
 	drawtop : function() {
 		var texttodraw = overdesc;
@@ -3422,8 +3437,13 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 		} else if (newstate == "title") {
 			// start fade in
 			wipe.start("", "in", 15);
+		} else if (newstate == "loader") {
+			
+
 		}
 
+		console.log("setstate() = " + newstate);
+
 		this.state = newstate;
 	},
 
@@ -4472,6 +4492,13 @@ function mainloop() {
 		game.clear();
 		game.drawtitle();
 			///game.setstate("levselect");
+	} else if (game.state == "loader") {
+		game.clear();
+		game.drawloader();
+
+		if (nimages >= maximages) {
+			game.setstate("title");
+		}
 	} else if (game.state == "help") {
 		game.clear();
 		game.drawhelp();

todo

@@ -1,39 +1,43 @@
 http://www.w3schools.com/games/tryit.asp?filename=trygame_default_gravity
 
-cat game ???
-        gems
-        diff kinds of cats, and food
-
-	swap cat with food = cat chomps food.  minor points for food vanish.
-                food:  dry food
-                food:  wet food
-                food:  cheese
-                food:  ham
-
-	cat gets fatter ?
-
-        line of diff cats = cat parade.  medium points.
-        line of same cats = big points!
-        line of cats with goat at the end = get rid of lots!
-
-	any parade gives you more moves.
-
-
-	game params:
-		# of moves limit
-		score
 
 phone fixes as per http://www.html5rocks.com/en/mobile/touch/
 
 ----------------------------
-
-
 https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/
 
 ----------
 
+*game is correct size on phone but HUGE in browsers!
+*	scale to highest dimension.
+
+loading screen
+
+
+white outline ?
+
+foot - cats push it, clear the horiz. line.
+
+powerups 
+	get by... doors ?
+	sneeze (wake up all)
+	overeat
+
+furniture
+	fixedin place
+	parade over to scratch
+	blow up and pow!
+
+
+
+multiplier for path length
+	3 = nothing
+	6 = x2 from now on
+	9 = x3 from now on
+	...etc
+
+	doors double entire length
 
-----------
 
 fireworks when you achieve a goal
 	*flash for now