rob/catparade
rob
/
catparade
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Frogot to add title image. 

added support for variable help on levels
This commit is contained in:
Rob Pearce 2016-08-21 09:57:40 +10:00
parent b0f3ec030c
commit 1ff28b5ef0
4 changed files with 279 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

442
cat.html
View File

@ -523,6 +523,13 @@ function addcommas(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 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) { function drawcross(x, y, x2, y2, col, width) {
// cross out // cross out
ctx.fillStyle = col ctx.fillStyle = col
@ -672,6 +679,7 @@ var game = {
initgamevars : function() { initgamevars : function() {
score = 0; score = 0;
this.frameNo = 0;
}, },
initlevelvars : function() { initlevelvars : function() {
@ -684,18 +692,23 @@ var game = {
pathvalid = false; pathvalid = false;
}, },
// goal1type goal1count goal2type goal2count etc... addlevel: function (lev, hashelp) {
addlevel : function () { var mylevel;
var i,mylevel,idx;
mylevel = new Object(); mylevel = new Object();
mylevel.hashelp = hashelp;
mylevel.goals = new Array(); mylevel.goals = new Array();
for (i = 0 ; i < arguments.length; i += 2) { this.levels[lev] = mylevel;
idx = mylevel.goals.push(new Object()) - 1; },
mylevel.goals[idx].type = arguments[i];
mylevel.goals[idx].count = arguments[i+1]; // goal1type goal1count goal2type goal2count etc...
mylevel.goals[idx].progress = 0; 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 // earn progress towards goals
@ -722,13 +735,15 @@ var game = {
console.log("doing level init"); console.log("doing level init");
this.levels = []; this.levels = [];
this.addlevel(); // dummy level with 0 goals this.addlevel(1, true);
this.addlevel("food", 10); this.addlevelgoals(1, "food", 10);
this.addlevel("points", 200);
this.addlevel(2, false);
this.addlevelgoals(2, "points", 200);
/* /*
for (i = 0; i < this.levels.length; i++) { for (i = 1; i < this.levels.length; i++) {
console.log("Level " + (i+1) + " goals:"); console.log("Level " + (i) + " goals:");
for (n = 0; n < this.levels[i].goals.length; n++) { for (n = 0; n < this.levels[i].goals.length; n++) {
console.log(GOALVERB[this.levels[i].goals[n].type] + " " + console.log(GOALVERB[this.levels[i].goals[n].type] + " " +
this.levels[i].goals[n].count + " " + this.levels[i].goals[n].count + " " +
@ -738,9 +753,7 @@ var game = {
*/ */
}, },
nextlevel : function() { startlevel : function() {
curlevel++;
this.initlevelvars(); this.initlevelvars();
this.populategrid(); 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() { clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 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); shadowtext(this.context, "Tap to start", TITLESTARTTEXTSIZE, "#00dd00", SCREENW / 2, SCREENH - 64);
}, },
// return TRUE if there is no help for this level
drawhelp : function() { drawhelp : function() {
var divamt = 2; var divamt = 2;
var imgsize = THINGSIZE / divamt; var imgsize = THINGSIZE / divamt;
@ -1010,7 +1012,6 @@ var game = {
var midpoint1 = SCREENW/8 * 5; var midpoint1 = SCREENW/8 * 5;
var midpoint2 = SCREENW/8 * 4; var midpoint2 = SCREENW/8 * 4;
ctx = this.context; ctx = this.context;
// background // background
@ -1021,226 +1022,231 @@ var game = {
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
ctx.fillRect(0, 0, SCREENW, SCREENH); ctx.fillRect(0, 0, SCREENW, SCREENH);
// top text if (curlevel == 1) {
cury = textyspace*2; // top text
ctx.textAlign = "center"; cury = textyspace*2;
ctx.textBaseline = "bottom"; ctx.textAlign = "center";
shadowtext(ctx, "Instructions", HELPTITLESIZE,"#00aaee", SCREENW / 2, cury); ctx.textBaseline = "bottom";
cury += textyspace; shadowtext(ctx, "Instructions", HELPTITLESIZE,"#00aaee", SCREENW / 2, cury);
cury += textyspace; cury += textyspace;
cury += textyspace;
ctx.textAlign = "left"; ctx.textAlign = "left";
ctx.textBaseline = "bottom"; ctx.textBaseline = "bottom";
shadowtext(ctx, "Drag a cat to eat cheese.", HELPTEXTSIZE,"#00cc00", textxspace, cury); shadowtext(ctx, "Drag a cat to eat cheese.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
cury += textyspace; cury += textyspace;
shadowtext(ctx, " - Cats can eat any amount of cheese, but only in a straight line.", HELPTEXTSIZE,"#00cc00", textxspace, cury); shadowtext(ctx, " - Cats can eat any amount of cheese, but only in a straight line.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
cury += textyspace; cury += textyspace;
shadowtext(ctx, " - Cats get tired after eating and cannot eat again.", HELPTEXTSIZE,"#00cc00", textxspace, cury); shadowtext(ctx, " - Cats get tired after eating and cannot eat again.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
cury += textyspace; cury += textyspace;
// help on eating // help on eating
// row 1 // row 1
x = imgsize; x = imgsize;
y = cury; y = cury;
row1y = y; row1y = y;
ctx.drawImage(image['cat'], x, y, imgsize, imgsize); ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
x2 = x + gridsize; x2 = x + gridsize;
y2 = y; y2 = y;
ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize); ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
ctx.strokeStyle = "green"; ctx.strokeStyle = "green";
ctx.lineWidth = LINEWIDTH; ctx.lineWidth = LINEWIDTH;
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(x + imgsize/2, y + imgsize/2); ctx.moveTo(x + imgsize/2, y + imgsize/2);
ctx.lineTo(x2 + imgsize/2, y2 + imgsize/2); ctx.lineTo(x2 + imgsize/2, y2 + imgsize/2);
ctx.stroke(); ctx.stroke();
drawarrow(ctx, x + (imgsize/2), y + (imgsize/2), drawarrow(ctx, x + (imgsize/2), y + (imgsize/2),
x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE); x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
cury = y2 + gridsize; cury = y2 + gridsize;
// row 2 // row 2
x = imgsize; x = imgsize;
y = cury; y = cury;
row2y = y; row2y = y;
ctx.drawImage(image['cat'], x, y, imgsize, imgsize); ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
x2 = x + gridsize; x2 = x + gridsize;
y2 = y; y2 = y;
ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize); ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
x2 = x2 + gridsize; x2 = x2 + gridsize;
y2 = y; y2 = y;
ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize); ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
x2 = x2 + gridsize; x2 = x2 + gridsize;
y2 = y; y2 = y;
ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize); ctx.drawImage(image['cheese'], x2, y2, imgsize, imgsize);
drawarrow(ctx, x + (imgsize/2), y + (imgsize/2), drawarrow(ctx, x + (imgsize/2), y + (imgsize/2),
x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE); x2 + (imgsize/2), y2 + (imgsize/2), "green", LINEWIDTH, PATHARROWSIZE);
cury = y2 + gridsize; cury = y2 + gridsize;
// arrow to middle // arrow to middle
x = x2 + gridsize; x = x2 + gridsize;
y = row1y + (imgsize); y = row1y + (imgsize);
x2 = x + gridsize*1.5; x2 = x + gridsize*1.5;
y2 = y; y2 = y;
drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE); drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
// middle // middle
ctx.textAlign = "center"; ctx.textAlign = "center";
ctx.textBaseline = "top"; ctx.textBaseline = "top";
x = midpoint1; x = midpoint1;
y = row1y+10; y = row1y+10;
shadowtext(ctx, "+" + FOODPOINTS + " points", HELPTEXTSIZE,"#cccc00", x, y); shadowtext(ctx, "+" + FOODPOINTS + " points", HELPTEXTSIZE,"#cccc00", x, y);
y = row2y-10; y = row2y-10;
shadowtext(ctx, "per cheese", HELPTEXTSIZE,"#cccc00", x, y); shadowtext(ctx, "per cheese", HELPTEXTSIZE,"#cccc00", x, y);
// arrow to right // arrow to right
x = midpoint1 + gridsize + 10; x = midpoint1 + gridsize + 10;
y = row1y + (imgsize); y = row1y + (imgsize);
x2 = SCREENW - imgsize*2; x2 = SCREENW - imgsize*2;
y2 = y; y2 = y;
drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE); drawarrow(ctx, x, y, x2, y2, "red", HELPLINEWIDTH, HELPARROWSIZE);
// right // right
x = SCREENW - imgsize*2; x = SCREENW - imgsize*2;
y = row1y; y = row1y;
ctx.drawImage(image['catfull'], x, y, imgsize, imgsize); ctx.drawImage(image['catfull'], x, y, imgsize, imgsize);
y = row2y; y = row2y;
ctx.drawImage(image['catfull'], x, y, imgsize, imgsize); ctx.drawImage(image['catfull'], x, y, imgsize, imgsize);
cury += textyspace; cury += textyspace;
cury += textyspace; cury += textyspace;
cury += textyspace; cury += textyspace;
// LLAMA HELP // LLAMA HELP
ctx.textAlign = "left"; ctx.textAlign = "left";
ctx.textBaseline = "bottom"; ctx.textBaseline = "bottom";
shadowtext(ctx, "Cats are scared of " + llamatext + "s and can't move when near them.", HELPTEXTSIZE,"#00cc00", textxspace, cury); shadowtext(ctx, "Cats are scared of " + llamatext + "s and can't move when near them.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
cury += textyspace; cury += textyspace;
x = (SCREENW / 2) - gridsize/2 - gridsize; x = (SCREENW / 2) - gridsize/2 - gridsize;
y = cury; y = cury;
ctx.drawImage(image['catscared'], x, y, imgsize, imgsize); ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
x += gridsize; x += gridsize;
y = cury; y = cury;
ctx.drawImage(image['llama'], x, y, imgsize, imgsize); ctx.drawImage(image['llama'], x, y, imgsize, imgsize);
x += gridsize; x += gridsize;
y = cury; y = cury;
ctx.drawImage(image['catscared'], x, y, imgsize, imgsize); 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 // PARADE HELP
ctx.textAlign = "left"; ctx.textAlign = "left";
ctx.textBaseline = "bottom"; ctx.textBaseline = "bottom";
shadowtext(ctx, "Drag a path through multiple cats to start a parade.", HELPTEXTSIZE,"#00cc00", textxspace, cury); shadowtext(ctx, "Drag a path through multiple cats to start a parade.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
cury += textyspace; cury += textyspace;
shadowtext(ctx, " - Parades can turn corners.", HELPTEXTSIZE,"#00cc00", textxspace, cury); shadowtext(ctx, " - Parades can turn corners.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
cury += textyspace; cury += textyspace;
shadowtext(ctx, " - Parades can include one " + llamatext + " only.", HELPTEXTSIZE,"#00cc00", textxspace, cury); shadowtext(ctx, " - Parades can include one " + llamatext + " only.", HELPTEXTSIZE,"#00cc00", textxspace, cury);
cury += textyspace; cury += textyspace;
// top line of parade // top line of parade
x = imgsize; x = imgsize;
y = cury; y = cury;
row1y = y; row1y = y;
ctx.drawImage(image['cat'], x, y, imgsize, imgsize); ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
linex[0] = x + imgsize/2; linex[0] = x + imgsize/2;
liney[0] = y + imgsize/2; liney[0] = y + imgsize/2;
x += gridsize; x += gridsize;
ctx.drawImage(image['catscared'], x, y, imgsize, imgsize); ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
linex[3] = x + imgsize/2; linex[3] = x + imgsize/2;
liney[3] = y + imgsize/2; liney[3] = y + imgsize/2;
x += gridsize; x += gridsize;
ctx.drawImage(image['llama'], x, y, imgsize, imgsize); ctx.drawImage(image['llama'], x, y, imgsize, imgsize);
linex[4] = x + imgsize/2; linex[4] = x + imgsize/2;
liney[4] = y + imgsize/2; liney[4] = y + imgsize/2;
x += gridsize; x += gridsize;
x = imgsize; x = imgsize;
y += gridsize; y += gridsize;
row2y = y; row2y = y;
ctx.drawImage(image['cat'], x, y, imgsize, imgsize); ctx.drawImage(image['cat'], x, y, imgsize, imgsize);
linex[1] = x + imgsize/2; linex[1] = x + imgsize/2;
liney[1] = y + imgsize/2; liney[1] = y + imgsize/2;
x += gridsize; x += gridsize;
ctx.drawImage(image['catfull'], x, y, imgsize, imgsize); ctx.drawImage(image['catfull'], x, y, imgsize, imgsize);
linex[2] = x + imgsize/2; linex[2] = x + imgsize/2;
liney[2] = y + imgsize/2; liney[2] = y + imgsize/2;
x += gridsize; x += gridsize;
ctx.drawImage(image['catscared'], x, y, imgsize, imgsize); ctx.drawImage(image['catscared'], x, y, imgsize, imgsize);
linex[5] = x + imgsize/2; linex[5] = x + imgsize/2;
liney[5] = y + imgsize/2; liney[5] = y + imgsize/2;
cury = y + textyspace; cury = y + textyspace;
for (i = 0; i < 4; i++) { for (i = 0; i < 4; i++) {
drawline(ctx, linex[i], liney[i], linex[i+1], liney[i+1], "green", LINEWIDTH); 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() { drawgrid : function() {
@ -1357,13 +1363,22 @@ var game = {
} else if (game.state == "gameover") { } else if (game.state == "gameover") {
game.setstate("title"); game.setstate("title");
} else if (game.state == "title") { } else if (game.state == "title") {
game.setstate("help"); curlevel = 1;
game.initgamevars();
game.helporstartlev();
} else if (game.state == "help") { } else if (game.state == "help") {
game.startgame(); game.startlevel();
} else if (game.state == "levelcomplete") { } else if (game.state == "levelcomplete") {
// TODO : show help for this level curlevel++;
// TODO: start next levle game.helporstartlev();
game.nextlevel(); }
},
helporstartlev : function() {
if (hashelp(curlevel)) {
game.setstate("help");
} else {
game.startlevel();
} }
}, },
@ -2141,7 +2156,8 @@ function mainloop() {
if (game.state == "title") { if (game.state == "title") {
game.drawtitle(); game.drawtitle();
} else if (game.state == "help") { } else if (game.state == "help") {
game.drawhelp(); if (game.drawhelp()) {
}
} else { } else {
game.drawgrid(); // draw grid game.drawgrid(); // draw grid
// move objects // move objects

BIN
images/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

41
todo
View File

@ -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/ https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/
*create diff levels with goals *implement support for level-specific help text
*display goals at bottom of screen
*implement progress() to earn progress towards goals
*go to next level after meeting all goals
implement level-specific help text custom thing chance ratios for each level
when starting a levle, go to 'help text' state if it has one. 1: no llamas
if not, just start the level 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 Level selection screen
grid of numbers for each level grid of numbers for each level
@ -48,24 +53,32 @@ Level selection screen
scrolling background of cat paws ? 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 better level complete animation
zoom in random cat picture? zoom in random cat picture?
title screen -> level select -> help -> startgame title screen -> level select -> help -> startgame
certain levels have help screens (ie. lev 1 is initial help) certain levels have help screens (ie. lev 1 is initial help)
remember which level you're up to remember which level you're up to
after each level, show cat picture.
complex goal: form x parades of length y complex goal: form x parades of length y

2
upload.sh Executable file
View File

@ -0,0 +1,2 @@
#!/bin/sh
scp -r cat.html images rob@slime:/var/www/slime.nethack.net/cat/catparade/