HTML and CSS Reference
In-Depth Information
Chapter 12
Building Games with CSS3
What's in this chapter?
• Deciding on using a scene graph
• Adding DOM functionality to Quintus
• Running a DOM-based version of the sample game
Wrox.com Code Downloads for this Chapter
The
wrox.com
code downloads for this chapter are found at
www.wrox.com/rem-
title.cgi?isbn=9781118301326
on the Download Code tab. The code is in the chapter 12 download and indi-
vidually named according to the names throughout the chapter.
Introduction
This chapter takes a detour from the use of Canvas to build games to show how to create games with CSS3
using DOM elements and still get good performance on mobile. This chapter adds DOM support to the Quin-
tus engine. The next chapter builds on the functionality from this chapter to build the beginnings of a simple
nethack-style dungeon crawler.
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
