Hangman 2

54 Make a new layer and call it actions. Lock it, since a layer in Flash does not need to be unlocked for you to enter ActionScript code inside it. Click on the layer’s first (and only) keyframe to select it for code inserting.

55 Select Window > Actions to open the Actions panel.

Here below is the entire code for this project for you to copy and paste into the actions panel. Once you have posted the code your movie is ready to run! Test it with Ctrl-Enter (if you are in symbol editing mode then return to Scene 1 before doing Ctrl-Enter). The most important thing, however, is to try to understand roughly how the code works, which is explained further down this page and on the next page. On page 4 you will have the option of modifying this movie so that it gets its list of mystery words from an external file (an XML file) and on page 5 you will have the possibility of getting text out of an external txt file and into your Flash movie.

---------------------------------------------------------------------------------------------------------

// Section 1
guessWord_txt._visible = false;
startScreen_mc.message_txt.text = "Welcome to the hangman game! To, win you must try to guess the mystery word. Press the play button below to start.";

// Section 2
var words:Array = new Array();
words = ["dog", "elephant", "cat", "giraffe", "lion", "wolf", "ostrich", "penguin", "whale", "raccoon", "tiger", "snake", "lizard"];
var alphabet:String = "abcdefghijklmnopqrstuvwxyz";
var chosenWord:String = new String();
var displayedText:String = new String();
var playAgain:Boolean = false;

// Section 3
function randomize(playAgain):Void {
    var randomNumber:Number = random(words.length);
    chosenWord = words[randomNumber];
    if (playAgain) {
        guessWord_txt.text = "";
    }
    for (var i:Number = 0; i<chosenWord.length; i++) {
        guessWord_txt.text = guessWord_txt.text+".";
    }
    displayedText = _root.guessWord_txt.text;
}

// Section 4
function placeLetters():Void {
    this.createEmptyMovieClip("allLetters_mc", 1);
    allLetters_mc._y = 400;
    allLetters_mc._x = 20;
    for (var i:Number = 0; i<alphabet.length; i++) {
        var newLetter:MovieClip = allLetters_mc.attachMovie("letterButton", "letter"+alphabet.charAt(i), i);
        newLetter.letter_txt.text = alphabet.charAt(i);
        if (i<13) {
            newLetter._y = 0;
            newLetter._x = i*35;
        } else {
            newLetter._y = 35;
            newLetter._x = (i-13)*35;
        }
        newLetter.onRelease = function() {
            var matchFound:Boolean = false;
            var clickedLetter:String = this._name.charAt(this._name.length-1);
            for (var j:Number = 0; j<chosenWord.length; j++) {
                if (chosenWord.charAt(j) == clickedLetter) {
                    _root.guessWord_txt.text = displayedText.substr(0, j)+clickedLetter+displayedText.substr((j+1));
                    matchFound = true;
                    this._visible = false;
                }
                displayedText = _root.guessWord_txt.text;
            }
            if (displayedText == chosenWord) {
                endOfGame(true);
            }
            if (matchFound == false) {
                this._visible = false;
                _root.hangman_mc.nextFrame();
                if (hangman_mc._currentframe == 10) {
                    endOfGame(false);
                }
            }
        }
    }
}

// Section 5
function endOfGame(success:Boolean) {
    allLetters_mc.removeMovieClip();
    startScreen_mc._visible = true;
    if (success) {
        startScreen_mc.message_txt.text = "Congratulations! You did it! Want to try again? Press the play button below.";
    } else {
        startScreen_mc.message_txt.text = "GAME OVER! Aaargh! You killed the little guy! Want to try again? Press the play button below.";
    }
    playAgain = true;
}

// Section 6
startScreen_mc.play_mc.onRelease = function() {
    this._parent._visible = false;
    guessWord_txt._visible = true;
    hangman_mc.gotoAndStop(1);
    randomize(playAgain);
    placeLetters();
};

---------------------------------------------------------------------------------------------------------

Note that some lines above (such as the second one) are in a smaller font than the rest so that they do not wrap. In the Actions panel they should appear in the same size font as all the other code.

An explanation of the Actionscript code

// Section 1
guessWord_txt._visible = false;
startScreen_mc.message_txt.text = "Welcome to the hangman game! To, win you must try to guess the mystery word. Press the play button below to start.";

The first line effectively hides the guessWord_txt text field by setting its _visible property to false. It will be made visible once the player presses the play button, the functionality of which will be defined later.

The second line sets the text property of the text field startScreen_mc.message_txt to the text shown above.

Defining the game variables

// Section 2
var words:Array = new Array();
words = ["dog", "elephant", "cat", "giraffe", "lion", "wolf", "ostrich", "penguin", "whale", "raccoon", "tiger", "snake", "lizard"];
var alphabet:String = "abcdefghijklmnopqrstuvwxyz";
var chosenWord:String = new String();
var displayedText:String = new String();
var playAgain:Boolean = false;

Here, you are defining variables that will be used later. If possible, it is good practice to define as many variables as possible in one place. This makes your code cleaner and easier to edit later. Let’s see what will each variable be used for:

bulletThe words variable is of the Array type, meaning it will store many values. The following line puts the words used in this hangman game into the array.
bulletThe String (a String value is a text value, remember) variable alphabet holds inside all the letters of the English alphabet. This is necessary for checking if a letter the player has pressed is inside the hidden word or not.
bulletThe chosenWord variable (a String, too) will hold inside itself a randomly picked word from the words array. This is a must, otherwise the same word would pop up each time, which would make the game rather boring!
bulletThe displayedText (again, a String) variable’s value is the text that will be shown in the guessWord_txt text field. This is a piece of text that will consist of correctly guessed letters and dots (or question marks) that fill in for the letters that haven’t been guessed by the player yet.
bulletThe variable playAgain is of the Boolean type and is set to false. This variable will serve for checking if the player has pressed the play button after finishing the first game (whether she succeeded in guessing the hidden word or not) and subsequently, resetting the guessWord_txt text field to its initial state, with no text at all displayed inside it.

Making a randomizing function with ActionScript

// Section 3
function randomize(playAgain):Void {
    var randomNumber:Number = random(words.length);
    chosenWord = words[randomNumber];
    if (playAgain) {
        guessWord_txt.text = "";
    }
    for (var i:Number = 0; i<chosenWord.length; i++) {
        guessWord_txt.text = guessWord_txt.text+".";
    }
    displayedText = _root.guessWord_txt.text;
}

As is obvious from the first line, this function has a parameter passed to it, playAgain. When you created this variable earlier, you defined it as a Boolean type of variable, with its initial value set to false:

var playAgain:Boolean = false;

This is to make possible for different actions to execute, depending whether the player is playing for the first time, or a subsequent one. Let’s see how this actually works: the function randomize is called only when the player has clicked the “Play!” button (you will add the code for this button at the very end of this tutorial). So, suppose the player is playing the game for the first time. The button is clicked, and the randomize function is called, with the playAgain parameter passed to it with its value set to false.

The first line inside the function creates the randomNumber variable, of the Number type. Its value is a random value, chosen between zero (the zero itself included) and the number between the parenthesis (words.length). So, in this example, you have 14 elements inside the words array. And Flash knows this thanks to the array’s length property which can retrieve it. So, Flash would pick the value like this:

var randomNumber:Number = random(words.length);
randomNumber = random(14);

So a random value is chosen between 0 and 13. Next, from this same array (words), the word corresponding to this random number is chosen:

chosenWord = words[randomNumber];

Flash reads the randomNumber variable’s value and searches for the element with that position inside the words array, and stores it inside the chosenWord variable. Elements of an array have numbered positions, starting from zero, like this:

Next, Flash checks if the value of the playAgain variable is set to true:

if (playAgain) {
guessWord_txt.text = "";
}

And if it is, the text field which displays the letters the player has guessed is emptied from any text. Why? Because if playAgain equals true, it means the player has pressed the “Play!” button again and the game is started again. And it is logical that if it is going to be played again, that the text field has to be empty again.

After that, the following code is executed, no matter if the playAgain variable equals true or false:

for (var i:Number = 0; i<chosenWord.length; i++) {
guessWord_txt.text = guessWord_txt.text+".";
}
displayedText = _root.guessWord_txt.text;

This is a familiar for loop. The condition for the loop to exit is that i must be lesser than the number of characters of the word stored inside the chosenWord String variable. Let’s say for example that the word “lion” was the one randomly picked from the words array. It has 4 characters (letters) inside it: lion. So, the loop will go from 0 to 3. Once it reaches 4, it will break and stop executing the code inside itself. And this code says the following:

guessWord_txt.text = guessWord_txt.text+".";

The text shown inside the guessWord_txt text field equals the text already found in it, with a dot (.) added to its end. So, in the case the word “lion” was picked, the for loop will make 4 iterations, and the following would be seen by the player in the text field: ....

Four dots, that’s right. If you don’t like the dots (which represent the letters of the hidden word), you can put a question mark (?) or any character that you deem appropriate. The loop goes like this: the first time, there is nothing displayed in the text field, so:

guessWord_txt.text = guessWord_txt.text+".";
guessWord_txt.text = "" + ".";
guessWord_txt.text = ".";

During the second loop, it goes like this:

guessWord_txt.text = guessWord_txt.text+".";
guessWord_txt.text = "." + ".";
guessWord_txt.text = "..";
etc.

And so on, until you get 4 dots displayed. Next comes the line of ActionScript code that comes after the loop:

displayedText = _root.guessWord_txt.text;

The text that is displayed inside the guessWord_txt field on the stage (i.e. the dots representing the hidden word) is stored inside the displayedText variable which you defined earlier. This variable will be used to store the letters guessed by the player along with the dots, so that the proper thing can be displayed and compared to the complete hidden word (you will see how this comparison is done later).

Fine! You’ll see now how to create the biggest function in this project, which will place the letter buttons on the stage, define their clickability and much, much more. Onwards!

Please jump to the third part of the ActionScript hangman lesson.