Karl Bunyan - Build an HTML5 Game: A Developers Guide with CSS and JavaScript

Along the way, the input from the No Starch Press team has been invaluable in shaping the contents of this book. Thanks go to Keith Fancher, who initially made contact and suggested I start writing in the first place; Tyler Ortman, who set me on the right path after a very unstructured first draft; Alison Law, who kept the whole process moving along; and especially my editor, Jennifer Griffith-Delgado, without whom this book would have been twice as long and made half as much sense. Id also like to thank my technical reviewer, Patrick Lauke, who was particularly invaluable in identifying areas where technology changed during the time between initial draft and final version.

Im also grateful to a host of former co-workers and bosses who put up withand often even encouragedmy playing with fun effects when I should have been working on paid projects. And finally, Id like to thank my partner, Ann, whose goading about how long it was taking me to finish the book ensured that I didnt give up entirely.

Games are everywhere, and theyre increasingly played on connected web devices and within desktop and mobile browser environments. As browser-based games become more popular, players are turning to sites like Facebook to discover simple, casual games that dont require a disc or much up-front setup to play. A game is just another link to click through.

During the past decade, improvements to Adobes Flash plug-in contributed to the growth of the web browser as a gaming platform. Most browsers supported Flash, giving game developers access to a powerful platform that approached the dream of write once, run anywhere . HTML-based games have been around about as long, and you may even have played some (possibly without noticing). However, until recently, the use of HTML and JavaScript as a gaming platform played second fiddle to Flash due to graphics, sound, and speed limitations. But browsers and mobile gaming platforms have vastly improved, and the status quo is changing. Mobile operating systems have steered away from Flash as a supported plug-in, and as a result, game developers need tools that provide similar performance and flexibility while retaining the ubiquity that Flash had.

Browsers have also seen a rapid improvement in graphical and sound capabilities over the past few years. The rise in power of HTML mirrors increasing demand for a platform that delivers rich gaming experiences and has the backing of multiple platform providers. A well-supported, open platform is considered less likely to fall foul of commercial controls and a walled-garden mentality, and HTML5 is such a platform.

However, in my experience, many game developers come to HTML5 looking to build the same type of games they would have built in Flash. HTML5 is certainly one of the best options: it has a huge user base (anyone with a modern web browser), and HTML5 and Flash have many similar capabilities and constraints. Despite this similarity, thinking of HTML5 as a Flash replacement is likely to lead to disappointing product launches and missed opportunities. This is because the strengths of one do not directly map to the strengths of the other. Also, HTML5 is still in a relatively early stage of development. The platform is advancing rapidly, and it can be difficult to keep up with which new features are supported from month to month.

Much as with building a good web application, the key to making a successful game is to understand your platforms capabilities and restrictions. You have to design and build games that maximize the platforms potential while avoiding or minimizing its limitations. This book is intended as a first step in understanding what you can achieve with JavaScript, HTML, and CSS and introducing the methods by which you can do so.