HTML and CSS Reference
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
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 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.
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,
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
use in the HTML5 canvas.
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: