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.
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.
Let's code the game loop in the game.js file with the following steps:
CreateJS comes with a
Tickerclass to handle the game loop. All we need to do is add our custom tick function to theTickerclass's event listener. Put the following code in the game'sinitlogic:createjs.Ticker.setFPS(40); createjs.Ticker.addEventListener('tick', game.tick);Then, we define our
tick...