Frogot to add title image.
added support for variable help on levels
This commit is contained in:
Rob Pearce
parent
b0f3ec030c
commit
1ff28b5ef0
442
cat.html
442
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);
|
||||
// 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);
|
||||
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();
|
||||
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);
|
||||
drawarrow(ctx, x + (imgsize/2), y + (imgsize/2),
|
||||
x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
|
||||
|
||||
cury = y2 + gridsize;
|
||||
cury = y2 + gridsize;
|
||||
|
||||
// row 2
|
||||
x = imgsize;
|
||||
y = cury;
|
||||
row2y = y;
|
||||
ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
|
||||
// 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 = 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);
|
||||
|
||||
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);
|
||||
drawarrow(ctx, x + (imgsize/2), y + (imgsize/2),
|
||||
x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
|
||||
|
||||
cury = y2 + gridsize;
|
||||
cury = y2 + gridsize;
|
||||
|
||||
// arrow to middle
|
||||
x = x2 + gridsize;
|
||||
y = row1y + (imgsize);
|
||||
// arrow to middle
|
||||
x = x2 + gridsize;
|
||||
y = row1y + (imgsize);
|
||||
|
||||
x2 = x + gridsize*1.5;
|
||||
y2 = y;
|
||||
x2 = x + gridsize*1.5;
|
||||
y2 = y;
|
||||
|
||||
drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
|
||||
drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
|
||||
|
||||
// middle
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "top";
|
||||
// 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);
|
||||
// arrow to right
|
||||
x = midpoint1 + gridsize + 10;
|
||||
y = row1y + (imgsize);
|
||||
|
||||
x2 = SCREENW - imgsize*2;
|
||||
y2 = y;
|
||||
x2 = SCREENW - imgsize*2;
|
||||
y2 = y;
|
||||
|
||||
drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
|
||||
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);
|
||||
// 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;
|
||||
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;
|
||||
// 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);
|
||||
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);
|
||||
x += gridsize;
|
||||
y = cury;
|
||||
ctx.drawImage(image['llama'], x, y, imgsize, imgsize);
|
||||
|
||||
x += gridsize;
|
||||
y = cury;
|
||||
ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
|
||||
x += gridsize;
|
||||
y = cury;
|
||||
ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
|
||||
|
||||
cury += textyspace;
|
||||
cury += textyspace;
|
||||
cury += textyspace;
|
||||
cury += textyspace;
|
||||
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;
|
||||
// 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;
|
||||
|
||||
// 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;
|
||||
// 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;
|
||||
|
||||
ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
|
||||
linex[3] = x + imgsize/2;
|
||||
liney[3] = y + imgsize/2;
|
||||
x += gridsize;
|
||||
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;
|
||||
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;
|
||||
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['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['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;
|
||||
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);
|
||||
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
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
41
todo
41
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
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue