Home arrow HTML arrow Learning HTML5 Game Programming

Learning HTML5 Game Programming

If you know how to use HTML5 and want to branch out into web-based online games, you don't need to master Flash. With the help of the book Learning HTML5 Game Programming by James L. Williams, you can start exploring this fascinating terrain. Keep reading for our review.

Author Info:
By: Alejandro Gervasio
Rating: 3 stars3 stars3 stars3 stars3 stars / 12
November 18, 2011
  1. · Learning HTML5 Game Programming
  2. · More Book Details

print this article

Learning HTML5 Game Programming
(Page 1 of 2 )

Title: Learning HTML5 Game Programming: A Hands-on Guide to Building Online
Games Using Canvas, SVG, and WebGL

Author: James L. Williams

Publisher: Addison - Wesley

ISBN-13: 978-0-321-76736-3

ISBN-10: 0-321-76736-5

Unquestionably, Flash has ruled web-based online games for a long time. Backed up by a solid, easily-pluggable platform, the popular Adobe application makes it relatively easy, at least to some extent, to create interactive, cross-browser games, even at the expense of having to deal with the oddities and twists of a custom scripting language like Action Script.

As HTML5 grows increasingly popular over time, however, it may turn into a powerful contender in the terrain of web games; in the long run, it might even compete successfully with Flash. Furthermore, if you’ve already tried out the new set of features that HTML5 brings to the table, and want to use them for creating games, the book Learning HTML5 Game Programming by James L. Williams is definitely a guide that you should read and keep on your shelves for reference. 

Keep in mind, though, that the book is far from a beginner’s guide, which the author points out from the  beginning. Moreover, if you aren’t familiar with the basics of HTML5 (especially with many of the methods supported by the <canvas> element), object-oriented JavaScript, Java and the third-party libraries available, like Google Web Toolkit (GWT), Node.js, Raphaël and so forth, you'd better look somewhere else. You’ll have a very hard time understanding how to set up your first web game. You’ve been warned.

That said, it’s time to see what’s between the book’s covers…

Getting started: a quick look at HTML5’s main features, SVG, WebGL and more

The book’s first chapter is pretty approachable. It provides you with a brief overview of what HTML5 is, its historical evolution, and a quick introduction to some of its key features. It goes beyond the typical use of the new markup elements. Readers will learn about a basic utilization of the flashy HTML5 dual-channel communication objects, that is web sockets and web workers, Geolocation, media elements, Web Storage, WebSQL, and the APIs you can consume to start drawing things on the browser. These latter include the previously-mentioned <canvas> element, SVG (Scalable Vector Graphics) and WebGL. While the chapter is in general readable, it does not complement its concepts well with concrete hands-on examples.

Gathering game programming resources: a long and exhausting journey

Before you develop your own HTML5 games, you must have a clear idea of the resources, IDEs and libraries that can assist you in the process. With this idea in mind, chapter 2 offers a complete summary of the wealth of resources that you can employ for creating your own games. The list cover a tremendous variety of options that range over both server and client sides, including the Java SDK, the Google Web Toolkit (GWT), Google App Engine, and Opera Unite, along with some popular browser utilities that you've probably encountered before, such as Chrome and Safari Developer Tools, and the always venerable Firebug.

If this menu of options still doesn’t fulfill your demanding needs, the chapter also covers a few HTML5 tools that will let you more easily leverage the power of the <canvas> element and SVG, including mature JavaScript libraries like ProcessingJS, Inkscape, SVG-edit, and Raphaël as well.

In summary: if you need to have, all in one place, most of the resources available to begin creating functional, cross-browser HTML5 games, chapter 2 is a thorough reference that you should keep at hand.

Understanding the (not-so) basics of JavaScript

On the other hand, I found chapter 3 somewhat pointless and displaced in terms of the rest of the book. It offers a quick introduction to the foundations of JavaScript, including basic concepts like conditionals, events, timers, comparison operators and loops, along with more advanced ones, such as creating custom JavaScript objects, achieving Inheritance and Polymorphism via prototyping, and even how to start working with JSON, jQuery and AJAX. This is a quite ambitious and challenging goal, by the way.

In addition, you’ll get a brief description of how to get JavaScript working on the server side via some popular runtimes like RingoJS and Node.js. Nevertheless, most of the examples included in the chapter (if not all, to be frank) are pretty shallow and way too vague (at least when analyzed from a game programming standpoint). To sum up: if you want to fill some gaps in your knowledge of OO JavaScript, or wish to learn the topic from front to back, you are better off buying a separate book that really covers the subject in depth, or hunting up the many tutorials that exist all over the web (and even here on Dev Articles).

What’s behind a real game? Playing with collision detections, sprites, particle systems and Artificial Intelligence

Feeling a bit frustrated after going through the previous chapter, I felt a little concerned about the rest of the book. Well, I have to admit I was wrong: in fact, chapter 4 is, in my opinion, the book’s most engaging and delightful section. It provides an excellent variety of graspable examples to teach you how to sketch out your first HTML5 game, including the definition of its genre, playing rules and title, and most importantly, how to implement the bulk of its logic.

While most of the code samples you’ll find in this chapter rely heavily on the API provided by the Simple Game Framework (SGF), a gaming library based on the trendy Prototype, the concepts behind them are framework/language agnostic. Among other things, you’ll learn how create from top to bottom a Pong game (a 2D version of the classic ping-pong) and programmatically simulate some “real-world” physics, ranging from simple object collisions to gravity and inertia. The chapter also offers a gentle introduction to typical games effects and logic, such as particle systems and Artificial Intelligence (AI), as well as a concise (yet solid) guide to grasping the internals of a real game. My advice for this chapter: don’t miss it, especially if you want to enter the gaming programming field on the right foot.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials