Space Runner - HTML5 Game Development - page 94

this.round = 0;
setTimeout((this.tick).bind(this), 800);
requestAnimationFrame((this.onFrame).bind(this));
};
2. Before the onFrame funcion ends, it requests another animaion frame to trigger
another posiion update:
gameScene.onFrame = function() {
game.view.runway.updateTilesPosition();
requestAnimationFrame((this.onFrame).bind(this));
}
3. Let's move to the runway.js file and add the updateTilesPosition funcion
to the exising runway view object. What it does is update all the ile placements
using the CSS style:
game.view.runway = {
...
/* existing runway code here */
updateTilesPosition: function() {
for(var i=0, len=this.tiles.length; i<len; i++) {
var tile = this.tiles[i];
tile.updatePosition();
}
},
4. Go back to the gameScene.js file and add the following tick funcion to the
gameScene object:
gameScene.tick = function() {
this.round += 1;
game.view.runway.tick(this.round);
if (!game.isGameOver)
{
var duration = Math.max(801-this.round, 100);
setTimeout((this.tick).bind(this), duration);
}
};