Hangman Game

Description: Learn how to make the classic letter guessing game
Author: John Bezanis
Added: October 1st 2008
Version: Flash 8

Hangman is a popular game which can be coded using a few symbols and a short amount of code. The object of the game is to reveal a word by guessing the letters of the word one by one. The player loses by guessing 5 incorrect letters. A random answer is selected at the start of each game

Start by creating the movie clip that holds the graphics for the hangman. Set the name to missgraphic and the Linkage Identifier to missgraphic. Select Export for Actionscript.

On the first frame, draw the frame and hang a noose from it. In the actions section, add stop(); For frames 2-7, add one piece to the hangman. Return to the main stage. Delete the symbol from the stage, keeping it in the library.

Next we are going to create the buttons which contain the letters for the player to guess. Draw a square with rounded corners. Copy and paste the rectangle. Change the color to white and Modify->Shape->Expand Fill. Set the inset to 5px. Add a text box with type dynamic text. Set the Var to displayletter. Return to the main stage and delete the movieclip from the stage. In the library, select the movieclip, right click Export for Actionscript and set the Linkage Identifier to displayletter.

Next comes the blocks that hold the display of the answer. Start by drawing a 14x2 rectangle. Convert it to a movieclip named letterholder. Move the rectangle to the middle horizontally. Create a dynamic text box. Set the instance name to letter and Var to displayletter. Move back to the main stage and delete the movie clip. In the library, set letterholder's linkage identifier to letterholder and select Export for Actionscript.

The last symbol is the playagain button. Write the text and convert it to a button named playagain. I like to draw a transparent box on a layer below the text to make it easier to click. On frame 2, insert a new keyframe and set the color of the text a bit lighter than the up frame. Return to the main stage and delete the button from the stage. Set the button to Export for Actionscript and set the linkage identifier to playagain.

Now that all of the graphics are done, we can start writing the code. All of the code is located on the main stage. Start by creating an array that stores all of the answers and attaching the missgraphic to the stage.

//Array containing all of the answers
gameanswers = ['Frosted Flakes', 'Cheerios', 'Honey Combs', 'Lucky Charms', 'Honey Bunches of Oats', 'Apple Jacks', 'Rice Krispies', 'Fruit Loops', 'Count Chocula', 'Boo Berry'];
//Attach the missgraphic
this.attachMovie('missgraphic','missgraphic',this.getNextHighestDepth(), {_x:175,_y:10});

The first function we'll write is one to make a new game

//Function that begins a new game
function newGame() {
  //select a random answer from the array
  answer = gameanswers[Math.floor(Math.random()*gameanswers.length)];
  //Add all 26 letter buttons to the stage
  for (curindex=0; curindex<26; curindex++) {
    //Use the character code for each letter to attach the letter
    attachMovie('guessletter', 'guess'+String.fromCharCode(curindex+65), this.getNextHighestDepth());
    //set the x position according to its position in the alphabet
    eval('guess'+String.fromCharCode(curindex+65))._x = (curindex%13-6.5)*(eval('guess'+String.fromCharCode(curindex+65))._width+3)+Stage.width/2;
    //set the y position according to its position in the alphabet
    eval('guess'+String.fromCharCode(curindex+65))._y = Stage.height-(2-Math.floor(curindex/13))*(eval('guess'+String.fromCharCode(curindex+65))._height+3);
    //set the character display to the current letter in the loop
    eval('guess'+String.fromCharCode(curindex+65)).displayletter = String.fromCharCode(curindex+65);
    //When the player clicks the button, call the pressLetter function with the letter set
    eval('guess'+String.fromCharCode(curindex+65)).onPress = function() {
      //process the letter
      pressLetter(this.displayletter);
      //remove the button from the stage
      removeMovieClip(this);
    };
  }
  //Determine how many characters are going to be printed on each line.
  //Keep the letters of words from being split onto different lines 
  //start the row count at 0
  curline = 0;
  //the start position in the answer is 0
  linestart = 0;
  //store the length of each line into an array
  var linelengths:Array = new Array();
  //traverse all of the characters in the answer
  for (linepos=0; linepos<length(answer); linepos++) {
    //Maximum length of each formatted line
    blanklinelength = 25;
    //check if the linelength is smaller than the max line length or the first word on the line is longer than the max
    if ((linepos-linestart)<blanklinelength || linelengths[curline] == undefined) {
      //if the current character is a space, set a marker so we know how long the line should be
      //it may be updated if another word fits within the current line
      if (answer.charAt(linepos) == ' ') {
        //update the length of the current line
        linelengths[curline] = linepos-linestart+1;
      }
      //else the line has reached its limit, so move to the next line and start at the end of the last word  
    } else {
      //store where to start the next line
      linestart = linestart+linelengths[curline];
      //move to that position
      linepos = linestart;
      //move to the next line
      curline++;
    }
  }
  //set the length of the last line
  linelengths[curline] = length(answer)-linestart;
  //Now we are going to add the blank holders to the stage
  //start at the first row
  currow = 0;
  //set the position to 0
  curpos = 0;
  //Loop through the answer and add the blank holders to the stage
  for (curindex=0; curindex<length(answer); curindex++) {
    //If the current position is a space, do not create a blank holder
    if (answer.charAt(curindex) != ' ') {
      //add the letter holder
      attachMovie('letterholder', 'holder'+curindex, this.getNextHighestDepth());
      //set the x position relative to its position on the line and the number of characters on the line
      eval('holder'+curindex)._x = Stage.width/2+((curpos-(linelengths[currow]/2))*20);
      //set the y position according to the currow
      eval('holder'+curindex)._y = 280+(currow-(linelengths.length/2))*20;
      //if the current character is not A-Z, display it
      if (!hiddenCharacter(answer.charAt(curindex))) {
        //display the character, since it is a special character
        eval('holder'+curindex).displayletter = answer.charAt(curindex);
      }
    }
    //If we are at the end of a row, go to the next row 
    if (++curpos>=linelengths[currow]) {
      //move to the next row
      currow++;
      //reset the position to the left
      curpos = 0;
    }
  }
}

The next function is used for filling in characters that aren't A-Z.

//This function checks if the input character is an A-Z character
function hiddenCharacter(curchar) {
  //Set of characters that aren't revealed
  hiddenchars = 'abcdefghijklmnopqrstuvwxyz';
  //Loop through the character set
  for (charindex=0; charindex<length(hiddenchars); charindex++) {
    //If the input character is in the list, hide it
    if (curchar.toLowerCase() == hiddenchars.charAt(charindex)) {
      return true;
    }
  }
  //character is not A-Z, so display it
  return false;
}

This function is called when the player guesses a letter

//function called each time a letter button is pressed
function pressLetter(pressedletter) {
  //check if the pressed letter is in the answer
  if (!inAnswer(pressedletter)) {
    //update the graphic to the next image
    missgraphic.gotoAndStop(missgraphic._currentframe+1);
    //check if the last frame has been reached
    if (missgraphic._currentframe == missgraphic._totalframes) {
      //game lost. remove all of the remaining buttons
      for (curindex=0; curindex<26; curindex++) {
        //if the letter button exists, remove it
        if (eval('guess'+String.fromCharCode(curindex+65))) {
          //delete the button. 65 is the ascii character A
          removeMovieClip('guess'+String.fromCharCode(curindex+65));
        }
      }
      //the game has been lost, so fill in all of the blank spaces with the answers in red
      for (curindex=0; curindex<length(answer); curindex++) {
        //if there is a space or the letter has been guessed already do nothing
        if (answer.charAt(curindex) != ' ' && eval('holder'+curindex).displayletter == undefined) {
          //the letter has not been guesed, so reveal it and make it red
          eval('holder'+curindex).displayletter = answer.charAt(curindex);
          eval('holder'+curindex).letter.textColor = '0xFF0000';
        }
      }
      //Display the button to start a new game
      showPlayAgainButton();
    }
  }
}

This function checks to see if a guessed letter is in the answer.

function inAnswer(pressedletter) {
  //initialize goodletter to false. 
  //we are going to loop through the answer to see if the guessed letter is in the answer
  goodletter = false;
  //check if there are any letters in the answer that haven't been guessed yet
  blankspace = 0;
  //loop through the answer
  for (curindex=0; curindex<length(answer); curindex++) {
    //check if the guessed letter is the character in the current position of the answer 
    if (answer.charAt(curindex).toLowerCase() == pressedletter.toLowerCase()) {
      //display the character
      eval('holder'+curindex).displayletter = answer.charAt(curindex);
      //setting goodletter to true prevents the image from going to the next frame
      goodletter = true;
      //if the character at the current position hasn't been guessed, reveal it
    } else if (answer.charAt(curindex) != ' ' && eval('holder'+curindex).displayletter == undefined) {
      //there is at least one letter that hasn't been guessed
      blankspace = 1;
    }
  }
  //if every letter has been guessed, the player wins
  if (!blankspace) {
    //remove all of the guess buttons
    for (curindex=0; curindex<26; curindex++) {
      //if the button at the current position exists, remove it
      if (eval('guess'+String.fromCharCode(curindex+65))) {
        removeMovieClip('guess'+String.fromCharCode(curindex+65));
      }
    }
    //loop through all of the characters and set their color to green
    for (curindex=0; curindex<length(answer); curindex++) {
      //if the current character isn't a space, set its color to green
      if (answer.charAt(curindex) != ' ') {
        eval('holder'+curindex).letter.textColor = '0x00FF00';
      }
    }
    //show the play again button
    showPlayAgainButton();
  }
  //return whether or not the guessed letter exists in the answer 
  return (goodletter);
}

This function attaches the playagain button. When pressed, a new game begins.

//Show the button to play again
function showPlayAgainButton() {
  //attach the button
  attachMovie('playagain', 'playagain', this.getNextHighestDepth());
  //move it to the middle of the screen
  playagain._x = Stage.width/2;
  //move it towards the bottom
  playagain._y = 370;
  //Add a listener for when the button is pressed. When pressed, start a new game
  playagain.onPress = function() {
    //Reset the hangman graphic to the first frame
    missgraphic.gotoAndStop(1);
    //loop through all of the letter holders of the answer on the screen and delete them
    for (curindex=0; curindex<length(answer); curindex++) {
      //if the current position in the answer isn't a blank, remove it
      if (answer.charAt(curindex) != ' ') {
        removeMovieClip('holder'+curindex);
      }
    }
    //start a new game
    newGame();
    //delete this button
    removeMovieClip('playagain');
  };
}

Finally, we start the game when the applet loads.

newGame();

That's it! Compile the game and test it out. The source file is available below for download:

Download Source File
Download Demo SWF

Comments Currently Disabled