diff --git a/cat.html b/cat.html
index 5c4d2d7..0a019c2 100644
--- a/cat.html
+++ b/cat.html
@@ -8,8 +8,8 @@
-
-
+
+
@@ -130,8 +130,13 @@ var wipe = {
},
};
-var FULLSTAR = "\u2605";
-var EMPTYSTAR = "\u2606";
+//var FULLSTAR = "\u2605";
+//var EMPTYSTAR = "\u2606";
+
+var STARWID_LEVSEL = 16;
+var STARWID_LEVSEL_LOCKED = 16;
+var STARWID_LEVSEL_TOP = 24;
+var STARWID_ENDLEV = 32;
var DEF_GRIDSIZE = 80;
var DEF_THINGSIZE = 64;
@@ -576,13 +581,16 @@ function startGame() {
loadimage('catwalkl', 'images/catwalkl.png');
loadimage('catwalkr', 'images/catwalkr.png');
+ loadimage('starfull', 'images/starfull.png');
+ loadimage('starempty', 'images/starempty.png');
+
game.init();
game.initlevels();
playerdata.load();
- window.addEventListener('load', game.init, false);
+ //window.addEventListener('load', game.init, false);
window.addEventListener('resize', game.resize, false);
mainloop();
@@ -955,13 +963,16 @@ var game = {
screenflash: 0,
+ canvas: null,
+
addfirework : function() {
this.screenflash = 1.0;
},
- canvas : document.createElement("canvas"),
-
init : function() {
+
+ this.canvas = document.createElement("canvas");
+
this.ratio = SCREENW / SCREENH;
this.curw = SCREENW;
this.curh = SCREENH;
@@ -980,7 +991,6 @@ var game = {
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
- /*
// try to go full screen?
var body = document.documentElement;
if (body.requestFullscreen) {
@@ -992,7 +1002,6 @@ var game = {
} else if (body.msrequestFullscreen) {
body.msrequestFullscreen();
}
- */
this.resize();
@@ -1055,19 +1064,23 @@ var game = {
},
resize : function() {
- this.curh = window.innerHeight;
- this.curw = this.curh * this.ratio;
+ game.curh = window.innerHeight;
+ game.curw = game.curh * game.ratio;
// hide address bar on phones
- if (this.android || this.ios) {
+ if (game.android || game.ios) {
document.body.style.height = (window.innerHeight + 50) + 'px';
}
// 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';
+
+ // 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';
window.setTimeout(function() {
window.scrollTo(0, 1);
@@ -1789,34 +1802,34 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
y += TAPBUTTONSIZEC;
nstars = game.calcstars(curlevel, score);
- game.drawstars(ctx, SCREENW / 2, y, TAPBUTTONSIZESTAR, nstars);
+ game.drawstars(ctx, SCREENW / 2, y, TAPBUTTONSIZESTAR, nstars, STARWID_ENDLEV);
console.log("earned " + nstars + " stars");
}
},
- drawstars : function(ctx, x, y, size, stars) {
+ drawstars : function(ctx, x, y, size, stars, starwid) {
var i;
var starcol = "#dddd00";
- var starwid;
+ var starspace = starwid / 10;
var sx;
- starwid = gettextw(ctx, FULLSTAR, size);
-
- sx = x - (starwid);
+ sx = x - (starwid+starspace);
for (i = 1;i <= 3; i++) {
- var thiscol;
+ var thiscol,imgname;
if (stars >= i) {
- thiscol = starcol;
+ imgname = "starfull";
} else {
- thiscol = "black";
+ imgname = "starempty";
}
ctx.textAlign = "center";
ctx.textBaseline = "middle";
- shadowtext(ctx, FULLSTAR, size, thiscol, sx, y);
- sx += starwid;
+ this.context.drawImage(image[imgname], sx - (starwid/2), y - (starwid/2), starwid, starwid);
+
+ sx += starwid + starspace;
+
}
},
@@ -2958,6 +2971,8 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
var buttonyoff = 0;
var gridalpha = 1.0;
+ var topstarsize =
+
//ctx = this.context;
// background
@@ -2969,9 +2984,11 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
titleyoff = wipe.getval(titley*5, "down", "up", 0);
shadowtext(ctx, "Level Selection", TITLESIZELEVSELECT,titlecol, SCREENW / 2, titley - titleyoff);
+ ctx.drawImage(image['starfull'], LEVSEL_X, pstarsy - titleyoff, STARWID_LEVSEL_TOP, STARWID_LEVSEL_TOP);
+
ctx.textAlign = "left";
ctx.textBaseline = "top";
- shadowtext(ctx, FULLSTAR + " " + playerdata.totstars, TEXTSIZETOTSTARS,starcol, LEVSEL_X, pstarsy - titleyoff);
+ shadowtext(ctx, playerdata.totstars, TEXTSIZETOTSTARS,starcol, LEVSEL_X + STARWID_LEVSEL_TOP*1.2, pstarsy - titleyoff);
gridalpha = wipe.getval(1.0, "up", "down", 1.0);
@@ -3003,11 +3020,18 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
GRIDSIZE/2, GRIDSIZE/2);
// # stars to unlock
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
- shadowtext(ctx, FULLSTAR + " " + this.levels[levnum].starsrequired,
+
+ ctx.drawImage(image['starfull'],
+ LEVSEL_X + x + GRIDSIZE/2 - STARWID_LEVSEL_LOCKED*1.25,
+ LEVSEL_Y + y + GRIDSIZE - (GRIDSIZE/4) - (STARWID_LEVSEL_LOCKED/2),
+ STARWID_LEVSEL_LOCKED, STARWID_LEVSEL_LOCKED);
+
+ ctx.textAlign = "left";
+ ctx.textBaseline = "top";
+
+ shadowtext(ctx, this.levels[levnum].starsrequired,
TEXTSIZELEVSTARS, starcol,
- LEVSEL_X + x + GRIDSIZE/2, LEVSEL_Y + y + GRIDSIZE - (GRIDSIZE/4));
+ LEVSEL_X + x + GRIDSIZE/2, LEVSEL_Y + y + GRIDSIZE - (GRIDSIZE/4) - (STARWID_LEVSEL_LOCKED/2));
} else {
@@ -3033,7 +3057,7 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
starcount = 0;
}
- game.drawstars(ctx, LEVSEL_X + x + GRIDSIZE/2, stary, TEXTSIZELEVSTARS, starcount);
+ game.drawstars(ctx, LEVSEL_X + x + GRIDSIZE/2, stary, TEXTSIZELEVSTARS, starcount, STARWID_LEVSEL);
/*
stars = game.calcstartext(starcount);
@@ -3625,7 +3649,6 @@ function shadowtext(ctx, text, size, col, x, y) {
}
ctx.font = size + "pt " + FONT;
-//console.log("shadowtest() - font: " + ctx.font + " text: " + text);
// shadows
ctx.fillStyle = "black";
ctx.fillText(text, x-1, y-1);
diff --git a/images/starempty.png b/images/starempty.png
new file mode 100644
index 0000000..2043817
Binary files /dev/null and b/images/starempty.png differ
diff --git a/images/starfull.png b/images/starfull.png
new file mode 100644
index 0000000..dd75b97
Binary files /dev/null and b/images/starfull.png differ
diff --git a/todo b/todo
index e60f8ce..018a8e0 100644
--- a/todo
+++ b/todo
@@ -32,7 +32,8 @@ https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/
----------
-show star counts in dark if you haven't got them
+*use image instead of unicode for yellow stars.
+
----------