Multiply Defense - HTML5 Game Development - page 128

Classified intel
Whenever I have quesions on how to follow the CreateJS game structure to build a game,
I often check their source code at https://github.com/CreateJS/EaselJS . It helps
to know how each class inherits from the other and how we can create our custom EaselJS
object that integrates well with those built-in classes.
The game loop and falling boxes
In Project 3 , Space Runner , we created the game loop ourselves. In this project, we have help
from the CreateJS game library. Here, we will make use of the Ticker class to create a game
loop that drops the generated boxes.
Prepare for lift off
We need two more seings: falling speed and the duraion between each new box for this
task. Let's set them before geing into real logic:
game.setting = {
fallingSpeed: 0.8,
ticksPerNewBox: 80,
// existing setting code here
};
The ticksPerNewBox variable controls the duraion between the generaion of the next
box and the current box.
Engage thrusters
Let's code the game loop in the game.js file with the following steps:
1. CreateJS comes with a Ticker class to handle the game loop. All we need to do is
add our custom ick funcion to the Ticker class's event listener. Put the following
code in the game's init logic:
createjs.Ticker.setFPS(40);
createjs.Ticker.addEventListener('tick', game.tick);
2. Then, we define our tick funcion in the core game object. It generates a new box
and makes the box fall:
game.tick = function(e){
game.stage.update();
if (!e.paused) {
game.gameView.moveObjects();