Building an Isometric City Game - HTML5 Game Development - page 190

Engage thrusters
In the following steps, we add the diamond animaion to the stage and let the players click
on it:
1. We have a new display object so we will add the diamond sprite to the view-
sprites.js file:
(game.Diamond = function() {
cjs.Container.call(this); // super
var data = {
framerate: 16,
images: ['images/diamond-spritesheet.png'],
frames: {width:90, height:90},
};
var spritesheet = new cjs.SpriteSheet(data);
var diamondSprite = new cjs.Sprite(spritesheet);
diamondSprite.gotoAndPlay(0);
diamondSprite.scaleX = diamondSprite.scaleY = 0.5;
this.addChild(diamondSprite);
this.on('click', function(){
game.dispatchEvent('clickedDiamond');
this.parent.removeChild(this);
});
}).prototype = Object.create(cjs.Container.prototype);
2. We want the player to collect the diamond. We redefine the popDiamond funcion:
UILayer.prototype.popDiamond = function(building) {
var diamond = new game.Diamond();
var screenCoord = game.isoMaths.isoToScreenCoord
(building.x, building.y);
// transform the screen coordinate of city layer to UI layer.
var globalScreenCoord = game.cityLayer.localToLocal
(screenCoord.x, screenCoord.y, this);
diamond.x = globalScreenCoord.x;
diamond.y = globalScreenCoord.y;
this.addChild(diamond);
};
3. Whenever the diamond is clicked on, we increase the diamond count. We can put
the following code inside the game.start funcion:
game.on('clickedDiamond', function(){
game.diamonds += 1;
});