Next page | Contents page |

Next steps

This is how we completed the description of the game but your version will not be exactly the same:


  choose a phrase and display it as dashes;
  
  repeat
  {
    ask the user to guess a letter or the whole phrase;

    if guess length is 0
      tell user about error;
    else if guess length is 1 (guessing a letter)
    {
      for each letter position in the phrase
      {
        if guessed letter matches
          show the letter in the phrase;
      }
  
      if there were no matches
      {
        draw a segment of the diagram;
        show the letter in a list of failures;
      }
    }
    else (length must be > 1, so guessing whole phrase)
    {
      if guess matches the phrase
        game over - user WINS;
      else
        draw a segment of the diagram;
    }	

    if diagram is complete
      game over - user LOSES;
	  
    if phrase is complete
      game over - User WINS;
  }
  until the game is over

Think about the line near the beginning:
ask the user to guess a letter or the whole phrase;

How should that be done? There is a predefined JavaScript function called prompt():

var guess = prompt ("Guess a letter or the whole phrase");

Click this button to see what it looks like in your system:

In Windows 7 it looks rather nasty because the whole screen behind it is greyed out (for security reasons, to make the user aware they are entering data that might be sent to a web server, though not in our case). So we suggest this approach should not be used.

(By the way it would be easy to overcomplicate the user interaction by first asking them whether they want to enter a single letter or a complete phrase and then having a different input for each of those; keeping such interaction as simple as possible is a very important part of program design. We hope you will agree that the solution proposed here is nice and simple.)

Instead think about having an input field on the game page itself, with two buttons:

(the buttons here are not active). Those would each trigger some code from their onclick events: a different piece of code for each button.

Our design then becomes two functions, say enterGuess() and newGame(). Perhaps you can see that the outer loop (repeat ... until game is over) becomes redundant (think about it).

The new description is like this:


  function newGame ()
  {
    choose a phrase and display it as dashes;
    clear the diagram and list of failed guesses;
  }
  
  function enterGuess ()
  {
    get the guess from the input field;

    if guess length is 0
      tell user about error; (or maybe just ignore?)
    else if guess length is 1 (guessing a letter)
    {
      for each letter position in the phrase
      {
        if guessed letter matches
          show the letter in the phrase;
      }
  
      if there were no matches
      {
        draw a segment of the diagram;
        show the letter in a list of failures;
      }
    }
    else (length must be > 1, so guessing whole phrase)
    {
      if guess matches the phrase
        game over - user WINS;
      else
        draw a segment of the diagram;
    }	

    if diagram is complete
      game over - user LOSES;
	  
    if phrase is complete
      game over - User WINS;
  }

In Part 2 of this course we will develop this application. Along the way we will show how to code in JavaScript the 3 kinds of constructions that are generally sufficient to make a program:

All of those are present in our outline of the game. In fact if each action line (such as draw a segment of the diagram; became a function call, we have almost written the application except for completing the details as function declarations.

The Wikipedia article about Hangman has a rather disturbing reference: Foreign English teacher under attack.... Lest we be accused of encouraging suicide we should perhaps invent a different diagram for use in the game!

Next page | Contents page |