• Choose a category
• All
• Classic-Fiction

var verticalSpacing = 14;

console.log("text=" + this.text)

console.log("text split length=" + splitText.length)

for (var ctr1=0; ctr1context.fillText ( splitText[ctr1], xPosition,

yPosition+ (ctr1*verticalSpacing));

}

context.restore();

}

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 book, 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

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.

The drawScreen() function

This function loops through the buttons two-dimensional array and draws the initial 25 buttons with text onto the canvas.

The onMouseClick() function

When the user clicks the mouse on the game screen, this event listener function determines which of the 25 squares was clicked. It calls the appropriate TextButton instance’s pressDown() function and then its draw() function, passing in the context.

The onMouseMove() function

When the mouse is moved, this event listener function will set the mouseX and mouseY values to the current mouse position on the canvas.

The Application Code

Once all the functions and the TextButton object prototype are created, the actual application code is very simple. Because this is a completely event-based application, we don’t need a main loop. We also have not put in any other states or buttons, such as a title screen or a reset button. This makes the app less user-friendly, but it is fine for this simple example. It also makes the application code very simple:

//**** start application

var gr = context.createLinearGradient(0, 0, 100, 100);

// 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();

First, we create a shared linear gradient that can be used by all the TextButton instances. Next, we add the mouse event listeners for