O'Reilly logo

Supercharged JavaScript Graphics by Raffaele Cecco

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

    Note

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required