Hangman

For this lab, we will implement the good ol' hangman game, similar to what was demonstrated in class. The assignment is intended mainly to specify the behavior of the page. I will include some shots of my solution, but the assignment is not intended to specify any specific styling or layout (mine is pretty basic anyway).

1. The page should come up showing
   1. A list of blanks or other appropriate markers which show how many letters are in a word to guess.
   2. A control to select a lower-case case letter as a guess.
   3. Counts of wins and losses, which are zero.
   4. A control to surrender.
   5. An image for an empty gallows.
   
   
2. When letters are guessed using the selector, the display is updated appropriately.
   1. If the guessed letter is in the word, show it in all positions where it occurs.
   2. Indicate in some way which of the selection alphabet letters have been selected, and whether they were correct or not.
   3. Disable the selection of the guessed letter.
   4. For each incorrect guess, change the image to add the next body part to the image.
   5. If the selected letter is the last correct, or the sixth incorrect guess, see below.
   
   
3. When a guess is correct, and fills in the last blank in the word:
1. Make some indications that the guess is correct. (I just used a green checkmark.)
2. Increment the win count.
3. Display a control to fetch another word.
4. Retain the other information on the page, perhaps making style changes if appropriate.


4. When a guess is the sixth wrong one:
1. Make some indications that the guess is incorrect. (Red X for me.)
2. Increment the loss count.
3. Fill in the missed letters with their correct values. Use colors or some other style that you like to distinguish the filled-in letters from the guessed ones.
4. Display a control to fetch another word.
5. Retain the other information on the page, though appropriate style translations are certainly allowed.


5. When the user presses the give up button, treat it the same as a loss.
1. Make the changes as for a loss.
2. The gallows picture may remain partial, and it may show fewer incorrectly-guessed letters than filled in.
6. When the user asks for another word:
1. Choose one.
2. Reset the display to the initial form, except that the counts are retained, and the number blanks should reflect the size of the new word.
7. There's no rule against having other appropriate indicators or decorations. Whatever you think will look nice and enhance the game.
8. I used seven very simple image files to display the gallows steps. You are welcome to them here. You may find or make different ones if you prefer. (Or, if you are a glutton, you can learn about canvas and draw them with JavaScript.)

9. Get words from a service located at at http://sandbox.mc.edu/~bennet/cs445/php/getword.php. It returns a random word with a mime type of plain text. The words are from here. The service selects a word at random, with a minimum length of seven, and no maximum. You can set limits with a URL query, like http://sandbox.mc.edu/~bennet/cs445/php/getword.php?min=5&max=10. Returns a 500 code if it can't come up with anything. The service chooses a word which is all lower-case letters.

10. Use JQuery to manipulate the DOM. If you like, you may use its ajax method to fetch words, but it would be better to use new native fetch interface. Do not use XMLHttpRequest.

I found that style changes are made most easily by defining classes, and using the jQuery addClass and removeClass methods to change the appearance of the elements. Elements may have multiple classes which is helpful. The letters in my selectable list are all class letter. When selected, I add the miss or find class to change its appearance; it now has two classes.

Of course, extra classes must be removed when a new word is loaded. If they are all in a div called letterbox, you can do this with something like $('#letterbox div').removeClass(['find','miss']), which gets 'em all in one line.

The jQuery on method is used to add event call-backs. It also has a nice off method to remove them. When I disable selection of a letter after it is guessed, I remove its call back with something like $(this).off('click').

Testing Annoyance

I usually like to test by just editing my file locally and loading into a browser. I can then conveniently edit and reload as needed. A problem with this project is that most browsers will not allow JavaScript originating from a file: URL to fetch from an http: or https: URL. So my page loaded from my local file system can't fetch words from Sandbox. So...

1. Just store it on Sandbox and work there. Actually, any server should work so long as you are viewing your page at an http URL.
2. Some dev kits come with a localhost server. This is a simple local web server that serves local files under the host name localhost. If you have one of these, you can load your test page at the localhost URL and it should be able to fetch the word from Sandbox.
3. It probably makes sense anyway to make a function to perform the word fetch and return the word. I created a temporary version that just takes a word from a local array and returns it. I could then test the rest of the program, then move it to Sandbox and finish the fetching version.

After you post your page on Sandbox, make sure you can view it online, then send me the page URL through this form.

On the off chance you care, here is getword.php, the word delivery script.