HTML and CSS Reference
In-Depth Information
to you if you have read those chapters. If you have not, it's especially a good idea to read
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 im-
plementation, 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 that 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. Because 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 targeting any other
browsers. Here is the HTML5
<audio>
tag:
<audio
<audio id=
"clicksound"
preload=
"auto"
>
<source
<source src=
"click.mp3"
type=
"audio/mpeg"
//>
Your browser does not support the audio element.
</audio>
</audio>
The chooseButtonsForCard() function
This function creates a local array called
tempArray
and fills it with the contents of the
standardJargonList
.Next,itrandomlychoosesanelementfromthe
tempArray
foreachof
the 25 row/column combinations on the bingo card. As it selects a word, it splices it from the
tempArray
so that it cannot be selected again, leaving the card with no duplicates.
The drawScreen() function
This function loops through the
buttons
two-dimensional array and draws the initial 25 but-
tons with text onto the canvas.
