O'Reilly logo

HTML5 Game Development HOTSHOT by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required