HTML and CSS Reference
In-Depth Information
This object prototype contains functions for creating, drawing, and clicking a gray
square button with black text on it. When clicked, the button will be drawn with a
yellow background. We have covered all these drawing functions earlier in this topic,
so they will look familiar to you if you have read those chapters. If you have not, it's
especially a good idea to read
Chapter 2
, which covers drawing and shading objects
drawn with paths.
Let's now take a quick look at the functions we have created in
BSBingo.html
.
The initLists() function
The first game-related function you will encounter is
initLists()
. For our simple game
implementation, we have created a single list of words based on some common business
jargon. The
standardJargonList
application scope variable will contain a single-
dimension array of words that will be placed randomly on the player's bingo card. We
can add more types of lists if we would like to target other types of jargon-speak, such
as pure IT process-speak, marketing-speak, or even sports- or geek-speak.
The initButtons() function
This function creates a grid of 25
TextButton
instances, 85 pixels in width and 25 in
height. These are stored in the application scope
buttons
two-dimensional array so they
can be accessed via the
[row][column]
syntax.
The initSounds() function
The
initSounds()
function needs to initialize only a single sound referenced in an
HTML5
<audio>
tag. Since we are targeting the iOS platform, we need to provide only
a single
.mp3
-formatted sound. We do not need
.ogg
or
.wav
because we are not tar-
geting any other browsers. Here is the HTML5
<audio>
tag:
<audio id="clicksound" preload="auto">
<source src="click.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
The chooseButtonsForCard() function
This function creates a local array called
tempArray
and fills it with the contents of the
standardJargonList
. Next, it randomly chooses an element from the
tempArray
for each
of the 25 row/column combinations on the bingo card. As it selects a word, it splices
it from the
tempArray
so it cannot be selected again, leaving the card with no duplicates.
