Supercharged JavaScript Graphics

Chapter 2. DHTML Essentials

DHTML seems like a curiously old-fashioned term these days, especially within the context of more modern browser facilities such as HTML5 Canvas, SVG, and Flash. However, rather like the tortoise and the hare,^[2] DHTML will always be the more reliable (if slower) contender when the other, more exciting methods are not guaranteed to be available.

Actually, in many cases you don’t need anything other than DHTML; the use of other methods can often be attributed simply to developer “wants” rather than “needs.” Casual games, image zooms, and many other effects are perfectly feasible without resorting to the “power tools.” Libraries like jQuery can make implementation even easier. A little thought and delicate manipulation of the DOM will ensure that DHTML graphics can move quickly and smoothly.

In this chapter, we’ll develop a fast sprite system using vanilla JavaScript and DHTML. For the sake of compatibility, we’ll avoid the latest bleeding-edge developments in the language and instead focus on the effective use of core JavaScript.

Creating DHTML Sprites

In computer graphics, sprites are two-dimensional bitmap objects that can be moved around under software control. Until the advent of three-dimensional polygon graphics, video game consoles used sprites almost exclusively for generating their moving characters. Mobile devices have prompted a resurgence in the use of sprite-like graphics for casual games and other user interface effects. You can emulate sprite ...