Architecting the Source Code
We spent some time reading through this excellent postmortem, as well as many of the links it provides. Actually looking at the source code for the game provided some interesting insights for the code architecture. The big one was to create a single global variable that would behave essentially like a namespace, though in reality is just holds a bunch of function pointers. An entire class file would be encased in the following code:
// All class code
} () /* Not only are we defining the function, but we're immediately executing it */
So when we actually get down to it, we are able to create individual files for each class in our code. Each class is encapsulated in a function that's immediately run, so it effectively isolates all the local information about the class. At the end of the function, the main class function is assigned to an appropriate member of the global namespace variable so it can be accessed anywhere.
For inheritance purposes, we still need to include the class files in a specific order (super classes before those that inherit from them). When the class's prototype is assigned to a new instance of its superclass, that superclass function is executed immediately. If it doesn't exist yet, the assignment won't work.
Later on, well after the completion of this project, we also stumbled upon this article:
The Game Loop and Performance
Back in the actual game, we looked at ways of creating a proper game loop. There are a couple standard ways of doing this:
This simply runs the requested function after the specified number of milliseconds have passed. So for a game loop, you would write the loop function, and then as the last command, call setTimeout() with the loop function to run again.
We also ran across an updated way to handle the game loop, which we ended up using in the end.
This is similar to setTimeout(), but it's more optimized for browsers that support it, especially mobile browsers. If the browser doesn't support it, it falls back on setTimeout().
We do use one big trick to try to squeeze more performance out of the browsers that support it:
Specifically, wrap the overall HTML document object hierarchy with a 3D CSS3 transformation that does nothing (like scale3d: 1, 1, 1). This will request that some browsers (specifically mobile ones) attempt to use their graphics chip to speed up rendering.
Coming up, JSLint, mobile device accelerometer support, and audio.