HTML and CSS Reference
In-Depth Information
Some players may be on a dial-up service (which supports speeds a good deal slower than 3G) and looking
to play on computers that should have been retired ages ago. Because the web is a casual gaming space, you
must accommodate a much wider range of hardware. Using mobile as a baseline is a good start to ensure you
make the necessary optimizations.
Minifying Your JavaScript
The majority of the size of your HTML5 games will most likely consist of JavaScript and image files. The
JavaScript files should be written with plenty of helpful comments to go along with nice indenting, descriptive
variable and function names, and generous spacing.
Just because you write your files that way, though, doesn't mean you need to serve them to your player
that way. A number of compressors are available that can take your JavaScript, strip out the comments and
whitespace, and then transform the parts down to greatly reduce the resulting size of the file. jQuery 1.7.1, for
example, runs almost 250 K in size before being minified down to approximately 93 K.
To aid in minifying down your code, you can do a couple of things. The first is to wrap your code in an an-
onymous function to get it out of the global scope. You often see code written something like this:
(function(window) {
// Bunch of stuff defined.
window.exportedFunction = function() { .. }
})(window);
Here, all the code is wrapped up in an anonymous function and explicitly sets any of its exports on the
passed-in window class. This makes it explicit as to which variables are global. There are variations on this pat-
tern, but the crux of it is that the global namespace isn't filled with lots of junk.
The second thing you can do to minify your code is to make sure to use the
"var"
keyword to create local
variables that don't need to be available outside of the wrapping function. Using local variables this way allows
the minifiers to automatically rename these variables down to short names such as
a
and
b
, which allows for
even better compression of the files.
A number of JavaScript minifiers are available. Three of the most popular are Yahoo's YUI compressor (
ht-
tp://developer.yahoo.com/yui/compressor/
)
, Google's Closure compiler (
http://code.google.com/closure/com-
piler/
)
, and Uglify.js (
https://github.com/mishoo/UglifyJS
)
. This topic uses Uglify.js because it's popular and
written in JavaScript.
To run Uglify.js, you need some sort of command-line JavaScript environment. Chapter 9 discusses getting
Node.js, a command-line and server-side framework for running JavaScript, up and running. In the meantime
you can play with the output of Uglify.js by passing some code through the online version at
ht-
Setting Correct Headers
One of the worst things you can do is force a player to redownload large asset files that haven't changed when
they visit your game the second time. Setting expiration headers far into the future means you tell the browser
it can cache whatever assets it likes.
What files does it make sense to allow the browser to cache? Almost any asset file, including images, audio,
level data, and so on should be cacheable if it's not generated dynamically on the server.
At its simplest, if you use Apache, you can add a directive to set expiration way out in the future:
