Professional HTML5 Mobile Game Development

Deciding on a Scene Graph

Before delving into how to build games with CSS3, this question should be answered first: When does it make sense to build a game with each of the three available HTML5-family technologies—Canvas, CSS3, and SVG? The answer is that the technology to use depends heavily on three factors: your target audience and devices, your interaction method, and your performance requirements.

Your Target Audience

For the first factor, target audience, you should be aware that Canvas and SVG are natively supported only on IE9 and above on the desktop, meaning that if you want to target older IE browsers, those technologies are both out. Conversely, the Canvas element is hardware-accelerated on mobile only in iOS 5 and up, Chrome for Android, and WP7.5. Older smartphones cannot push a lot of pixels (full-screen redraws are probably out at any reasonable Canvas resolutions) so if you target those devices, you need to consider your choice of technology carefully.

Your Interaction Method

The type of game and the interaction method required should drive your decision on technology. The <canvas> tag, in all its glory, does not natively provide a scene graph. A scene graph is a hierarchical representation of the state of each element in the current scene. For CSS3 (DOM) and SVG, you have nested sets of elements that have discrete representations that you can modify (by changing the left or top position of a DOM element, for example). For Canvas, all you have is a bunch of pixels ...