You are previewing Supercharged JavaScript Graphics.

Supercharged JavaScript Graphics

Cover of Supercharged JavaScript Graphics by Raffaele Cecco Published by O'Reilly Media, Inc.
  1. Supercharged JavaScript Graphics
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Audience and Assumptions
      2. Organization
      3. Conventions Used in This Book
      4. Using Code Examples
      5. Safari® Books Online
      6. How to Contact Us
      7. Acknowledgments
    3. 1. Code Reuse and Optimization
      1. Keeping It Fast
      2. What and When to Optimize
      3. Homespun Code Profiling
      4. Optimizing JavaScript
      5. Optimizing jQuery and DOM Interaction
      6. Other Resources
    4. 2. DHTML Essentials
      1. Creating DHTML Sprites
      2. Converting into a jQuery Plug-in
      3. Timers, Speed, and Frame Rate
      4. Internet Explorer 6 Background Image Caching
    5. 3. Scrolling
      1. CSS-Only Scrolling Effects
      2. Scrolling with JavaScript
    6. 4. Advanced UI
      1. HTML5 Forms
      2. Using JavaScript UI Libraries
      3. Creating UI Elements from Scratch
    7. 5. Introduction to JavaScript Games
      1. Game Objects Overview
      2. The Game Code
    8. 6. HTML5 Canvas
      1. Canvas Support
      2. Bitmaps, Vectors, or Both?
      3. Canvas Limitations
      4. Canvas Versus SVG
      5. Canvas Versus Adobe Flash
      6. Canvas Exporters
      7. Canvas Drawing Basics
      8. Animating with Canvas
      9. Canvas and Recursive Drawing
      10. Replacing DHTML Sprites with Canvas Sprites
      11. A Graphical Chat Application with Canvas and WebSockets
    9. 7. Vectors for Games and Simulations
      1. Operations on Vectors
      2. Creating a JavaScript Vector Object
      3. A Cannon Simulation Using Vectors
      4. Rocket Simulation
    10. 8. Google Visualizations
      1. Limitations
      2. Chart Glossary
      3. Image Charts
      4. Interactive Charts
    11. 9. Reaching the Small Screen with jQuery Mobile
      1. jQuery Mobile
      2. TilePic: A Mobile-Friendly Web Application
      3. PhoneGap
    12. 10. Creating Android Apps with PhoneGap
      1. Installing PhoneGap
      2. Creating a PhoneGap Project in Eclipse
    13. Index
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly

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 ...

The best content for your career. Discover unlimited learning on demand for around $1/day.