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 settings: falling speed and the duration between each new box for this task. Let's set them before getting into real logic:

game.setting = {
  fallingSpeed: 0.8,
  ticksPerNewBox: 80,
  // existing setting code here
};

The ticksPerNewBox variable controls the duration between the generation 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 tick function 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...