HTML and CSS Reference
In-Depth Information
</head>
<body>
<div style="position: absolute; top: 0px; left: 0px;">
<canvas id="canvas" width="570" height="418">
Your browser does not support HTML5 Canvas.
</canvas>
<audio id ="clicksound" preload="auto">
<source src="click.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
</body>
</html>
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
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
<audio>
tag usage.
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;
