*add firework effect for attaining goals

cat.html

@@ -181,6 +181,12 @@ var THINGSIZE = null;
 var GRIDW = null;
 var GRIDH = null;
 
+var FIREWORKSIZE = 5;
+var FIREWORKFADESPEED = 0.015;
+var FIREWORKSHARDS = 32;
+var FIREWORKCOUNT = 4;
+var FIREWORKTRAILLEN = 5;
+
 var MAXDIRS = 4;
 var DIRXMOD = [ 0, 1, 0, -1 ];
 var DIRYMOD = [ -1, 0, 1, 0 ];
@@ -1104,7 +1110,39 @@ var game = {
 
 	canvas: null,
 
-	addfirework : function() {
+	addfireworks : function() {
+		var delay = 0;
+		for (i = 0; i < FIREWORKCOUNT; i++) {
+			this.addfirework(delay);
+			delay += 5;
+		}
+	},
+
+	addfirework : function(delay) {
+		var i,nshards = FIREWORKSHARDS;
+		var x,y,col;
+		switch (rnd(6)) {
+			case 0: col = "#ff0000"; break;
+			case 1: col = "#00ff00"; break;
+			case 2: col = "#0000ff"; break;
+			case 3: col = "#ffff00"; break;
+			case 4: col = "#00ffff"; break;
+			case 5: col = "#ff00ff"; break;
+			default: col = "#ff0000"; break;
+		}
+		x = rnd(GRIDW);
+		y = rnd(GRIDH);
+		console.log("adding fw at " + x + "," + y);
+		for (i = 0; i < nshards; i++) {
+			things.push(new thing(x, y, "firework", "firework-text", col));
+			if (delay != undefined) {
+				things[things.length-1].delay = delay;
+			}
+		}
+	},
+
+
+	addflash : function() {
 		this.screenflash = 1.0;
 		game.dirty = true;
 	},
@@ -1498,8 +1536,8 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 					this.levels[curlevel].goals[i].progress = this.levels[curlevel].goals[i].count;
 
 					// add goal animation - fireworks ?
-					//things.push(new thing(2,2, "text", "Goal!"));
+					game.addflash();
-					this.addfirework();
+					game.addfireworks();
 				}
 			}
 		}
@@ -4548,7 +4586,8 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 			}
 			game.dirty = true;
 		} else if (ch == 't') {
-			game.addfirework();
+			game.addflash();
+			game.addfireworks();
 		} else if (ch == 'l') {
 			var what;
 			console.log("changing last clicked thing thing at " + lastmx/GRIDSIZE + "," + lastmy/GRIDSIZE );
@@ -4794,6 +4833,7 @@ console.log("lev " + lev + " newwid " + newwid + " ratio " + ratio);
 			//tapy = BOARDY + ((GRIDH*GRIDSIZE)/2) - (taph/2);
 			tapx = 0;
 			tapy = BOARDY;
+
 		} else if (newstate == "running") {
 			this.initlevelvars();
 			this.populategrid();
@@ -5132,7 +5172,7 @@ function collectprize(bag) {
 
 	if (bag.prize == "") return;
 	
-	game.addfirework();
+	game.addflash();
 
 	switch (bag.prize) {
 		case "tissues": // all sleepy cats wake up
@@ -5320,6 +5360,9 @@ function thing(gridx, gridy, type, text, col) {
 	this.slashes = []; // drawing slashes on bricks when damaged
 			// list x,y coords. 0=x1  1=y2  3=x2  4=y2  etc.
 
+	this.lastx = []; // for firework trails
+	this.lasty = [];
+
 	if (type == "random") {
 		type = getrandomtype();
 		//console.log("got random type "+ type);
@@ -5377,6 +5420,8 @@ function thing(gridx, gridy, type, text, col) {
 		} else {
 			this.size = TEXTSIZE;
 		}
+	} else if (this.type == "firework") {
+		this.size = FIREWORKSIZE;
 	} else {
 		this.size = THINGSIZE;
 	}
@@ -5404,6 +5449,8 @@ function thing(gridx, gridy, type, text, col) {
 	}
 	this.gridy = gridy;
 
+	this.delay = 0; // for fireworks
+
 	this.expcount = 0;
 	this.expfadespeed = 0;
 	this.expmax = 0;
@@ -5414,6 +5461,9 @@ function thing(gridx, gridy, type, text, col) {
 	} else if (this.type == "brickpop") {
 		this.yspeed = 0 - rndfloat(8);
 		this.xspeed = rndfloat(32) - 16;
+	} else if (this.type == "firework") {
+		this.yspeed = 0 - rndfloat(16);
+		this.xspeed = rndfloat(16) - 8;
 	} else {
 		this.yspeed = 0;
 		this.xspeed = 0;
@@ -5648,6 +5698,11 @@ function thing(gridx, gridy, type, text, col) {
 
 		//ctx = game.context;
 
+		// don't draw delaying things
+		if (this.delay > 0) {
+			return;
+		}
+
 		// check whether I'm in the drawn path
 		if (pathcontains(this)) {
 			inpath = true;
@@ -5658,11 +5713,58 @@ function thing(gridx, gridy, type, text, col) {
 			ctx.globalAlpha = this.opacity;
 		}
 
+
 		// draw myself
 		if (this.type == "text") {
 			ctx.textAlign = "center";
 			ctx.textBaseline = "middle";
 			shadowtext(ctx, this.name, this.size, this.color, BOARDX + this.x,BOARDY + this.y);
+		} else if (this.type == "firework") {
+			var myx,myy;
+
+
+			// draw trail
+			if (this.lastx != undefined) {
+				var i;
+				for (i = 0; i < this.lastx.length ; i++) {
+					var newopac = this.opacity + ((i+1)*FIREWORKFADESPEED);
+					var nextx,netxy;
+					if (newopac > 1) newopac = 1;
+
+/*
+					if (i == 0) {
+						nextx = this.x - this.size/2;
+						nexty = this.y - this.size/2;
+					} else {
+						nextx = this.lastx[i-1] - this.size/2;
+						nexty = this.lasty[i-1] - this.size/2;
+					}
+*/
+					myx = this.lastx[i] - this.size/2;
+					myy = this.lasty[i] - this.size/2;
+
+//console.log("fw line:  " + myx + "," + myy + " -> " + nextx + "," + nexty);
+
+					ctx.globalAlpha = newopac;
+					ctx.fillStyle = this.color;
+					ctx.lineWidth = this.size;
+					ctx.fillRect(BOARDX + myx, BOARDY + myy, this.size, this.size);
+/*
+					drawline(ctx, BOARDX + myx, BOARDY + myy, 
+						      BOARDX + nextx, BOARDY + nexty, 
+							this.col, this.size);
+*/
+					ctx.globalAlpha = 1.0;
+				}
+			}
+
+			myx = this.x - this.size/2;
+			myy = this.y - this.size/2;
+
+			ctx.globalAlpha = this.opacity;
+			ctx.fillStyle = this.color;
+			ctx.fillRect(BOARDX + myx, BOARDY + myy, this.size, this.size);
+			ctx.globalAlpha = 1.0;
 		} else {
 			var myimage;
 			if (this.type == "cat") {
@@ -5954,6 +6056,9 @@ function thing(gridx, gridy, type, text, col) {
 
 	this.isanimating = function() {
 		if (this.type == "text") return true;
+		if (this.type == "firework") return true;
+		if (this.type == "bagpop") return true;
+		if (this.type == "brickpop") return true;
 		if (this.state == "explode") return true;
 		if (this.state == "shrink") return true;
 		if (this.state == "parade") return true;
@@ -6059,32 +6164,72 @@ function thing(gridx, gridy, type, text, col) {
 		var dofall = false;
 		var belowthing = null,atbottom = false;
 
-
+		if (this.type == "firework" && this.delay > 0) {
-		if ((this.type == "bagpop") || (this.type == "brickpop")) {
+			this.delay--;
+		} else if ((this.type == "bagpop") || (this.type == "brickpop") || (this.type == "firework")) {
 			game.dirty = true; // need to redraw
 
 			// regular gravity
-			if ((this.gridy >= GRIDH-1)) {
+			if (this.type == "firework") {
-				atbottom = true;
+				if (this.y >= SCREENH) {
+					atbottom = true;
+				}
+			} else {
+				if ((this.gridy >= GRIDH-1)) {
+					atbottom = true;
+				}
 			}
 			if (!atbottom) {
 				game.dirty = true; // need to redraw
 				// accelerate
 				this.yspeed += GRAVITY;
 
+				// remember previous positions
+				if (this.type == "firework") {
+					// add current position to trail 
+					this.lastx.push(this.x);
+					this.lasty.push(this.y);
+
+					// remove old positions from trail
+					while (this.lastx.length >= FIREWORKTRAILLEN) {
+						this.lastx.splice(0, 1);
+					}
+					while (this.lasty.length >= FIREWORKTRAILLEN) {
+						this.lasty.splice(0, 1);
+					}
+				}
+
 				// move
 				this.y += this.yspeed;
 				this.x += this.xspeed;
 
 				// don't go below bottom of screen
-				if (this.y > GRIDSIZE * GRIDH) {
+				if (this.type == "firework") {
-					atbottom = true;
+					if (this.y >= SCREENH) {
+						atbottom = true;
+					}
+				} else {
+					if (this.y > GRIDSIZE * GRIDH) {
+						atbottom = true;
+					}
 				}
 		
 				// calc new gridx / gridy
 				this.calcgridxy();
 
-				if ((this.gridy >= GRIDH-1)) {
+				if (this.type != "firework") {
+					if ((this.gridy >= GRIDH-1)) {
+						atbottom = true;
+					}
+				}
+
+			}
+
+			// fade
+			if (this.type == "firework") {
+				this.opacity -= FIREWORKFADESPEED;
+				if (this.opacity <= 0) {
+					this.opacity = 0;
 					atbottom = true;
 				}
 			}
@@ -6366,13 +6511,13 @@ function mainloop() {
 			game.drawsides(); 
 			// draw non-animating objects
 			for (i = 0; i < things.length; i += 1) {
-				if (!things[i].isanimating()) {
+				if (!things[i].isanimating() && things[i].type != "firework") {
 					things[i].draw();
 				}
 			}
 			// draw animating objects
 			for (i = 0; i < things.length; i += 1) {
-				if (things[i].isanimating()) {
+				if (things[i].isanimating() && things[i].type != "firework") {
 					things[i].draw();
 				}
 			}
@@ -6385,6 +6530,17 @@ function mainloop() {
 			if ((game.state == "levelcomplete") || (game.state == "gameover")) {
 				// draw buttons
 				game.drawcontinuebutton();
+				// spawn new fireworks
+				if (countthingsoftype("firework") < (FIREWORKSHARDS*2)) {
+					game.addfirework();
+				}
+			}
+
+			// draw fireworks
+			for (i = 0; i < things.length; i += 1) {
+				if (things[i].type == "firework") {
+					things[i].draw();
+				}
 			}
 
 

todo

@@ -11,33 +11,14 @@ https://www.smashingmagazine.com/2012/10/design-your-own-mobile-game/
 
 -------------------
 
-
+*add firework effect for attaining goals
-*move goal progress increments to thing.kill() function
-*Make 'allowedthings' default to previous level's one.
-*fix lev6 help
-*bugfix: whitecats aren't ever appearing randomly?
-*new object: bricks
-*Don't allow extending path off the top of the grid.
-*fix incorrect pluralisation "foods" in goal text
-
-??????????????
-no points for cats hitting bricks
-	give points when things DIE, not when you start a parade.
-	make points for parades come from the _side_ of the screen.
-		(where the cats/whatever disappear)
-
-	make kill() take an arg ("don't give progress/points")
-
-	adjust brick points goal
-??????????????
 
 new door fell down on top of new goat!!
 	(or the other way around ??)
 	check code for doors falling when off the top of the screen.
 	check code for adding new objects at top of screen.
 
-Powerup to break bricks
+Powerup to break bricks (but only after bricks appear)
-
 
 other colour cats