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: