HTML and CSS Reference
In-Depth Information
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() {; // 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.scaleX = diamondSprite.scaleY = 0.5;
this.on('click', function(){
}).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;
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(){ += 1;
Search WWH ::

Custom Search