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

Unfortunately, you run into trouble if you try to take this approach of adding more and more script
elements. Because the JavaScript files are retrieved from a server somewhere, there is no way to know
for sure which JavaScript file will be finished loading first. Suppose the first file the browser can load is
Painter.js . The browser can't interpret the code in this file because the code refers to code in other
files (such as the Canvas2D object). And this holds for other files as well. So, in order for this to work,
you need to make sure the files are loaded in a certain order that respects the existing dependencies
between the files . In other words: if file A needs file B, you need to load file B before file A.
In JavaScript, it's possible to modify HTML pages; so, in theory, you could add an additional script
element to the HTML page, which would then start loading another JavaScript file. By using event
handlers in a smart way, you could imagine writing JavaScript code that loads other JavaScript files
in a predefined order. Instead of writing all this code yourself, you can also use code already written
by others. This is another advantage of structuring code: it makes the code more useable for other
applications.
For this topic, I've chosen to use a dynamic script-loading tool called LABjs ( http://labjs.com/ ).
This is a very simple script that lets you load other JavaScript files dynamically and in a predefined
order. Here is the code that loads all your JavaScript files in the right order using LABjs:
<script src="../LAB.min.js"></script>
<script>
$LAB.script('input/Keyboard.js').wait()
.script('input/Mouse.js').wait()
.script('Canvas2D.js').wait()
.script('system/Keys.js').wait()
.script('Painter.js').wait()
.script('Cannon.js').wait(function () {
Game.start('mycanvas');
});
</script>
As you can see, using LABjs is straightforward. You simply call a sequence of script and wait
methods. The final wait method call gets as a parameter a function to be executed. Inside this
function, you start the game. By changing the order of the script method calls, you can change the
order in which the scripts are loaded. When you're developing games or other bigger JavaScript
applications, it's very useful to use such a script because it makes developing and maintaining code
much easier. For a complete example that shows loading different JavaScript files, see Painter3.
Another improvement here is that I pass the name of the canvas element as a parameter to the start
method. This way, the JavaScript game code can work with any canvas name.
You probably don't want to use such a method for the final (release) version of the game, because
the browser will have to load many JavaScript files. At that point, it's preferable to use another
program that combines all the JavaScript files into a single big file, which leads to much faster
loading. Furthermore, it's common practice to perform some optimization on the structure of the
code such that the script file size is as small as possible. This process is called minification .
Chapter 30 discusses this in more detail.