Cover image for Supercharged JavaScript Graphics

Book description

Thanks to improved web browser support and the advent of HTML5, JavaScript now plays a major role in programming high-performance web graphics. This hands-on book shows you how to create rich web applications for big-screen computers and small-screen mobile devices using JavaScript, jQuery, DHTML, and HTML5's Canvas element. By following real-world examples, experienced web developers will learn fun and useful approaches to arcade games, DHTML effects, business dashboards, and more.

Table of Contents

  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
        1. Target Browsers
      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
        1. Lookup Tables
        2. Bitwise Operators, Integers, and Binary Numbers
          1. A quick recap of binary numbers
          2. JavaScript’s bitwise operators
            1. Bitwise AND (x & y)
            2. Bitwise OR (x | y)
            3. Bitwise XOR (x ^ y)
            4. Bitwise NOT (~x)
            5. Shift left (x << numBits)
            6. Shift right with sign (x >> numBits)
            7. Shift right with zero fill (x >>> y)
          3. Loop unrolling: An inconvenient truth
      5. Optimizing jQuery and DOM Interaction
        1. Optimizing CSS Style Changes
        2. Optimizing DOM Insertion
      6. Other Resources
    4. 2. DHTML Essentials
      1. Creating DHTML Sprites
        1. Image Animation
        2. Encapsulation and Drawing Abstraction (aka Hiding Stuff)
        3. Minimizing DOM Insertion and Deletion
        4. The Sprite Code
        5. A Simple Sprite Application
        6. A More Dynamic Sprite Application
      2. Converting into a jQuery Plug-in
      3. Timers, Speed, and Frame Rate
        1. Using setInterval and setTimeout
        2. Timer Accuracy
        3. Achieving Consistent Speed
      4. Internet Explorer 6 Background Image Caching
    5. 3. Scrolling
      1. CSS-Only Scrolling Effects
      2. Scrolling with JavaScript
        1. Background Image Scrolling
        2. Tile-Based Image Scrolling
          1. Snapping...
          2. ...and Wrapping
          3. Keeping things fast
          4. Tile scrolling code
          5. Creating tile maps with Tiled
            1. Tiled file format
          6. Tile scroller page layout
    6. 4. Advanced UI
      1. HTML5 Forms
      2. Using JavaScript UI Libraries
        1. Using jQuery UI for Enhanced Web Interfaces
          1. Loading and using jQuery UI
          2. Theming jQuery UI
        2. Heavy Duty UI with Ext JS
          1. Loading and using Ext JS
      3. Creating UI Elements from Scratch
        1. Creating a 3D Carousel
          1. Carousel specifications
          2. Carousel image loading
          3. Carousel item objects
          4. The carousel object
          5. The jQuery plug-in part
          6. Carousel page layout
    7. 5. Introduction to JavaScript Games
      1. Game Objects Overview
      2. The Game Code
        1. Game-Wide Variables
        2. Reading Keys
        3. Moving Everything
        4. A Simple Animator
        5. Collision Detection
        6. Aliens
          1. Alien bombs
          2. Alien invaders
          3. Aliens manager
        7. The Player
          1. Tank
          2. Laser
        8. Shields
        9. Mystery Saucer
        10. The Game
        11. Putting It All Together
    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
        1. The Canvas Element
        2. The Drawing Context
        3. Drawing Rectangles
        4. Drawing Paths with Lines and Curves
        5. Drawing Bitmap Images
        6. Colors, Strokes, and Fills
      8. Animating with Canvas
      9. Canvas and Recursive Drawing
        1. Canvas Tree Page Layout
      10. Replacing DHTML Sprites with Canvas Sprites
        1. The New CanvasSprite Object
        2. Other Code Changes
      11. A Graphical Chat Application with Canvas and WebSockets
        1. The WebSockets Advantage
        2. WebSockets Support and Security
          1. Turning on WebSockets in Firefox 4 and Opera 11
        3. The Chat Application
          1. The socket server
          2. Installing a web hosting environment locally
          3. The camera
          4. The avatars
          5. The chat text
          6. The background
          7. Initialization
          8. The page code
    9. 7. Vectors for Games and Simulations
      1. Operations on Vectors
        1. Addition and Subtraction
        2. Scaling
        3. Normalization
        4. Rotation
        5. Dot Product
      2. Creating a JavaScript Vector Object
      3. A Cannon Simulation Using Vectors
        1. Simulation-Wide Variables
        2. The Cannonball
        3. The Cannon
        4. The Background
        5. The Main Loop
        6. Page Layout
      4. Rocket Simulation
        1. The Game Object
        2. The Obstacle Object
        3. The Rocket Object
        4. Background
        5. Collision Detection and Response
        6. Page Code
        7. Possible Improvements and Modifications
    10. 8. Google Visualizations
      1. Limitations
      2. Chart Glossary
      3. Image Charts
        1. Data Formats and Chart Resolution
          1. Basic text format
          2. Text format with custom scaling
          3. Simple encoding format
          4. Extended encoding format
        2. Using Dynamic Data
        3. Summary
      4. Interactive Charts
        1. Interactive Charts Events
          1. Retrieving event information
    11. 9. Reaching the Small Screen with jQuery Mobile
      1. jQuery Mobile
      2. TilePic: A Mobile-Friendly Web Application
        1. TilePic Game Description
        2. TilePic Game Code
          1. Application-wide variables
          2. The tile object
          3. Checking whether the puzzle is solved
          4. Moving tiles
          5. Shuffling the tiles
          6. TilePic setup code
          7. TilePic events
          8. TilePic page layout
      3. PhoneGap
    12. 10. Creating Android Apps with PhoneGap
      1. Installing PhoneGap
        1. Installing the Java JDK
        2. Installing the Android SDK
        3. Installing Eclipse
        4. Installing Android Development Tools
        5. Installing PhoneGap
      2. Creating a PhoneGap Project in Eclipse
        1. Altering the App.java File
        2. Altering the AndroidManifest.xml File
        3. Creating and Testing a Simple Web Application
        4. Testing the TilePic Application
    13. Index
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly