HTML and CSS Reference
In-Depth Information
4. Inside the
game.start
funcion, we add the redraw method of the city layer and
building growing ick method to the icker:
cjs.Ticker.addEventListener
('tick', game.cityLayer.redraw.bind(game.cityLayer));
cjs.Ticker.addEventListener
('tick', game.cityGrowing.tick.bind(game.cityGrowing));
The resultant output ater compleing this task is shown in the following screenshot.
Noice that now it takes ime to build a building. We should see the construcion graphics
that indicate the work-in-progress buildings:
Objective complete - mini debriefing
We have added the construcion progress display to the building. Newly created buildings
now take a while to complete. We assign a ime for construcion to every kind of building.
It is an array of seconds in ascending order. The building step is determined by how many
seconds elapsed since it was built:
stepsSeconds: [10, 20]
The construcion is based on world ime. We store the staring ime of each building. At any
given moment, we know the progress of the construcion by calculaing the ime diference
between the current ime and build ime, in seconds:
var secondsDiff = Math.floor(((new Date()).getTime() -
building.buildTime) / 1000); // seconds
