HTML and CSS Reference
In-Depth Information
The effect layer is used for the display objects that we need to ensure are on top of any
board objects. For example, we will show bullets and clickable energy bubbles in this layer.
As we don't want the clickable objects to hide behind other objects, we put them on this
top layer.
The major layer we focus on is the board layer. All the enemy movement and the player-
building logic happen inside this board layer.
The head-up display
We show three game parameters in the head-up display ( HUD ), which are listed as follows:
F Energy (equivalent to coins)
F Lives
F Current waves (level)
A hud.js file is dedicated to the logic of displaying the game parameters to the players.
On every ick, it refreshes the data and updates the HTML content.
Classified intel
We added the game stage to Ticker . For every child (and their children) on the stage,
Ticker will call the tick method of the child display object if the tick method exists. This
is handy as we don't need to add the tick listener to Ticker every ime. The HUD object,
however, is a literal JavaScript object. This is why we need to add the HUD object as a Ticker
listener to get the ick.
The role of Adobe Flash when creating assets
Adobe Flash has shited to parts of the graphics creaion worklow. By making use of the
beneits of the animaion tool, we can easily create a game animaion in Flash. With the
latest exporing tool, we can even export the animaion into JavaScript assets that we can
use in the HTML5 canvas.
Every symbol in the Adobe Flash library is exported to the JavaScript file. When we reference
them in JavaScript, we use the symbol name. The name is either the linkage AcionScript
class name or the library name defined in the Adobe Flash environment. The following
screenshot shows the graphics created as Flash symbols inside the library panel, with the
symbol name properly created:
 
Search WWH ::




Custom Search