Basic Game Objects - Building JavaScript Games for Phones, Tablets, and Desktop - page 87

Now the spritesStillLoading variable accurately represents how many sprites still have to be
loaded. You can use this information to wait on starting the main loop until this variable contains the
value 0. In order to do this, you create two loop methods: an asset-loading loop and a main game
loop. In the asset-loading loop, you simply check if there are still sprites that have to be loaded.
If that is the case, you call the asset-loading loop again. If all the sprites have been loaded, you call
the main loop method. Here is the asset-loading loop method:
Game.assetLoadingLoop = function () {
if (Game.spritesStillLoading > 0)
window.setTimeout(Game.assetLoadingLoop, 1000 / 60);
else {
Game.initialize();
Game.mainLoop();
}
};
You use the if instruction to check whether the number of sprites still loading is larger than 0. If this
is the case, you call the assetLoadingLoop method again after a short delay. Once all the sprites are
loaded, the else part of the if instruction is executed. In this part, you call the initialize method
in the Game object, and then the mainLoop method. In the initialize method, all the game objects
are initialized (in this case, only the cannon object). It's useful to do this initialization step after all
the sprites have been loaded, because the sprite data might be useful when initializing objects. For
example, if you want to calculate the position of an overlay such that it's drawn in the center of the
screen, you need to know the width and height of the sprite. This information is only available when
the sprite has finished loading. For a complete overview, see the Painter3 example, which illustrates
the new sprite-loading code.
Writing a More Efficient Game Loop
Until now, you've used the window.setTimeout method to create a running game loop. Although
this code is fine, unfortunately it isn't very efficient. Most browsers provide a more efficient way
to do this that is specifically targeted toward interactive drawing applications such as games. The
problem is that not all browsers and versions use the same method name. The newer versions of the
most commonly used browsers all use the window.requestAnimationFrame method. However, older
versions of Firefox use window.mozRequestAnimationFrame , and older versions of Safari and Chrome
use window.webkitRequestAnimationFrame . You want to deal with browser-specific code as little as
possible, so let's come up with a way to use the faster method to run the game loop without having
to know about the different methods that different browser makes and versions use. Because most
browsers already use the window.requestAnimationFrame method, you can extend the definition of
that method as follows:
window.requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};