Capturing User Input - Beginning HTML5 Games with CreateJS - page 46

Word Game
Word Game is a game similar to Hangman, where the player must choose letters to guess a phrase displayed as
hidden letters.

• A series of empty slots that represent blank letters are positioned on the screen.

• These letters form a phrase that the player needs to guess.

• A board of letter buttons are available for choosing a letter.

•
Create an HTML file and include your canvas, CreateJS scripts, and a JavaScript file for your game code. Name this
JavaScript file, wordGame.js . Be sure to fire the init function on body load. Open the wordGame.js file and start by
declaring the game variables and init function (see Listing 3-15).

Fill in all slots of the puzzle before losing your five lives to win the game.

Listing 3-15. wordGame.js - Game Variables and init Function

var stage, livesTxt, gameOverTxt, win;
var answer = "CREATEJS IS&AWESOME"
var abc = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var lives = 5;
var lettersNeeded = 0;

function init() {
stage = new createjs.Stage(document.getElementById('canvas'));
drawBoard();
drawLetters();
drawMessages();
startGame();
}

As usual, you declare a stage variable to use throughout the game. Others are declared as well, including a few
that will be used to reference some text objects. These are followed by a list of variables that contain some initial
values, such as how many lives the player has left and how many matches are needed to win the game. The actual
answer to the puzzle is also created. An ampersand symbol is used to indicate when there should be a line break when
creating the empty letter slots.

■ it's pretty easy to cheat when playing word games for the browser—one only needs to view the page source
to get the answers to the puzzle. although this is true, it doesn't take away from the techniques learned in this lesson.
if you decide to get serious about a game of this nature, you'll want to handle some of your game logic on a web server.

Note

In typical fashion, the init function sets up the stage and calls a series of functions to start the game. Let's take a
look at the first three functions, which are laid out in Listing 3-16.

Listing 3-16. wordGame.js - drawBoard, drawLetters, and drawMessages Functions Used to Draw and Position Your
Game Display Objects

function drawBoard() {
var i, char, box;
var xPos = 20;