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 5. Introduction to JavaScript Games

On May 22, 2010, Google released its own version of the retro-classic, dot-chomping game Pac-Man. The game, developed to celebrate Pac-Man’s 30th anniversary, appeared in place of the usual Google logo on the search engine’s home page (Figure 5-1). Many people initially assumed that this fun remake was created with HTML5, but a closer inspection revealed that it used nothing more than regular DHTML (excluding the sound). Continuing with the retro-classic theme, in this chapter we will develop our own DHTML game: Orbit Assault, a variation of the legendary Space Invaders (Figure 5-2).

Pac-Man was a surprise addition to Google’s home page

Figure 5-1. Pac-Man was a surprise addition to Google’s home page

Orbit Assault, an arcade game—DHTML style

Figure 5-2. Orbit Assault, an arcade game—DHTML style

Actually creating an entire game from scratch might seem like heavy going, but it’s the best way to introduce many of the concepts involved in game development.

But why limit ourselves to DHTML? Why not jump straight into using something more powerful, like HTML5 Canvas? Think of it as high-altitude training: if we can create something good with just DHTML, we are equipped to create something even better using Canvas.

Space Invaders was released in 1978 by the Japanese Taito Corporation, and was developed by Tomohiro Nishikado. He not only designed ...

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