View Single Post
 
Old June 3rd, 2008, 07:26 PM
Old Pedant Old Pedant is offline
Friend of Wrox
 
Join Date: Jun 2008
Location: Snohomish, WA, USA
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

Well, I tested it in MSIE 6, with JavaScript debugging enabled and using the Microsoft Script Editor as a debugger. That debugger isn't as good a FireBug by a long shot, but it sure caught those errors I noted. So I fixed those two and then got still more "method not available on that object" and stuff like that and gave up. So I dunno what to tell you. Maybe FireFox does allow indexOf( ) on array.

This looked like a fun thing to try, so here is what I whipped up.

I've never posted code to these forums, so I don't know whether it will get all messed up or not. I guess we'll just have to see:

***** hangman.html *****
Code:
<html>
<head>
<style>
table#WORD { }
table#WORD td { border: solid brown 5px; height: 30px; width: 30px;
                font-family: arial; font-size: 20px; color: brown; text-align: center;

              }

table#LETTERS    {  }
table#LETTERS td { border: solid green 2px; background-color: lightgreen; width: 20px; height: 20px;
                   font-family: arial; font-size: 16px; color: green; text-align: center;
                   padding: 4px; cursor: hand; 
                 }

div#HANGPIC { background-color: yellow; color: red; font-family: arial; text-aligh: center;
              width: 200px; height: 200px;
              border: solid red 10px;
            }

.message { font-family: arial; font-size: x-large; color: brown; }

</style>
<script>
// really should encrypt the words so they aren't visible in the code, 
// but this works for demo purposes:
var words = new Array("AARDVARK","CATASTROPHE","XEBEC","JABBERWOCKY","SPHINX");
// this keeps track of how many words have not yet been guessed:
var available = words.length;
// this is the current word
var WORD = null;
// and this is the number of misses so far
var misses = 0;

// Each time we need a new word, we just call this function:
function init( )
{
    // make sure there are some words not yet attempted
    if ( available < 1 )
    {
         alert("You have played with all the words I have.");
         available = -1;
         return;
    }

    // at least one word left, so init the main display
    misses = 0;
    // here is where we would init image back to no misses...but for now:
    var hang = document.getElementById("HANGPIC");
    hang.innerHTML = "&nbsp;<br/>";
    hang.style.fontSize = 12;

    // choose a word not yet chosen
    var choice = Math.floor( Math.random() * available );
    WORD = words[choice];
    --available;
    words[choice] = words[available]; // so that choice can't get chosen again

    // initialize all the cells where the correct guesses will be placed
    var wLetters = document.getElementById("WORD").getElementsByTagName("td");
    for ( var w = 0; w < wLetters.length; ++w )
    {
        wLetters[w].innerHTML = "&nbsp;"; // *MUST* have content...nbsp is easiest
        var wStyle = wLetters[w].style;
        wStyle.backgroundColor = "yellow";
        wStyle.color = "brown";
        // only show as many cells as there are letters in the word to be guessed
        wStyle.display = ( w < WORD.length ) ? "inline" : "none";
    }
    // and re-init the letter CHOICES so that all are visible again
    var cLetters = document.getElementById("LETTERS").getElementsByTagName("td");
    for ( var c = 0; c < cLetters.length; ++c )
    {
        var cLet = cLetters[c];
        cLet.style.color = "green";
        cLet.style.cursor = "hand";
        cLet.onclick = function() { letterClick(this); }
    }

}

// each time the user clicks on a letter, we call this function:
function letterClick( which )
{
    if ( available < 0 ) return; // game is over...all words guessed

    // if user already clicked on this letter, ignore the click this time:
    if ( which.style.color != "green" ) return;

    // mark this letter as used (by simply hiding the character and changing the cursor)
    which.style.color = "lightgreen";
    which.style.cursor = "arrow";

    // get the letter boxes where the successful guesses are recorded
    var wLetters = document.getElementById("WORD").getElementsByTagName("td");
 
    var letter = which.innerHTML; // this is the letter that was clicked on
    var hit = false; // if this is false after the check, then the user missed
    var matched = 0; // this records total number of letters correctly guessed so far

    // check every letter in the word
    for ( w = 0; w < WORD.length; ++w )
    {
        // if a letter is correct, put it into the word display
        if ( WORD.charAt(w) == letter )
        {
            hit = true; // say user got one!
            wLet = wLetters[w]; 
            wLet.innerHTML = letter; // put the guessed letter into display
            wLet.style.color = "green"; // and give it color
            wLet.style.backgroundColor = "lightgreen"; // and background
        }
        // and count how many letters are correct (from current guess *AND* from prior guesses)
        if ( wLetters[w].style.backgroundColor == "lightgreen" ) ++matched;
    }
    // check to see if all letters guessed:
    if ( matched == WORD.length )
    {
        if ( confirm("YOU WON!!!!\n\nCONGRATULATIONS!!\n\nClick OK to play again.") )
        {
             init( );
        } else {
             available = -1;
        }
        return;
    }

    // not a winner...did he/she hit any letter?
    if ( hit ) return; // yes...all done for this turn.

    // the game plays faster without the following alert, so remove it if you wish:
    alert("Nope, there is no '" + letter + "' in the word!");

    // here is where we would change the image...but for now:
    ++misses;
    var hang = document.getElementById("HANGPIC");
    hang.innerHTML = "&nbsp;<br/>" + misses;
    hang.style.fontSize = (12 + 12 * misses) + "px";

    // and check for end of game
    if ( misses > 6 )
    {
        if ( confirm("You lost!\n\nClick OK to play again.") )
        {
             init( );
        } else {
             available = -1;
        }
    }
}

</script>
<body onload="init( );">
<center>
<p class="message">H A N G M A N !</p>
<br/>
<div id="HANGPIC"></div>
<p>&nbsp;<p>
<table id="WORD">
<tr>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
    <td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
<p class="message">Click on a letter below to guess it!</p>
<br/>
<table id="LETTERS" cellspacing=4>
<tr>

    <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td>
    <td>H</td><td>I</td><td>J</td><td>K</td><td>L</td><td>M</td><td>N</td>
    <td>O</td><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td><td>U</td>
    <td>V</td><td>W</td><td>X</td><td>Y</td><td>Z</td>
</tr>
</table>
</body>
</html>