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

Objective complete - mini debriefing
The clicking of diamond and increment of variable happens in different components.
The diamond is added to the UI layer and the value of the diamond variable increases.
Diamond sprite animation
The diamond sprite animaion uses the same sprite sheet approach for the buton. The
diference is that buton has three frames for the mouseup, mouseover, and mousedown
events. The diamond is an animaion with the most frames. We can tell EaselJS to play the
animaion by calling gotoAndplay(0) . The frame number starts with 0. By default, the
animaion is reset to frame 0 and loops ater it reaches the last frame of the sprite.
In Project 6 , Space Defenders , we will explore how to export vector animaions to CreateJS
directly from Adobe Flash.
Classified intel
Besides the diamonds that pop up, we may also allow coins to pop up randomly in the game.
This increases the possibility that a player has something to do in the game. This can be a
good incenive to make the player stay in the game. They will get bonus coins and diamonds
while the buildings are under construcion. Moreover, the coins can be of random value too.
Some pop-up coins may increase 10 coins and some may increase 100 coins.
Saving and loading the game progress
In the task, we store the game progress locally. When a player loads the game, we use the
world ime to calculate the building construcion.
Engage thrusters
We will use the following steps to store game parameters and load them at the iniial stage:
1. Create the saving funcion with the following code:
game.autoSave = function() {
if (cjs.Ticker.getTicks() % 100 === 0) {
localStorage['city.coins'] = game.coins;
localStorage['city.diamonds'] = game.diamonds;
localStorage['city.buildinglist'] = JSON.stringify(game.
buildingsList);
}
};