Using a game loop

In the previous section, we placed the tiles in HTML directly, and then moved the temporary code for the creation of tiles from HTML to JavaScript.

Although the tiles are created programmatically, it is a one-time creation only. The tiles do not move. No new tiles are created after the initialization.

What we will do in this task is continuously create tiles based on a predefined pattern, and keep moving the existing tiles down.

Prepare for lift off

In this task, we are going to create tiles based on the data provided by the user instead of having the tile patterns hardcoded.

Before we start, let's remove the temporary code that creates testing tiles in JavaScript. The startOver function is reverted to the following state:

gameScene.startOver = function() {
  game.view.runway.reset();
  game.isGameOver = false;
};

We need to prepare the data for the tiles so that the game can loop and create more tiles.

We have used an integer value in both HTML and CSS to represent different...