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

Chapter 7
Basic Game Objects
In this chapter, you start organizing the source code of the Painter game a bit more. This is necessary
because the source code of a game contains many lines of code. In the previous examples, you
began grouping variables over different objects (such as Canvas2D or cannon ). In this chapter, you
continue structuring your code by using more objects and by splitting the code over separate files.
Using Separate JavaScript Files
One thing you've probably noticed is that your JavaScript file is becoming rather big. Having a single
big file that contains all your code isn't ideal, because it makes it hard to find certain parts of the
program. It makes more sense to split the code over multiple source files. A good way to do this is to
split the different JavaScript objects over separate JavaScript files so each JavaScript file contains
the code of one of the objects. The Painter3 example program contains the objects introduced in the
previous chapters, but each object is described in its own JavaScript file. It's now much easier to
navigate through the code and understand the structure of the program. You can even place these
files into separate directories to indicate which objects belong together. For example, you can put
both the Keyboard and Mouse JavaScript files in a directory called input . This way, it's clear that both
these files contain code related to dealing with input.
Loading these separate JavaScript files in the browser is a little tricky. In the previous examples,
you've seen the following line to load a JavaScript file:
<script src="FlyingSpriteWithSound.js"></script>
You would expect that you could load the JavaScript files used in the Painter3 program by just
adding more of these script elements to the HTML file, as follows:
<script src="input/Keyboard.js"></script>
<script src="input/Mouse.js"></script>
<script src="Canvas2D.js"></script>
<script src="system/Keys.js"></script>
<script src="Painter.js"></script>
<script src="Cannon.js"></script>
83