Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

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.addEventListener('tick', game.tick);
  2. Then, we define our tick...