HTML and CSS Reference
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.
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.