HTML5 Guidelines for Web Developers

8.4 Example: Click to tick! 223

Figure 8.7 Creating a new game using the administration interface

The last step for making the new game offline-capable is to enter the created
JavaScript file into the appcache file. To find the correct address for the static
Google Maps map, you need to call the game once with the debug option. This is
easily done by adding the following string to the URL of the administration site:
?debug=1. In this mode, the URL of the active image is displayed below the play-
ing area.

If you are interested in finding out more about the fascinating interplay between

Google Maps API, Canvas, and JavaScript in the administration interface, look

at the source code at http://html5.komplett.cc/code/chap_storage/click2tick_

creator.html.

8.4.3 Important Code Fragments

The following sections explain the most important parts of the Click to tick!
game. We begin with the HTML code, move on to the manifest instructions, and
finally work out the JavaScript part.

8.4.3.1 The HTML Code for the Game

The HTML code for the game Click to tick! is rather clear. Less than 50 lines of
well-formatted code form the basic structure of the application, as shown in List-
ing 8.1. Of course, the application logic resides not in the HTML code, but in the

NOTE