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 ?