HTML and CSS Reference
In-Depth Information
Chapter 14
Building Games with SVG and Physics
What's in this chapter?
• Understanding scalable vector graphics (SVG)
• Manipulating SVG from JavaScript
• Creating SVG sprites
• Implementing a physics engine
• Adding enemies and power-ups
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 14 download and individu-
ally named according to the names throughout the chapter.
Introduction
SVG (scalable vector graphics) is the closest thing that HTML5 has to a direct competitor to Flash. SVG provides
the capability to draw vector graphics that can be scaled, rotated, and transformed to your heart's content while
still providing a scene graph to interact with, meaning SVG elements can receive mouse and touch events. This
chapter uses SVG with a 2-D physics engine, called Box2d, which has been ported from C++ to JavaScript (by
way of ActionScript) to create a physics playground and cannon game.
Understanding SVG Basics
SVG is an odd bird. It's been around since time eternal (1999), but it never caught on. One reason for this is that
previously, Internet Explorer didn't support the standard, opting for its own proprietary Vector Markup Language
(VML) for the same task. Until IE9 was released, using SVG meant cutting out IE users completely or using a
library such as Raphael.js that supported both SVG and VML.
With the release of IE9, the future started looking up for SVG with the capability to build vector graphics in
an HTML5-approved way. Mobile Safari along with Android 3.0 and up as well as the newest version of all the
desktop browsers have excellent SVG support, so building a game that relies on SVG is a viable option provided
you are okay with leaving out users of older versions of Internet Explorer and Android. Performance still leaves a
little bit to be desired, however; so run some tests on your target platforms before committing to SVG as a game
technology.
