HTML and CSS Reference
In-Depth Information
Testing the Game on an Actual Device
You can find also these files in the
bsbingo_scaled
folder, inside the
Chapter 10
directory in
the topic'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.
Fig-
ure 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 640×480 aspect ratio with
borders around the application to make it look nicer on the screen. If you do choose to make
your game on a 640×480 or 1024×768 canvas, you will get much better results. Next, we will
create a new version of the GeoBlaster Extended game from
Chapter 9
and extend it to a full
screen app, first in the browser and then as a mobile Safari application. The game will use a
better aspect ratio.
