• Choose a category
• All
• Classic-Fiction

//ConsoleLog.log("standardJargonList="+standardJargonList.length);

for (var ctr1=0;ctr1ConsoleLog.log("ctr1="+ctr1)

for (var ctr2=0; ctr2ConsoleLog.log("ctr2="+ctr2)

buttons[ctr1][ctr2].draw(context);

}

}

}

function onMouseClick(e) {

//select case through states and then the locations of

//buttons in those states

mouseX = e.clientX-theCanvas.offsetLeft;

mouseY = e.clientY-theCanvas.offsetTop;

ConsoleLog.log("click " + mouseX + "," + mouseY);

//find the button clicked

var col = Math.floor(mouseX/92);

var row = Math.floor(mouseY/57);

console.log("row",row,"col", col);

tempButton = buttons[row][col];

clickSound.play();

tempButton.pressDown();

tempButton.draw(context);

}

function onMouseMove(e) {

mouseX = e.clientX-theCanvas.offsetLeft;

mouseY = e.clientY-theCanvas.offsetTop;

//ConsoleLog.log("move: " + mouseX + "," + mouseY);

}

//**** start application

var gr = context.createLinearGradient(0, 0, 85, 50);

// Add the color stops.

gr.addColorStop(0,'#ffffff');

gr.addColorStop(.5,'#bbbbbb');

gr.addColorStop(1,'#777777');

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

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

initSounds();

initButtons();

initLists();

chooseButtonsForCard();

drawScreen();

}

Name this file BSBingo.html and save it in a folder. If you are going to follow along and create the example project, you will also want to create a folder to hold the project files.

Examining the Code for BSBingo.html

NOTE

When designing an application for the iPhone using PhoneGap, we are actually targeting the Safari Mobile browser. This means we can make concessions rather than having to target all available HTML5-compatible devices. You will notice this especially when we discuss

The TextButton.js file

Our BS Bingo game will be played on a grid of 25 squares. We created a class (an object prototype, actually) called TextButton.js to help us create buttons with the text, as well as a “press” state we can use to show that the button has been clicked. You will want to save this file in the project folder along with the BSBingo.html file. Here is the code for this file:

function TextButton(x,y,text, width, height, backColor, strokeColor,

overColor, textColor){

this.x = x;

this.y = y;

this.text = text;

this.width = width;

this.height = height;

this.backColor = backColor;

this.strokeColor = strokeColor;

this.overColor = overColor;

this.textColor = textColor;

this.press = false;

}

TextButton.prototype.pressDown=function() {

if (this.press==true){

this.press = false;

}else{

this.press = true;

}

}

TextButton.prototype.draw = function(context){

context.save();

context.setTransform(1,0,0,1,0,0); // reset to identity

context.translate(this.x, this.y);

context.shadowOffsetX = 3;

context.shadowOffsetY = 3;

context.shadowBlur = 3;

context.shadowColor = "#222222";

context.lineWidth = 4;

context.lineJoin = 'round';

context.strokeStyle = this.strokeColor;

if (this.press==true){

context.fillStyle = this.overColor;

}else{

context.fillStyle = this.backColor;

}

context.strokeRect(0, 0, this.width,this.height);

context.fillRect(0, 0, this.width,this.height);

//text

context.shadowOffsetX = 1;

context.shadowOffsetY = 1;

context.shadowBlur = 1;

context.shadowColor = "#ffffff";

context.font = "14px serif"

context.fillStyle = this.textColor;

context.textAlign = "center";

context.textBaseline = "middle";

var metrics = context.measureText(this.text)

var textWidth = metrics.width;

var xPosition = this.width/2;

var yPosition = (this.height/2);

var splitText