diff --git a/cat.html b/cat.html
index 8b42c80..2f65dc7 100644
--- a/cat.html
+++ b/cat.html
@@ -141,6 +141,7 @@ var wipe = {
//var FULLSTAR = "\u2605";
//var EMPTYSTAR = "\u2606";
+var STARWID_TOPGOALS = 16;
var STARWID_LEVSEL = 16;
var STARWID_LEVSEL_LOCKED = 16;
var STARWID_LEVSEL_TOP = 24;
@@ -978,10 +979,14 @@ var game = {
},
incloadprogress : function() {
+ /*
setTimeout(function () {
nimages++;
console.log(nimages + " / " + maximages + " images loaded.");
}, (rnd(3)+1) * 1000);
+ */
+ nimages++;
+ console.log(nimages + " / " + maximages + " images loaded.");
},
drawloader : function() {
@@ -997,12 +1002,16 @@ var game = {
init : function() {
this.canvas = document.createElement("canvas");
+ this.stargoalbanner = document.createElement("canvas");
this.hratio = SCREENH / SCREENW;
this.wratio = SCREENW / SCREENH;
this.curw = SCREENW;
this.curh = SCREENH;
+ this.stargoalbanner.width = SCREENW;
+ this.stargoalbanner.height = STARWID_TOPGOALS;
+
this.canvas.width = SCREENW;
this.canvas.height = SCREENH;
@@ -1537,11 +1546,10 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
if (game.state == "running") {
var y1 = 10;
- var y2 = 26;
+ var y2 = 20;
var y3 = 45;
var x,y = 10;
-
// show level
/*
ctx.font = "16pt Futura";
@@ -1555,25 +1563,20 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
ctx.textBaseline = "middle";
shadowtext(ctx, "Level " + curlevel, LEVELTEXTSIZE, "#00aaee", SCREENW/2, y1);
- // show star targets
+ // just blit pre-generated star goal targets
+ ctx.drawImage(this.stargoalbanner, 0, y2, this.stargoalbanner.width, this.stargoalbanner.height);
+
+
+ /*
var starsize = 10;
var starindent = 16;
var startextcol = "#eeee00";
var startextcoldark = "#999900";
x = SCREENW/4;
- // TODO: use star inage. draw on temp
- // canvas buffer. compute at start of
- // level then just re use it.
+ // TODO: use star image instead.
for (i = 0; i < 3; i++) {
var n,starx,stars = "";
for (n = 0; n < (i+1); n++) {
- /*
- if (n == 0) {
- starx = (SCREENW/4)
- } else if
- drawcross(ctx, starx, y, starx + starsize, y + starsize, startextcol, 2);
- starx += starsize*1.5;
- */
stars = stars + "\u2605"
}
@@ -1584,6 +1587,7 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
x, y2);
x += (SCREENW / 4);
}
+ */
// show score
ctx.textAlign = "left";
@@ -3373,6 +3377,71 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
}
},
+ generatestargoalbanner : function() {
+ var i,x,y;
+ var topctx = this.stargoalbanner.getContext("2d");
+
+ // show star targets
+ var starsize = STARWID_TOPGOALS;
+ var spacewid = starsize / 2;
+ var starindent = 16;
+ var startextcol = "#eeee00";
+ var startextcoldark = "#999900";
+
+ x = SCREENW/4;
+ y = 0;
+
+ // clear top buffer
+ topctx.clearRect(0, 0, this.stargoalbanner.width, this.stargoalbanner.height);
+
+ // for each points goal, generate a temp image and paste it.
+ for (i = 0; i < 3; i++) {
+ var xx = 0,yy = 0;
+ var n;
+ var textw,pointtext;
+
+ // create third temp buffer for this star images + points
+ var a = document.createElement("canvas");
+ var actx = a.getContext("2d");
+
+ // figure out how big text will be
+ pointtext = addcommas(game.levels[curlevel].starpoints[i]);
+ textw = gettextw(actx, pointtext, STARPOINTTEXTSIZE);
+
+ // size third temp buffer based on text width
+ a.width = starsize*3 + spacewid + textw;
+ a.height = this.stargoalbanner.height;
+ a.id = "a";
+
+ actx.clearRect(0, 0, a.width, a.height);
+
+
+ for (n = 0; n < (i+1); n++) {
+ // draw star on to third buffer
+ actx.drawImage(image['starfull'], xx, yy, starsize, starsize);
+ xx += starsize;
+ }
+
+ xx += starsize/4;
+
+ // draw text on to third buffer
+ actx.textAlign = "left";
+ actx.textBaseline = "top";
+ shadowtext(actx, pointtext, STARPOINTTEXTSIZE,
+ (score >= game.levels[curlevel].starpoints[i]) ? startextcol : startextcoldark,
+ xx, yy);
+
+
+ // blit third buffer to top buffer then move along
+//console.log("i: " + i + ", x = " + x + " y = " + y + " a.dims = " + a.width + "," + a.height);
+ topctx.drawImage(a, x - a.width/2, y, a.width, a.height);
+ x += (SCREENW / 4);
+
+ // remove temp third buffer
+ //document.removeChild(document.getElementById("a"));
+ }
+ },
+
setstate : function(newstate) {
@@ -3408,7 +3477,6 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
tapx = 0;
tapy = BOARDY;
} else if (newstate == "running") {
-
this.initlevelvars();
this.populategrid();
@@ -3419,6 +3487,9 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
winimg.src = "images/win" + n + ".png";
this.winimgsize = 0.1;
+ // generate starpoint goal banner for top of screen
+ this.generatestargoalbanner();
+
wipe.start("", "in", 50);
} else if (newstate == "levselect") {
// reset grid size
diff --git a/todo b/todo
index f920948..e85ca4a 100644
--- a/todo
+++ b/todo
@@ -8,6 +8,16 @@ https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/
----------
+images for star goals.
+ On level init:
+ make temp topbuffer - SCREENW x hight
+ 3 x
+ make temp buffer - starwid + textwid(" = 6,000");
+ blit to temp topbuffer
+
+ In drawtop(){
+ blit topbuffer to screen
+
white outline ?