Raining Popsicles

Working on a new HTML5 game that involves popsicles...

Here is the popsicles drop test. The resources and code are documented below.

Images

Code

I am using BlocksJS to simplify the implementation.

(function () {
				
    var game, spec;
    
    spec = {
    	width: 800,
    	height: 600,
    	bg: {
    		src: "images/sweet-drop-bg.png"
    	},
    	popsicles:[{
    		name: "creamsicle",
    		slices: [{
    			name: "falling",
    			src: "images/creamsicle.png"
    		}, {
    			name: "crashed",
    			src: "images/creamsicle-broken.png"
    		}]
    	}, {
    		name: "bombpop",
    		slices: [{
    			name: "falling",
    			src: "images/bombpop.png"
    		}, {
    			name: "crashed",
    			src: "images/bombpop-broken.png"
    		}]
    	}, {
    		name: "popsicle",
    		slices: [{
    			name: "falling",
    			src: "images/popsicle.png"
    		}, {
    			name: "crashed",
    			src: "images/popsicle-broken.png"
    		}]
    	}, {
    		name: "pushUp",
    		slices: [{
    			name: "falling",
    			src: "images/push-up.png"
    		}, {
    			name: "crashed",
    			src: "images/push-up-broken.png"
    		}]
    	}]
    };
    
    game = BLOCKS.game(spec);
    
    game.prepare = function () {
    	var bg, index = 0,
    	
    		dropBomb = function () {
    		
    			var popsicle;
    		
				popsicle = BLOCKS.block(spec.popsicles[index]);
				index += 1;
				if (index >= spec.popsicles.length) {
					index = 0;
				}
    			//popsicle = BLOCKS.block(spec.popsicles[Math.floor(Math.random() * spec.popsicles.length)]);
				popsicle.layer = game.layers[0];
				game.stage.addView(popsicle);

    			popsicle.x = Math.random() * (game.width - popsicle.width * 2) + popsicle.width / 2;
    			popsicle.y = -popsicle.height;
    			game.addMotor("y", {
					object: popsicle,
					duration: 3000,
					amount: game.height,
					easing: "easeIn",
					callback: function () {
						popsicle.setSlice("crashed");
						game.addTicker(function () {
							game.addMotor("alpha", {
								object: popsicle,
								duration: 800,
								amount: -1,
								easing: "easeIn",
								callback: function () {
									game.stage.removeView(popsicle);
									popsicle.destroy();
									popsicle = null;
								}
							});
							game.addMotor("y", {
								object: popsicle,
								duration: 1000,
								amount: popsicle.height,
								easing: "easeIn"
							});
						}, 2000);
					}
				});
				
				game.addTicker(dropBomb, 1000);
    		};        	
    	
    	bg = BLOCKS.slice(spec.bg);
    	bg.layer = game.layers[0];
		game.stage.addView(bg);
		
		dropBomb();
    };
}());

Share This Post