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

Now, we display these parameters in the user interface. Put the following tick funcion
inside the UILayer deiniion prototype. The tick funcion displays the economy
parameters in the text-based indicators:
UILayer.prototype.tick = function(){
this.coinsIndicator.text = game.coins + ""; // force converting to
string with ""
this.diamondsIndicator.text = game.diamonds + "";
this.populationIndicator.text = game.populations + "";
this.powerSupplyIndicator.text = game.powerSupplies + "";
};
We will keep refreshing the tick funcion by adding it to the CreateJS icker in the following
code. We put it inside the game.start funcion. Note that it also binds the game.uiLayer
object as the context of the ick funcion:
cjs.Ticker.addEventListener('tick'
, game.uiLayer.tick.bind(game.uiLayer));
Engage thrusters
In the following steps, we will create a building panel:
1. The data file defines the buildings and their parameters. Insert the following code
inside the data.js file:
;(function(game){
game.BuildingsData = {};
game.BuildingsData['CoinsGenerator'] = {
className: 'CoinsGenerator',
needCoins: 20,
needPopulations: 10,
power: 0
};
game.BuildingsData['PowerSupply'] = {
className: 'PowerSupply',
needCoins: 10,
needPopulations: 0,
power: 15
};
game.BuildingsData['Merchant'] = {
className: 'Merchant',
needCoins: 150,
needPopulations: 20,
power: 0
};
}).call(this, game);