Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
And what if the player clicked a letter that isn't found in the hidden word? Then the matchFound variable stays false. And the following code will be executed (you already entered it, as a part of the movie clip's onRelease event, remember):
if (matchFound == false) {
this._visible = false;
_root.hangman_mc.nextFrame();
if (hangman_mc._currentframe == 10) {
endOfGame(false);
}
}
As is clear from the first line, this is an if statement that checks if the matchFound variable equals false. If it doesn't, it gets completely ignored, along with all the code placed inside it. But since I am explaining here what happens when the player clicked the wrong letter, I will tell you what happens when matchFound really does equal false.
The first line of code that is run is the one that hides the clicked letter movie clip:
this._visible = false;
Remember, the letter the player has clicked has to be hidden, whether it was a good or a bad guess. And now you have to show the player that she or he made a mistake: the hangman must begin to appear. This is done by advancing the animation inside the hangman_mc movie clip by one frame:
_root.hangman_mc.nextFrame();
And you also have to make Flash check if the animation arrived at the end, in the case the player has made all the mistakes she could and the game is over:
if (hangman_mc._currentframe == 10) {
endOfGame(false);
}
If the current frame of the hangman_mc movie clip is the tenth frame (hangman_mc._currentframe == 10), the endOfGame() function will be called, but this time with the parameter passed to it set to false, signaling that the game is over and that the player didn't succeed in guessing the hidden word.
I have made this game to end after ten wrong guesses, but of course, you can give more chances to the player if you wish so. Just remember that your hangman animation has to have the same number of frames as there are wrong guesses that a player can make. The animation must be more complex, too: you must add more elements that will appear as a wrong guess is made: the eyes, nose and mouth appearing for each bad guess, or maybe fingers on a hand. Simply decide what looks best for your game.
61. Add this code to the one already inserted:
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;
}
The function endOfGame() governs what will be displayed on the screen that will appear at the end of a game, whether the player succeeded in guessing the word or not. This function has a parameter passed to it, which is a Boolean value — it can either be true or false.
The first two lines of code that are being executed upon function's execution do so no matter if the parameter turned out as true or false:
allLetters_mc.removeMovieClip();
startScreen_mc._visible = true;
The first one removes all the letter buttons. These buttons are the movie clips that were attached dynamically from the Library inside the allLetters_mc movie clip. So by removing this movie clip with the removeMovieClip() method you are effectively removing all the buttons with it.
The second line makes the startScreen_mc movie clip appear by setting its _visible property to true. This movie clip contains the text field that displays the welcome message at the start of a game and the resulting message at the end of a game. Also, the "Play!" button is situated inside it.
And now comes the if conditional statement which decides what will be shown as the message, depending on player's success in guessing the hidden word:
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.";
}
The construct if(success) has the same exact functionality as if you had written if(success == true). The former one is a shorthand version. Why write more code if you can make it more compact? So, if the player guessed the word correctly (success), the following ActionScript code will be executed:
startScreen_mc.message_txt.text = "Congratulations! You did it! Want to try again? Press the play button below.";
It is a simple command that tells Flash what to display in the message_txt text field (placed inside the startScreen_mc movie clip). Just remember that the message must be included between the quotation marks.
On the other hand, if the player failed to guess the hidden word picked at random, the if part of the conditional will be ignored, and the else portion will be executed:
startScreen_mc.message_txt.text = "GAME OVER! Aaargh! You killed the little guy! Want to try again? Press the play button below.";
Again, the same text field is referenced, but with a different message.
The endOfGame() function contains one more bit of code that will be executed always, because it is outside the if conditional construct:
playAgain = true;
The variable playAgain is set to true (remember, it is defined as false at the very start of the code), indicating to Flash that the player isn't playing for the first time. Thanks to this, if the player begins a new game, Flash will erase the text that stayed in the main text field from the previous game. I explained that bit before, when showing you the inner workings of the the randomize() function. The code that resets the text field to its initial state is shown in bold:
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;
}
62. At last, add the final chunk of ActionScript code:
startScreen_mc.play_mc.onRelease = function() {
this._parent._visible = false;
guessWord_txt._visible = true;
hangman_mc.gotoAndStop(1);
randomize(playAgain);
placeLetters();
};
This is the Play! button's onRelease event handler function. It tells Flash what to do when the player has clicked the button, as for the first time when the game is played, as well as for all the subsequent rounds. The five lines of code included do the following:
The first one hides the startScreen_mc movie clip:
this._parent._visible = false;
The construct this._parent points to the startScreen_mc movie clip. Since it is placed inside the play_mc movie clip's onRelease event, the keyword this points to the play_mc movie clip itself. And the keyword _parent denotes its parent movie clip (the one which hosts it) — startScreen_mc.
The main text field is made visible again:
guessWord_txt._visible = true;
And the hangman_mc movie clip is sent back to the first frame, which is empty:
hangman_mc.gotoAndStop(1);
You must do this, because at the start of a new game, no part of the hanging animation can be visible — no potential wrong guesses have been made yet.
A new word is picked at random, by calling the randomize() function:
randomize(playAgain);
This is done so that the game can start with a new word.
NOTE Although a new word will be picked at random each time the hangman game is started, chances are that the same word could appear. This is not because of Flash, but because of the law of probability. So, the more words you insert in your XML file, the lesser the chance of the same word appearing again. ActionScript code could be written for creating a mechanism that would eliminate a word that has already been guessed, but I will leave that for some other occasion :).
And as the last action, the placeLetters() function is called, to create the allLetters_mc movie clip anew and attach all the letter buttons dynamically again:
placeLetters();
The first fact that I want to tell you is that this hangman game (the final SWF file) has a size of only 3 KB! That's pretty cool! Both the XML and TXT files are so small in size that the whole game loads almost instantly.
You saw how ActionScript helps to streamline tasks that would require too much time to create manually, like the creation of all the alphabet letters' buttons. Also, like I said before, this Flash game is completely dynamic because once the SWF is finalized, all you have to do to modify the game is change the data in the XML and TXT files.
As for the animation of the hanging, you can make it more complex, even add sound — this is just a question of much time and effort you are willing to put into it.
Pay attention to one important detail: this game supports only one-word guesses. You cannot insert two words inside any of the XML elements (for example: <word>two words</word>), because the code in this lesson isn't created to handle non-breaking spaces. However, you have learned a lot and I am sure that you will figure this out by yourself, if you wish to insert this capability into your hangman game.
If you got any questions, post them in the forums, inside the ActionScript section.
Download all the source files here
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
