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

TilePic: A Mobile-Friendly Web Application

Using jQuery Mobile, we will create a mobile-friendly application—a game called TilePic (Figure 9-2). TilePic is a simple sliding-picture puzzle game with a few extra options and features to add longevity and interest. It is a good example of what’s realistic in terms of a graphical web application running on average mobile hardware. We could be more ambitious if developing for higher-end devices only, but for the sake of example, we will concentrate on creating an application that works acceptably on as many devices as possible.

TilePic, a simple mobile-friendly sliding puzzle game

Figure 9-2. TilePic, a simple mobile-friendly sliding puzzle game

TilePic Game Description

TilePic works as follows:

  1. The user is presented with a main menu screen (Figure 9-3).

  1. The user chooses any one of three images.

  2. The user selects the number of tiles to split the image into: 9, 16, or 25.

  3. The user taps the Play button to start and is presented with the selected image split into tiles, which are randomly ordered to jumble the picture up. A faint watermark of the complete image is visible beneath the tiles to make the game a little easier (as shown earlier in Figure 9-2).

  4. The user tries to correctly reassemble the picture, moving the tiles around by tapping them. At any time, the user can return to the main menu to select another image and/or difficulty level.


    The application will automatically move multiple tiles—a ...

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