• Choose a category
• All
• Classic-Fiction

On the lefthand side, you will find a folder called “www”. This is the most important folder because it is where we will place all of the files for our game. Before we do that, we need to make sure that the SDK is set to the correct version. In the top left, you might see a drop-down with the words “Base SDK Missing” (as shown in Figure 10-6). This means that we will not be able to build and compile our game until we choose an SDK.

Figure 10-5. Xcode New Project screen

Figure 10-6. The chapter10_bs_bingo project

The Base SDK Missing message simply indicates that the default SDK is not the current version installed. In the [Project] drop-down menu, you will find a menu item called Edit Project Settings. Click this and you will see a screen similar to Figure 10-7.

Figure 10-7. Select the correct Base SDK

Make sure that you select an SDK that is present on your machine (4.2 is the latest as of this writing).

Close this window and click on the Base SDK Missing drop-down, and be sure to select the Simulator option rather than the Device option. See Figure 10-8 for an example of this screen.

Testing the New Blank Application in the Simulator

We are now ready to build our first application and see it in the simulator. We have not added any of our own code yet (though we will in the next section), so we will be testing the contents of the index.html file in the project’s www folder. Simply click the “Build and Run” button at the top of the IDE. If everything is set up properly, the simulator will come up with a blank screen, as shown in Figure 10-9.

Figure 10-8. Setting up an app to run in the simulator

Figure 10-9. A basic app running in the simulator

For a single second you will see the PhoneGap banner show up on the screen. We will customize this banner for our own game shortly.

Integrating BS Bingo into the Project

We are now going to copy code from the BSBingo.html file we created earlier into the index.html file in our project.

First we will copy our JavaScript include files and add them under the phonegap.js script include. We will not need the modernizer.js file, as we will assume the iOS platform can use HTML5 Canvas:

The phonegap.js file should already be included in the www folder, along with index.html. It is part of the project template and is needed for all PhoneGap iOS applications.

Next, we will need to add the call to start our application into the deviceReady() function:

/*When this function is called, PhoneGap has been initialized and is ready to roll*/

function onDeviceReady()

{

// do your thing!

canvasApp();

}

We can now replace the rest of the script code in the file with our code.

WARNING

At this step, don’t replace from the tag down to the end of the . Just add the game code inside the tags; if you do, be careful not to copy them from BSBingo.html.

Make sure that the first few lines look like this because we are removing the check for Canvas support:

function canvasApp(){

theCanvas = document.getElementById("canvas");

context = theCanvas.getContext("2d");

var bingoCard = [];

var buttons = [];

var standardJargonList = [];

var tempButton = {};

var clickSound;

Notice that we have removed this set of code:

if (!canvasSupport()) {

return;

}else{

theCanvas = document.getElementById("canvas");

context = theCanvas.getContext("2d");

}

We have replaced it with just the following since we no longer need to check whether the device can use the canvas (we must assume it can):

theCanvas = document.getElementById("canvas");

context = theCanvas.getContext("2d");

We have also deleted the canvasSupport() function, as it is not needed. We will next copy the rest of the code, including our HTML, and replace everything in the index.html file.

We need to make sure that the current opening