Hello, this is my first post here, but I'm having some trouble figuring out what I messed up on my code I'm making a Javascript game of Hangman for one of my classes and I originally had the input as a text box where you physically type in the letter and if it was wrong, it would draw the next sequence of the hangman picture and place the letter in another text box as a "Used Letters," or if you're right, it would place the letter you chose in the box for the word you're guessing. However, I decided that instead of doing that, I wanted to make it more visually appealing and add buttons with the letters on them instead as you can see here: www*dot*mediafire*dot*com/?mijjldzmmjd (the one with the _2 is the one I'm currently using, but the original is supplied as well). The buttons register the correct letters just fine (you are able to win), but it still doesn't place the used letters in the right boxes (it is replacing them in the letters instead? - If you continue to click the same letter over and over, it will keep replacing the buttons with the same letter until they're all replaced and then it finally starts putting them in the "Used Letters" section, and finally the "word" section). Any ideas? I'm sure there's some simple thing I'm missing, but I can't for the life of me find it. I'm only used to more simple coding, so troubleshooting on this large of a code is confusing me! haha
erm. you can do things differently from a user experience point of view - and also eliminating your guess work and checks in the process to a degree - create a preset of the alphabet as mini buttons that are clickable - all they do then is click a letter, if its available, it hits, else - nothing. either way, after the click - apply a different css class like - disabled or something to change appearance and set the onclick to return false. if you want to fix what you have done for the exercise' sake then by all means, do so - you need to create an empty array like var usedUpLetters = [];, then upon a 'try', traverse the array and see if it has an element that matches what they typed. if no, do usedUpLetters.push(newLetter); and so forth. also, make sure you handle lower and uppercase letters - i ws trying it with caps lock on and it was not finding a match. good luck!
heh this was a fun idea and i had some time http://fragged.org/dev/hangman.html i wrote it as a singleton object (sharing data) - seems to work. http://fragged.org/dev/hangman.js is source.
That's pretty awesome! I like what you did with the buttons, what would I have to do to my code to do something similar (aside from copying your code )? I read through your code and I understand what all's going on, but I'm not really sure how I'd incorporate something like that into mine since the code is so much different? I think I figured out the problem with mine and why it was duplicating letters, I'm assuming it was because my forms weren't defined with a name so I changed it to this inside the body: <script> for (i=0; i<28; i++) { document.write("<input type=text [B]name=usedLetters[/B] size=1>") } </script> Code (markup): and <script> for (i=0; i<word.length; i++) { document.write("<input type=text size=5 maxlength=1 [B]name=word[/B] value=''>") } </script> Code (markup): But what would I need to change in the code itself to do make these register? For the most part I'm still trying to make sense of JavaScript so my knowledge on the subject is somewhat limited Here's the code I'm working with currently: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Derek's Hangman Game - GIT215</title> <script src="words.js"> </script> <script> //Randomly chooses the word from the array in words.js wordNo = Math.round(Math.random() * (Array1.length-1)) imageNo = 2 word = new String(Array1[wordNo]) //Sets tries to 0 tries = 0 //Defines the used letters section and where it will place them usedLetters = new Array() letterPosition = word.length + 2 guess = "" //Checks your guess against the word function checkGuess(letter) { startPoint = eval(-1) position = 0 found = false document.forms[0].elements[letterPosition].value = letter letterPosition++ //If letter is guessed right, this defines where to place the letter while (position != -1) { position = word.indexOf (letter, startPoint + 1) if (position!=-1) { found = true; document.forms[0].elements[position].value = letter; startPoint = position; } } //If guess is wrong, this places the next image in the sequence on the screen and takes off 1 try, calls for lose sequence if tries are all used tries++ if (!found) { document.images[0].src = "Images/hangman" + imageNo + ".png" imageNo++ if (imageNo >= 12) lose() } //If guess is right, this defines it at right and also calls for win sequence if all letters are guessed correctly guess = "" for (i=0; i< word.length; i++) { guess = guess + document.forms[0].elements[i].value } if(guess.length == word.length) { win() } } //Defines what happens if you lose - Alert shows you lose and the word, reloads page to original state function lose() { alert ("You're Dead! The word was " + word) window.document.location = "hangman_2.html" } //Defines what happens if you win - Alert says you win, reloads page to original state function win() { word = word.toUpperCase() guess = guess.toUpperCase() if (word == guess) { alert("Good Job! You've saved your life... this time.") window.document.location = "hangman_2.html" } } </script> <style type="text/css"> body {background-color: #1087d9;} body {color: #000} </style> </head> <body> <hr /> <hr /> <hr /> <hr /> <form> <table align="left" background="Images/background.png" width="600" height="600" border="0" cellspacing="30" cellpadding="0"> <tr> <td align="center" rowspan="2" height="350" width="255"> <img src="Images/hangman1.png" /> </td> <td height="160" width="255" align="center"> <input type="button" value="A" onClick="checkGuess(this.value)"> <input type="button" value="B" onClick="checkGuess(this.value)"> <input type="button" value="C" onClick="checkGuess(this.value)"> <input type="button" value="D" onClick="checkGuess(this.value)"> <input type="button" value="E" onClick="checkGuess(this.value)"> <input type="button" value="F" onClick="checkGuess(this.value)"> <input type="button" value="G" onClick="checkGuess(this.value)"> <input type="button" value="H" onClick="checkGuess(this.value)"> <input type="button" value="I" onClick="checkGuess(this.value)"> <input type="button" value="J" onClick="checkGuess(this.value)"> <input type="button" value="K" onClick="checkGuess(this.value)"> <input type="button" value="L" onClick="checkGuess(this.value)"> <input type="button" value="M" onClick="checkGuess(this.value)"> <input type="button" value="N" onClick="checkGuess(this.value)"> <input type="button" value="O" onClick="checkGuess(this.value)"> <input type="button" value="P" onClick="checkGuess(this.value)"> <input type="button" value="Q" onClick="checkGuess(this.value)"> <input type="button" value="R" onClick="checkGuess(this.value)"> <input type="button" value="S" onClick="checkGuess(this.value)"> <input type="button" value="T" onClick="checkGuess(this.value)"> <input type="button" value="U" onClick="checkGuess(this.value)"> <input type="button" value="V" onClick="checkGuess(this.value)"> <input type="button" value="W" onClick="checkGuess(this.value)"> <input type="button" value="X" onClick="checkGuess(this.value)"> <input type="button" value="Y" onClick="checkGuess(this.value)"> <input type="button" value="Z" onClick="checkGuess(this.value)"> </td> </tr> <tr> <td height="160" width="255" align="center"> <h3>Letters Guessed:</h3> <p> <script> for (i=0; i<28; i++) { document.write("<input type=text name=usedLetters size=1>") } </script> </p> </td> </tr> <tr> <td colspan="2" height="160" width="540" align="center"> <script> for (i=0; i<word.length; i++) { document.write("<input type=text size=5 maxlength=1 name=word value=''>") } </script> </td> </tr> </table> </form> <table align="center" width="600" border="0" cellspacing="30" cellpadding="0"> <tr> <td> <p><b>Hello and welcome to Derek's Javascript Hangman!</b></p> <p>This app was designed using tutorials and examples from various websites which are listed in the javascript code section. It was created soley in Adobe Dreamweaver, using Adobe Photoshop for the graphics. Now let's get onto it, here's how to play:</p> </td> <tr> <td> <h3 align="center">Instructions:</h3> <p>In the bottom window is displayed the number of letters in your word and your progress.</p> <p>Using the letters shown in the top right box, click the one one which you'd like to guess.</p> <p>As you click a letter, it will be added to the "Letters Guessed" window.</p> <p>You will not be penalized for selecting the same letter twice. </p> <p>You have ten (10) tries before you are "hung."</p> <ul> <li>The category is musical instruments, only one word will be used.</li> </ul> <p>Good Luck!</p></td> </tr> </table> <hr /> <hr /> <hr /> <hr /> </body> </html> Code (markup):