Space Runner - HTML5 Game Development - page 93

game.isGameOver = false;
};
We need to prepare the data for the iles so that the game can loop and create more iles.
We have used an integer value in both HTML and CSS to represent diferent types of iles.
Now, we need the same integer representaion in JavaScript.
You can imagine the following runway data as a map represented by an integer value. This
is essenial because everything irst happens in data and then we visualize the data in view.
Let's put the following code in the runway.js file:
// runway data
;(function(){
var game = this.spaceRunner || (this.spaceRunner = {});
game.data = game.data || {};
game.data.runway = [
[0, 1, 2, 0],
[0, 1, 2, 0],
[0, 1, 2, 0],
[0, 1, 2, 4],
[0, 1, 2, 0],
[0, 1, 2, 0],
[0, 1, 2, 0],
[0, 1, 2, 0],
[4, 1, 2, 0],
[0, 1, 2, 0],
[0, 1, 100, 0],
[0, 1, 2, 0],
[0, 1, 2, 0],
[0, 1, 2, 0],
[0, 1, 2, 0],
];
}).call(this);
Engage thrusters
By performing the following steps, we start working on the Game loop:
1. Game loop is an important topic. Every 800 milliseconds, a new row of iles is
created and exising iles are moved down. In the gameScene.js file, we append
the following code to the startOver funcion. It starts two loops: imeout and
requestAnimationFrame :
gameScene.startOver = function() {
...
/* existing code goes here */