diff --git a/cat.html b/cat.html
index 14033d5..b3991f3 100644
--- a/cat.html
+++ b/cat.html
@@ -523,6 +523,13 @@ function addcommas(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
+function hashelp(lev) {
+ // past last level!
+ if (lev >= game.levels.length) return false;
+
+ return game.levels[lev].hashelp;
+}
+
function drawcross(x, y, x2, y2, col, width) {
// cross out
ctx.fillStyle = col
@@ -672,6 +679,7 @@ var game = {
initgamevars : function() {
score = 0;
+ this.frameNo = 0;
},
initlevelvars : function() {
@@ -684,18 +692,23 @@ var game = {
pathvalid = false;
},
- // goal1type goal1count goal2type goal2count etc...
- addlevel : function () {
- var i,mylevel,idx;
+ addlevel: function (lev, hashelp) {
+ var mylevel;
mylevel = new Object();
+ mylevel.hashelp = hashelp;
mylevel.goals = new Array();
- for (i = 0 ; i < arguments.length; i += 2) {
- idx = mylevel.goals.push(new Object()) - 1;
- mylevel.goals[idx].type = arguments[i];
- mylevel.goals[idx].count = arguments[i+1];
- mylevel.goals[idx].progress = 0;
+ this.levels[lev] = mylevel;
+ },
+
+ // goal1type goal1count goal2type goal2count etc...
+ addlevelgoals : function (lev) {
+ var i,idx;
+ for (i = 1 ; i < arguments.length; i += 2) {
+ idx = this.levels[lev].goals.push(new Object()) - 1;
+ this.levels[lev].goals[idx].type = arguments[i];
+ this.levels[lev].goals[idx].count = arguments[i+1];
+ this.levels[lev].goals[idx].progress = 0;
}
- this.levels.push(mylevel);
},
// earn progress towards goals
@@ -722,13 +735,15 @@ var game = {
console.log("doing level init");
this.levels = [];
- this.addlevel(); // dummy level with 0 goals
- this.addlevel("food", 10);
- this.addlevel("points", 200);
+ this.addlevel(1, true);
+ this.addlevelgoals(1, "food", 10);
+
+ this.addlevel(2, false);
+ this.addlevelgoals(2, "points", 200);
/*
- for (i = 0; i < this.levels.length; i++) {
- console.log("Level " + (i+1) + " goals:");
+ for (i = 1; i < this.levels.length; i++) {
+ console.log("Level " + (i) + " goals:");
for (n = 0; n < this.levels[i].goals.length; n++) {
console.log(GOALVERB[this.levels[i].goals[n].type] + " " +
this.levels[i].goals[n].count + " " +
@@ -738,9 +753,7 @@ var game = {
*/
},
- nextlevel : function() {
- curlevel++;
-
+ startlevel : function() {
this.initlevelvars();
this.populategrid();
@@ -770,18 +783,6 @@ var game = {
}
},
- startgame : function() {
- var x,y;
- this.frameNo = 0;
-
- this.initgamevars();
- this.initlevelvars();
- this.populategrid();
-
- curlevel = 1;
-
- this.state = "running";
- },
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -994,6 +995,7 @@ var game = {
shadowtext(this.context, "Tap to start", TITLESTARTTEXTSIZE, "#00dd00", SCREENW / 2, SCREENH - 64);
},
+ // return TRUE if there is no help for this level
drawhelp : function() {
var divamt = 2;
var imgsize = THINGSIZE / divamt;
@@ -1010,7 +1012,6 @@ var game = {
var midpoint1 = SCREENW/8 * 5;
var midpoint2 = SCREENW/8 * 4;
-
ctx = this.context;
// background
@@ -1021,226 +1022,231 @@ var game = {
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, SCREENW, SCREENH);
- // top text
- cury = textyspace*2;
- ctx.textAlign = "center";
- ctx.textBaseline = "bottom";
- shadowtext(ctx, "Instructions", HELPTITLESIZE,"#00aaee", SCREENW / 2, cury);
- cury += textyspace;
- cury += textyspace;
+ if (curlevel == 1) {
+ // top text
+ cury = textyspace*2;
+ ctx.textAlign = "center";
+ ctx.textBaseline = "bottom";
+ shadowtext(ctx, "Instructions", HELPTITLESIZE,"#00aaee", SCREENW / 2, cury);
+ cury += textyspace;
+ cury += textyspace;
- ctx.textAlign = "left";
- ctx.textBaseline = "bottom";
- shadowtext(ctx, "Drag a cat to eat cheese.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
- cury += textyspace;
+ ctx.textAlign = "left";
+ ctx.textBaseline = "bottom";
+ shadowtext(ctx, "Drag a cat to eat cheese.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
+ cury += textyspace;
- shadowtext(ctx, " - Cats can eat any amount of cheese, but only in a straight line.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
- cury += textyspace;
+ shadowtext(ctx, " - Cats can eat any amount of cheese, but only in a straight line.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
+ cury += textyspace;
- shadowtext(ctx, " - Cats get tired after eating and cannot eat again.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
- cury += textyspace;
+ shadowtext(ctx, " - Cats get tired after eating and cannot eat again.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
+ cury += textyspace;
+
+
+ // help on eating
+ // row 1
+ x = imgsize;
+ y = cury;
+ row1y = y;
+ ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
+
+ x2 = x + gridsize;
+ y2 = y;
+ ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
+
+ ctx.strokeStyle = "green";
+ ctx.lineWidth = LINEWIDTH;
+ ctx.beginPath();
+ ctx.moveTo(x + imgsize/2, y + imgsize/2);
+ ctx.lineTo(x2 + imgsize/2, y2 + imgsize/2);
+ ctx.stroke();
+
+ drawarrow(ctx, x + (imgsize/2), y + (imgsize/2),
+ x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
+
+ cury = y2 + gridsize;
+
+ // row 2
+ x = imgsize;
+ y = cury;
+ row2y = y;
+ ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
+
+ x2 = x + gridsize;
+ y2 = y;
+ ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
+
+ x2 = x2 + gridsize;
+ y2 = y;
+ ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
+
+ x2 = x2 + gridsize;
+ y2 = y;
+ ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
+
+ drawarrow(ctx, x + (imgsize/2), y + (imgsize/2),
+ x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
+
+ cury = y2 + gridsize;
+
+ // arrow to middle
+ x = x2 + gridsize;
+ y = row1y + (imgsize);
+ x2 = x + gridsize*1.5;
+ y2 = y;
- // help on eating
- // row 1
- x = imgsize;
- y = cury;
- row1y = y;
- ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
+ drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
- x2 = x + gridsize;
- y2 = y;
- ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
+ // middle
+ ctx.textAlign = "center";
+ ctx.textBaseline = "top";
- ctx.strokeStyle = "green";
- ctx.lineWidth = LINEWIDTH;
- ctx.beginPath();
- ctx.moveTo(x + imgsize/2, y + imgsize/2);
- ctx.lineTo(x2 + imgsize/2, y2 + imgsize/2);
- ctx.stroke();
-
- drawarrow(ctx, x + (imgsize/2), y + (imgsize/2),
- x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
-
- cury = y2 + gridsize;
-
- // row 2
- x = imgsize;
- y = cury;
- row2y = y;
- ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
-
- x2 = x + gridsize;
- y2 = y;
- ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
-
- x2 = x2 + gridsize;
- y2 = y;
- ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
-
- x2 = x2 + gridsize;
- y2 = y;
- ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
-
- drawarrow(ctx, x + (imgsize/2), y + (imgsize/2),
- x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
-
- cury = y2 + gridsize;
-
- // arrow to middle
- x = x2 + gridsize;
- y = row1y + (imgsize);
-
- x2 = x + gridsize*1.5;
- y2 = y;
-
- drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
-
- // middle
- ctx.textAlign = "center";
- ctx.textBaseline = "top";
-
- x = midpoint1;
- y = row1y+10;
- shadowtext(ctx, "+" + FOODPOINTS + " points", HELPTEXTSIZE,"#cccc00", x, y);
- y = row2y-10;
- shadowtext(ctx, "per cheese", HELPTEXTSIZE,"#cccc00", x, y);
+ x = midpoint1;
+ y = row1y+10;
+ shadowtext(ctx, "+" + FOODPOINTS + " points", HELPTEXTSIZE,"#cccc00", x, y);
+ y = row2y-10;
+ shadowtext(ctx, "per cheese", HELPTEXTSIZE,"#cccc00", x, y);
- // arrow to right
- x = midpoint1 + gridsize + 10;
- y = row1y + (imgsize);
-
- x2 = SCREENW - imgsize*2;
- y2 = y;
-
- drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
-
- // right
- x = SCREENW - imgsize*2;
- y = row1y;
- ctx.drawImage(image['catfull'], x, y, imgsize, imgsize);
- y = row2y;
- ctx.drawImage(image['catfull'], x, y, imgsize, imgsize);
-
- cury += textyspace;
- cury += textyspace;
- cury += textyspace;
-
-
- // LLAMA HELP
- ctx.textAlign = "left";
- ctx.textBaseline = "bottom";
- shadowtext(ctx, "Cats are scared of " + llamatext + "s and can't move when near them.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
- cury += textyspace;
-
- x = (SCREENW / 2) - gridsize/2 - gridsize;
- y = cury;
- ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
+ // arrow to right
+ x = midpoint1 + gridsize + 10;
+ y = row1y + (imgsize);
- x += gridsize;
- y = cury;
- ctx.drawImage(image['llama'], x, y, imgsize, imgsize);
+ x2 = SCREENW - imgsize*2;
+ y2 = y;
- x += gridsize;
- y = cury;
- ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
+ drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
- cury += textyspace;
- cury += textyspace;
- cury += textyspace;
- cury += textyspace;
-
- // PARADE HELP
- ctx.textAlign = "left";
- ctx.textBaseline = "bottom";
- shadowtext(ctx, "Drag a path through multiple cats to start a parade.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
- cury += textyspace;
- shadowtext(ctx, " - Parades can turn corners.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
- cury += textyspace;
- shadowtext(ctx, " - Parades can include one " + llamatext + " only.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
- cury += textyspace;
+ // right
+ x = SCREENW - imgsize*2;
+ y = row1y;
+ ctx.drawImage(image['catfull'], x, y, imgsize, imgsize);
+ y = row2y;
+ ctx.drawImage(image['catfull'], x, y, imgsize, imgsize);
- // top line of parade
- x = imgsize;
- y = cury;
- row1y = y;
- ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
- linex[0] = x + imgsize/2;
- liney[0] = y + imgsize/2;
- x += gridsize;
+ cury += textyspace;
+ cury += textyspace;
+ cury += textyspace;
- ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
- linex[3] = x + imgsize/2;
- liney[3] = y + imgsize/2;
- x += gridsize;
- ctx.drawImage(image['llama'], x, y, imgsize, imgsize);
- linex[4] = x + imgsize/2;
- liney[4] = y + imgsize/2;
- x += gridsize;
+ // LLAMA HELP
+ ctx.textAlign = "left";
+ ctx.textBaseline = "bottom";
+ shadowtext(ctx, "Cats are scared of " + llamatext + "s and can't move when near them.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
+ cury += textyspace;
- x = imgsize;
- y += gridsize;
- row2y = y;
+ x = (SCREENW / 2) - gridsize/2 - gridsize;
+ y = cury;
+ ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
+
+ x += gridsize;
+ y = cury;
+ ctx.drawImage(image['llama'], x, y, imgsize, imgsize);
- ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
- linex[1] = x + imgsize/2;
- liney[1] = y + imgsize/2;
- x += gridsize;
+ x += gridsize;
+ y = cury;
+ ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
- ctx.drawImage(image['catfull'], x, y, imgsize, imgsize);
- linex[2] = x + imgsize/2;
- liney[2] = y + imgsize/2;
- x += gridsize;
+ cury += textyspace;
+ cury += textyspace;
+ cury += textyspace;
+ cury += textyspace;
+
+ // PARADE HELP
+ ctx.textAlign = "left";
+ ctx.textBaseline = "bottom";
+ shadowtext(ctx, "Drag a path through multiple cats to start a parade.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
+ cury += textyspace;
+ shadowtext(ctx, " - Parades can turn corners.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
+ cury += textyspace;
+ shadowtext(ctx, " - Parades can include one " + llamatext + " only.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
+ cury += textyspace;
- ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
- linex[5] = x + imgsize/2;
- liney[5] = y + imgsize/2;
- cury = y + textyspace;
+ // top line of parade
+ x = imgsize;
+ y = cury;
+ row1y = y;
+ ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
+ linex[0] = x + imgsize/2;
+ liney[0] = y + imgsize/2;
+ x += gridsize;
- for (i = 0; i < 4; i++) {
- drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], "green", LINEWIDTH);
+ ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
+ linex[3] = x + imgsize/2;
+ liney[3] = y + imgsize/2;
+ x += gridsize;
+
+ ctx.drawImage(image['llama'], x, y, imgsize, imgsize);
+ linex[4] = x + imgsize/2;
+ liney[4] = y + imgsize/2;
+ x += gridsize;
+
+ x = imgsize;
+ y += gridsize;
+ row2y = y;
+
+ ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
+ linex[1] = x + imgsize/2;
+ liney[1] = y + imgsize/2;
+ x += gridsize;
+
+ ctx.drawImage(image['catfull'], x, y, imgsize, imgsize);
+ linex[2] = x + imgsize/2;
+ liney[2] = y + imgsize/2;
+ x += gridsize;
+
+ ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
+ linex[5] = x + imgsize/2;
+ liney[5] = y + imgsize/2;
+ cury = y + textyspace;
+
+ for (i = 0; i < 4; i++) {
+ drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], "green", LINEWIDTH);
+ }
+ drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], "green", LINEWIDTH, PATHARROWSIZE);
+
+ // arrow to middle
+ x = x + gridsize;
+ y = row1y + (imgsize);
+
+ x2 = midpoint2 - 10;
+ y2 = y;
+
+ drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
+
+ // explain points for parades
+ ctx.textAlign = "left";
+ ctx.textBaseline = "top";
+ x = midpoint2;
+ y = row1y;
+ shadowtext(ctx, "+" + CATPOINTS + " points per cat", HELPTEXTSIZE,"#cccc00", x, y);
+ y += textyspace;
+ shadowtext(ctx, "+" + SLEEPYCATPOINTS + " points per sleepy cat", HELPTEXTSIZE,"#cccc00", x, y);
+ y += textyspace;
+ shadowtext(ctx, "+" + LLAMAPOINTS + " points per " + llamatext, HELPTEXTSIZE,"#cccc00", x, y);
+
+ cury = y + textyspace;
+ cury += textyspace;
+ cury += textyspace;
+ cury += textyspace;
+ cury += textyspace;
+
+ // GAME OVER HELP
+ ctx.textAlign = "left";
+ ctx.textBaseline = "bottom";
+ shadowtext(ctx, "The game ends when there are no valid moves left.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
+ cury += textyspace;
+
+
+ ctx.textAlign = "center";
+ this.context.textBaseline = "bottom";
+ shadowtext(this.context, "Tap to start", TITLESTARTTEXTSIZE, "#00dd00", SCREENW / 2, SCREENH - textyspace*2);
+ } else {
+ return true;
}
- drawarrow(ctx, linex[4], liney[4], linex[5], liney[5], "green", LINEWIDTH, PATHARROWSIZE);
-
- // arrow to middle
- x = x + gridsize;
- y = row1y + (imgsize);
-
- x2 = midpoint2 - 10;
- y2 = y;
-
- drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
-
- // explain points for parades
- ctx.textAlign = "left";
- ctx.textBaseline = "top";
- x = midpoint2;
- y = row1y;
- shadowtext(ctx, "+" + CATPOINTS + " points per cat", HELPTEXTSIZE,"#cccc00", x, y);
- y += textyspace;
- shadowtext(ctx, "+" + SLEEPYCATPOINTS + " points per sleepy cat", HELPTEXTSIZE,"#cccc00", x, y);
- y += textyspace;
- shadowtext(ctx, "+" + LLAMAPOINTS + " points per " + llamatext, HELPTEXTSIZE,"#cccc00", x, y);
-
- cury = y + textyspace;
- cury += textyspace;
- cury += textyspace;
- cury += textyspace;
- cury += textyspace;
-
- // GAME OVER HELP
- ctx.textAlign = "left";
- ctx.textBaseline = "bottom";
- shadowtext(ctx, "The game ends when there are no valid moves left.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
- cury += textyspace;
-
-
- ctx.textAlign = "center";
- this.context.textBaseline = "bottom";
- shadowtext(this.context, "Tap to start", TITLESTARTTEXTSIZE, "#00dd00", SCREENW / 2, SCREENH - textyspace*2);
+ return false;
},
drawgrid : function() {
@@ -1357,13 +1363,22 @@ var game = {
} else if (game.state == "gameover") {
game.setstate("title");
} else if (game.state == "title") {
- game.setstate("help");
+ curlevel = 1;
+ game.initgamevars();
+ game.helporstartlev();
} else if (game.state == "help") {
- game.startgame();
+ game.startlevel();
} else if (game.state == "levelcomplete") {
- // TODO : show help for this level
- // TODO: start next levle
- game.nextlevel();
+ curlevel++;
+ game.helporstartlev();
+ }
+ },
+
+ helporstartlev : function() {
+ if (hashelp(curlevel)) {
+ game.setstate("help");
+ } else {
+ game.startlevel();
}
},
@@ -2141,7 +2156,8 @@ function mainloop() {
if (game.state == "title") {
game.drawtitle();
} else if (game.state == "help") {
- game.drawhelp();
+ if (game.drawhelp()) {
+ }
} else {
game.drawgrid(); // draw grid
// move objects
diff --git a/images/title.png b/images/title.png
new file mode 100644
index 0000000..8e2325a
Binary files /dev/null and b/images/title.png differ
diff --git a/todo b/todo
index 42c5bc2..0fac3e0 100644
--- a/todo
+++ b/todo
@@ -29,16 +29,21 @@ phone fixes as per http://www.html5rocks.com/en/mobile/touch/
https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/
-*create diff levels with goals
-*display goals at bottom of screen
-*implement progress() to earn progress towards goals
-*go to next level after meeting all goals
+*implement support for level-specific help text
-implement level-specific help text
- when starting a levle, go to 'help text' state if it has one.
- if not, just start the level
+custom thing chance ratios for each level
+ 1: no llamas
+ 2: no llamas
+ 3: llamas
+
+make llamas only start appearing a few levels in
+
+make help text for llamas come later
+ llamas scaring cats
+ parades can have one llama
+
+make initial help text jsut talk about paraes, no llamas
- (make current 'help text' the text for level 1)
Level selection screen
grid of numbers for each level
@@ -48,24 +53,32 @@ Level selection screen
scrolling background of cat paws ?
+Store level progress using localstorage
+ https://www.smashingmagazine.com/2010/10/local-storage-and-how-to-use-it/
+ localStorage.setItem('favoriteflavor','vanilla');
+
+ var taste = localStorage.getItem('favoriteflavor');
+ // -> "vanilla"
+
+ localStorage.removeItem('favoriteflavor');
+ var taste = localStorage.getItem('favoriteflavor');
+ // -> null
+
+You can also use sessionStorage instead of localStorage if you want the data to be maintained only until the browser window closes.
+
-custom thing chance ratios for each level
- 1: no llamas
- 2: no llamas
- 3: llamas
better level complete animation
zoom in random cat picture?
+
title screen -> level select -> help -> startgame
certain levels have help screens (ie. lev 1 is initial help)
remember which level you're up to
-after each level, show cat picture.
-
complex goal: form x parades of length y
diff --git a/upload.sh b/upload.sh
new file mode 100755
index 0000000..d5b5058
--- /dev/null
+++ b/upload.sh
@@ -0,0 +1,2 @@
+#!/bin/sh
+scp -r cat.html images rob@slime:/var/www/slime.nethack.net/cat/catparade/