HTML and CSS Reference
In-Depth Information
The easing function
The easing funcion oten deines the animaion style. We have diferent choices on
how tweening values are calculated. Linear may look boring; however, ease-out ends the
interpolaion subtly. A bouncing efect may make it look lively. We can set the animaion
mood with a proper easing funcion. The following link to the TweenJS documentaion
lists all the built-in easing funcions:
http://www.createjs.com/Docs/TweenJS/classes/Ease.html
The following link to the TweenJS example provides an interacion chart that demonstrates
the diference among the easing funcions:
http://www.createjs.com/#!/TweenJS/demos/sparkTable
Ending the game
In this task, we will add a life system to give the game an ending. For each box that passes
through the dead line, we deduce one life. The game coninues unil a player loses all the
life points.
Prepare for lift off
Before we get into the logic, we would like to define how many lives a player gets in each
game. We define this value in the
setting
object, as shown in the following code:
game.setting = {
initialLifes: 3,
// existing settings go here.
};
Engage thrusters
Let's code the game-end logic with the following steps:
1. We have defined three lives per game so we will use three hearts to represent three
lives. Before we add bitmap graphics, we use a
RectShape
funcion to represent a
heart. Furthermore, we will use a
container
object to store all the hearts so it can
be easily placed on the stage. In the final task, we will replace all these
RectShapes
funcions into bitmap graphics of the shape of a heart. Append the following code
inside the
gameView
object:
game.gameView = {
init: function() {
