Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Hangman Game

VCB424 Advanced Interactive Design IV

Hangman Game

In this exercise, we will make a Flash version of the brutal game "hangman." I'm not sure if it's PC, but it is fun. This exercise is based on the one found in Actionscript for Flash 8 published by Friends of Ed.

Creating the graphics

1. Open a new Flash document.
2. Choose Insert > New Symbol to create a new movie clip. Call it "hangman_mc."
3. Inside the movie clip's timeline, change the name of the default layer 1 to "art," and add a new layer called "actions/labels." Add about 20 frames to each layer (F5).
4. On the actions/labels layer, add a label to frame 1 called "play." Go to frame 10 and add a keyframe. Label it "lose." At frame 15 add another keyframe and label it "win."
5. Now comes the fun part—creating your hangman graphics. We will add a series of keyframes between frame 1 and 10, each one containing a little more of the artwork, until we reach the grisly end. In the "art" layer, add a keyframe at frame 1. Create a title "Hangman" at the top somewhere. Now add a keyframe to frame 2. Then draw a horizontal line (the base for the gallows). Next, add a keyframe to frame 3. Draw a vertical line (the gallows pole). Continue to add keyframes and new parts of your gallows until you hit frame 10, which should be the final graphic. You might also want to add a message to the last frame that will inform the player that the game is over "Game over," "The end," "Loser!" etc. Click here to see an example of the incremental steps.

Hint: you could add more steps if you like, just move the "lose" keyframe and label over to make room for your additional steps.

6. In the frame labeled "win" add a nice, congratulatory message of some kind.
7. Once again choose Insert > New Symbol to create a new movie clip. Call this one "interface_mc."
8. In the interface movie clip, add a dynamic text field (large enough for your longest word) and give it the instance name "display_txt" (not var!). Choose a font, size, and color.
9. Add a static text box below it that says "Choose a letter" or something similar.
10. Add a small input text box next to the static text that has an instance name "input_txt." This will be the box in which the player will type his/her guesses. Set the maximum characters to 1. You may want to embed your font too, if it's not a common one.
11. And finally, create a button. You may want to label the button "Enter." Call the button "enter_btn" and give it the instance name "enter_btn1".
12. Now go back to the main timeline, which should be empty at this time.
13. Place an instance of each movie clip on the stage; call them "hangman_in" and "interface_in." Note that you won't see anything in the hangman_in instance other that the title. You may have to re-arrange things later once you get the game working to get everything to fit.
14. Add a new button with an instance name "play_btn1."
15. Add a new layer called "actions." That's it for the set-up; the entire movie will consist of one frame with two layers.

Adding the actions.

Okay there is a lot to this script, but it all goes in frame 1 on the actions layer. I'll break it down into several discreet chunks.

1. In the first chunk o' code, we will create three arrays. Remember, an array is a list of items that we plan to use as variables. Rather than declare each variable separately, we do it all at once with arrays. These arrays will contain 1) a list of words, 2) the letters needed to make a given word and 3) the letters guessed. Obviously, the content of arrays 2 and 3 will be determined once the game has begun, so for now we'll leave 'em empty. The code should look like this:

wordList_array = new Array("gorilla", "elephant", "orangutan", "leopard", "cougar", "chimpanzee", "zebra", "spaghetti", "pizza", "meatloaf", "pudding", "cake", "candy", "popcorn", "caramel");


lettersNeeded_array = new Array();

lettersGuessed_array = new Array();

Feel free to change the words in the first array. Another cool thing about using arrays is you can easily add new words just by tacking them on to the list.

2. Now we need to initialize all of the variables we will use:

randomNumber = 0;

selectedWord = "";

lettersLeftToGo = 0;

foundLetter = false;

notGuessed = false;

wrong = false;

This creates six separate variables that we will make use of. The first three are given an initial value of zero or "" which means "none" or "empty." The last three are set to an initial value of "false." basically we're turning everything off at the start.

3. Now some timeline related code:

interface_in._visible = false;

hangman_in.stop();

stop();

The first line hides the interface movie clip (temporarily). The second line stops the hangman sequence from playing. The third line, well, you should know what it does.

4. Now we need to add some event handlers — code that is triggered by user actions. For best results, this code should go before the code we've already written, so make room for it at the top of the Actions script window. The first chunk of code tells the game what to do when the play button is pressed:

play_btn1.onRelease = function() {
hangman_in.gotoAndStop("play");
play_btn1._visible = false;
interface_in._visible = true;
interface_in.display_txt.text = "";

Note that we're not done with this handler yet, thus the missing curly-bracket. So when the button is pressed, the hangman movie clip jumps to the first frame (if it is not there already), the play button disappears, the interface appears, and the display text box in the interface is emptied of any text that might be there (from a previous round, for example).

5. Now we need to select a word from our list at random:

randomNumber = Math.round(Math.random()*(wordList_array.length-1));

selectedWord = wordList_array[randomNumber];

lettersLeftToGo = selectedWord.length;

The first line generates a random number from zero to (one less than) the length of the array (so, if the array contains 15 items as ours does, it will generate a random number from 0 to 14. Why 0-14 and not 1-15? Computers start counting at zero). The second line figures out which word in our array the number corresponds to and assigns it to the variable "selectedWord." So zero would be "gorilla," 1 would be "elephant," etc. The third line determines how long the selected word is, and sets that number as the value of "lettersLeftToGo."

6. Now we get tricky:

for (i=0; i<selectedWord.length; i++) {
lettersNeeded_array[i] = selectedWord.charAt(i);
}

This code is a loop. Loops have 3 parts in the "for" statement: 1) a variable is created and given a numeric value (in this case "i" is given the value "0"), 2) a comparison is made (is the value of "i" less than the length of the word?), and an action is prescribed (if so, add one to the value of "i"). The line that follows (in the curly-brackets) contains an action that will repeat every time line 1 loops. In this case, the "lettersNeeded" array (which we created earlier but did no fill), becomes filled with the letters that make up the chosen word. So "gorilla" would cause the loop to repeat seven times, filling the array with the letters g, o, r, i, l, l, and a.

7. Now we'll fill the final array:

for (i=0; i<selectedWord.length; i++) {
lettersGuessed_array[i] = "?";
interface_in.display_txt.text += "?";
}

};

Very similar to the previous one, but this time we're filling the array with nothing but question marks. When the mystery word appears on screen it will look like this : "???????" at least until the player makes a successful guess. Also very important—note the last curly bracket; this closes the statement we started back in step 4.

8. The final chunk o' code gets the button working and creates the engine that drives the game. It's fairly lengthy, so once again we'll break it down into smaller pieces:

interface_in.enter_btn1.onRelease = function() {
wrong = true;
interface_in.display_txt.text = "";

When the enter button is pressed, a function is created that does many things. First, the variable called "wrong" is reset to "true," which assumes that the user has guessed incorrectly (we'll deal with right answers later). The third line clears out the text in the display text box (to be replaced by the updated text later on in this code).

9. Now we add a loop and a comparison:

for (i=0; i<selectedWord.length; i++) {
foundLetter = lettersNeeded_array[i] == interface_in.input_txt.text;
if (foundLetter) {
wrong = false;
lettersLeftToGo--;
lettersGuessed_array[i] = interface_in.input_txt.text;
}

interface_in.display_txt.text += lettersGuessed_array[i];

}

Okay this is a bit tricky, so stay with me. First a loop is set up to run through the following comparisons one time for every letter in the word (so a 4-letter word would loop 4 times). In line 2 it checks to see if the user has entered a correct letter in the input_txt field. If it matches the first of the lettersNeeded, then foundLetter is considered "true." If there is no match, foundLetter will remain "false." When the loop repeats, it will check the second letter, then the third, and so on.

If the user has found a correct letter, three more things happen: 1) the variable "wrong" is changed to false (because the user is right, not wrong), 2) one is subtracted from the "lettersLeftToGo" total (so, if it's a 4 letter word, we're now down to 3 letters left to go), and 3) the question mark in the text box is replaced by the appropriate letter. If the user has chosen incorrectly, the variables remain as they are, and a question mark is written in place of the letter once again.

But there is a problem...let's say one of the correct letters is "a." If the player guesses "a" all of those things happen. What if she guesses "a" again? Well, it's still a correct answer, so the "lettersLeftToGo" would drop by one again. If she kept entering "a" eventually the "lettersLeftToGo" would hit 0, and the game would end, even though she'd only guessed one correct letter. So, we need to add some code that checks to make sure that the letter guessed correctly has not been guessed before. Note the new code in red:

for (i=0; i<selectedWord.length; i++) {
foundLetter = lettersNeeded_array[i] == interface_in.input_txt.text;
notGuessed = lettersGuessed_array[i] != interface_in.input_txt.text;
if (foundLetter && notGuessed) {
wrong = false;
lettersLeftToGo--;
lettersGuessed_array[i] = interface_in.input_txt.text;
}

interface_in.display_txt.text += lettersGuessed_array[i];

}

This line checks to see if the letter guessed matches one of the letters stored in the "lettersGuessed" array. If it does not (the "!=" character means does not equal), then "notGuessed" is set to true. If it does match, "notGuessed" remain false.

Now for the "if" statement to work, both "foundLetter" AND "notGuessed" have to be true. "if (foundLetter && notGuessed)" is a compact way of writing "if ((foundLetter == true) and (notGuessed == true))". If one or both statements is false, then the "if" statement is not executed. Confused? Don't worry, it works. Trust me.

10. Okay that takes care of the right answers, what about the wrong ones?:

interface_in.input_txt.text = "";

if (wrong ) {
hangman_in.nextFrame();
if (hangman_in._currentFrame == 10) {
interface_in._visible = false;
play_btn1._visible = true;
}
}

If the selected letter is wrong, the hangman movie clip advances one frame. Once frame 10 is hit (the last frame in out hangman sequence), the interface disappears and the play button reappears, so that the player can play again. Note: if you added more steps to your hangman animation, you'll have to adjust the "if (hangman_in.currentFrame...)" line to reflect your total.

11. Last bit:

if (lettersLeftToGo == 0) {
hangman_in.gotoAndStop("win");
interface_in._visible = false;
play_btn1._visible = true;
}

};

If lettersToGo hits zero, that means the player has successfully guessed all of the letters, solving the puzzle. The hangman movie clip jumps to the "win" screen, the interface vanishes, add the play button appears so the user can play again.

That's it! Try it.

Course Outline

Syllabus

Student Resources