HTML5 Canvas, 2nd Edition

Testing the Game on an Actual Device

We have placed a folder with the live files at this site.

You can find also these files in the bsbingo_scaled folder, inside the Chapter 10 directory in the book’s download files at O’Reilly’s website.

The folder contains the following files:

1. bsbingo_scaled.html

2. bsicon.png

3. click.mp3

4. ConsoleLog.js

5. modernizr-min.js

6. TextButton.js

To add this page (or your own live page) to the iPad or iPhone desktop, simply navigate to the page and then click the Add to Home Screen button next to the browser address bar. Figure 10-4 shows bsbingo_scaled.html running in mobile Safari on an iPad with the Add to Home Screen button circled at the top, next to the address bar.

When the Add to Home Screen button is pressed, it will ask you if you want to use the bsicon.png image that we designated. It will also ask for a name to be displayed on the home screen under the icon. Click the icon, name it, and then it will be added to the home screen of your device just like any other application. When you run it this time, the browser address bar will not be present and the game will fit nicely (as nicely as possible given the aspect ratio we chose) on the iPad or iPhone Screen. See Figure 10-5 for the game running in this mode.

You will notice that we did not choose an aspect ratio that looks really pretty on the scale screen, but this first example simply serves to get our feet wet. While were are not going to do it here, it would be pretty trivial to change the code to fit into a ...