• Choose a category
• All
• Classic-Fiction

Figure 10-15. Setting the build target to the simulator

NOTE

The PhoneGap template has created a second project file, called chapter10_bs_bingo-iPad.xcodeproj, to target the iPad.

Once this is set, click on the “Build and Run” icon at the top center of this screen.

You should see the simulator fire up, show the custom banner image oriented to Landscape mode, and present the game, as shown in Figure 10-16.

If you click on the buttons, the simulator will even play the click.mp3 file we included. When the iPhone “control button” is clicked (the big black circle on the left), the game will exit to the iOS “desktop.” On the desktop, the custom icon.png will wait to be clicked once again, as shown in Figure 10-17.

Figure 10-16. BS Bingo running in the simulator

Figure 10-17. The BS Bingo iOS desktop icon

NOTE

You will notice that the iPhone simulator has made our plain icon look much better by adding a bevel and highlighting. There is no need for you to create anything other than a plain image, as the phone takes care of the rest.

Adding in an iPhone “Gesture”

The PhoneGap API allows us to add in control over various iOS features, such as vibrate, geolocation, and accelerometer. We will target one of these features by adding code that will wipe our board clean and create a fresh new game when the phone is shaken.

To do this, we will look for changes to the device’s physical location in space (using JavaScript), and then simply call our existing chooseButtonsForCard() and drawScreen() functions to refresh the card.

First, we need to add a single line to the chooseButtonsForCard() function that will set all the buttons instances’ press attributes to false:

function chooseButtonsForCard(){

//copy jargon into temp array

var tempArray = [];

for (var arrayctr=0;arrayctrtempArray.push(standardJargonList[arrayctr]);

}

for (var ctr1=0;ctr1

for (var ctr2=0; ctr2var randInt = Math.floor(Math.random()*tempArray.length)

buttons[ctr1][ctr2].text = tempArray[randInt];

buttons[ctr1][ctr2].press = false;

tempArray.splice(randInt,1);

}

}

}

Next, we need to add a function that will listen for the iOS “shake” event, and then refresh the card.

Apple makes it pretty easy to test for changes in the x, y, and z coordinate spaces of an iOS device (and PhoneGap makes it even easier), but acting on this information is a little tricky and will require the use of an actual device for testing.

NOTE

At the time of this writing, a PhoneGap Adobe AIR iPhone simulator was available that goes beyond the limited shake gestures available in the SDK simulator. If you do not have a device to test with, we recommend trying this emulator. It can be found at http://blogs.nitobi.com/yohei/2009/04/01/phonegap-air-simulator-in-development/.

Adding the Gesture Functions to index.html

Inside the canvasApp() function, we will need to add a series of functions and a variable to use in testing the iPhone’s accelerometer, which detects movement in our application.

Example 10-2 shows the code necessary to do this. Notice we are placing it under the current application start code (the new code is in bold).

Example 10-2. The gesture code added to BS Bingo

theCanvas.addEventListener("mousemove", onMouseMove, false);

theCanvas.addEventListener("click", onMouseClick, false);

initSounds();

initButtons();

initLists();

chooseButtonsForCard();

drawScreen();

var accelerationWatchId = null;

startAccelerationWatch();

function startAccelerationWatch() {

// Update acceleration every 3 seconds

var options = { frequency: 100 };

accelerationWatchId = navigator.accelerometer.watchAcceleration

(onSuccess, onError, options);

}

function stopAccelerationWatch() {

if (accelerationWatchId) {

navigator.accelerometer.clearWatch(accelerationWatchId);

accelerationWatchIdD = null;

}

}

function onSuccess(acceleration) {

if (Math.abs(acceleration.x)