Having problems with finishing up a hangman game.

Printable View

11-15-2012, 11:54 AM
jtrinaldi

Having problems with finishing up a hangman game.

So I have been working really hard trying to complete my hangman game, but I cannot find whats wrong with my code. As you can see, when you hit "start", one star pops up. I am trying to get the amount of letters in the hidden word pop up. Also, when I try and guess the letter of the word, nothing seems to happen. I am not looking for the answer, rather I am just looking for someone to point me in the correct direction to finish this. Here is my code. Any help is greatly appreciated.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<body>
<script>
var start = true;
var words = new Array("ANIMAL", "BREWERS", "FIERCE" , "XIOLPHONE" ,"BEAR", "BASEBALL", "PACKERS", "START", "ZEBRA");
var guess = "";
var show = ""; //display
var gone = ""; //used letters
var guesses= new Array ();

//function createMask = make
function make(m)
{
mask = "";
word_length = m.length;

for (i = 0; i < word_length; i ++)
{
mask += "*";
}
return mask;
}

//chosing random word

function choose()
{

start = true;
random_number = Math.round(Math.random() * (words.length - 1));
guess = words[random_number];

updatedisplayword();

}

function guess(ch){
length = guesses.length;
for( i = 0; i< length; i ++){
if(ch == guesses[i]){
return;

}
}

guesses.push(ch);

}

function updatedisplayword(){
dw.value ='';

length = guess.length;

for(var i = 0; i< length; i++){

if(isguessed( guess.charAt(i) )){
dw.value += guess.charAt(i);
}else{
dw.value = dw.value +"*";
}
}
}

function isguessed(ch){
length = guesses.length;
for( i = 0; i< length; i ++){
if(ch == guesses[i]){
return true;
}
}

return false;
}

</script>

<body onLoad="reset(); return true;">

<div id="wrapper">
<form name="game">
Display Word: <input id="dw" type="text" name="show"><br>
Failed: <input type="text" name="usedLetters">
</form>

<INPUT TYPE="BUTTON" VALUE=" A " ONCLICK="guess('A')">
<INPUT TYPE="BUTTON" VALUE=" B " ONCLICK="guess('B')">
<INPUT TYPE="BUTTON" VALUE=" C " ONCLICK="guess('C')">
<INPUT TYPE="BUTTON" VALUE=" D " ONCLICK="guess('D')">
<INPUT TYPE="BUTTON" VALUE=" E " ONCLICK="guess('E')">
<br>
<INPUT TYPE="BUTTON" VALUE=" F " ONCLICK="guess('F')">
<INPUT TYPE="BUTTON" VALUE=" G " ONCLICK="guess('G')">
<INPUT TYPE="BUTTON" VALUE=" H " ONCLICK="guess('H')">
<INPUT TYPE="BUTTON" VALUE=" I " ONCLICK="guess('I')">
<INPUT TYPE="BUTTON" VALUE=" J " ONCLICK="guess('J')">
<br>
<INPUT TYPE="BUTTON" VALUE=" K " ONCLICK="guess('K')">
<INPUT TYPE="BUTTON" VALUE=" L " ONCLICK="guess('L')">
<INPUT TYPE="BUTTON" VALUE=" M " ONCLICK="guess('M')">
<INPUT TYPE="BUTTON" VALUE=" N " ONCLICK="guess('N')">
<INPUT TYPE="BUTTON" VALUE=" O " ONCLICK="guess('O')">
<br>
<INPUT TYPE="BUTTON" VALUE=" P " ONCLICK="guess('P')">
<INPUT TYPE="BUTTON" VALUE=" Q " ONCLICK="guess('Q')">
<INPUT TYPE="BUTTON" VALUE=" R " ONCLICK="guess('R')">
<INPUT TYPE="BUTTON" VALUE=" S " ONCLICK="guess('S')">
<INPUT TYPE="BUTTON" VALUE=" T " ONCLICK="guess('T')">
<br>
<INPUT TYPE="BUTTON" VALUE=" U " ONCLICK="guess('U')">
<INPUT TYPE="BUTTON" VALUE=" V " ONCLICK="guess('V')">
<INPUT TYPE="BUTTON" VALUE=" W " ONCLICK="guess('W')">
<INPUT TYPE="BUTTON" VALUE=" X " ONCLICK="guess('X')">
<INPUT TYPE="BUTTON" VALUE=" Y " ONCLICK="guess('Y')">
<INPUT TYPE="BUTTON" VALUE=" Z " ONCLICK="guess('Z')">
<input value="start" type="button" onclick="choose()">

</div>
</body>
11-15-2012, 01:55 PM
Logic Ali

Use the error console.
11-15-2012, 02:23 PM
Sup3rkirby

The problem seems to be in your updatedisplayword() function. When you initiate the loop you set the condition for i to be less than the variable 'length'. Honestly I'm at a loss as to exactly why, but you should simply replace this with 'guess.length'. At first I just thought it was an issue with variable types in the comparison but typeof returns number for both i and length. In any case that will correct your initial issue.

It does seem that going further there is another issue that will occur if you try to continue. You are using 'guess' as a string variable but also have a function called 'guess()'. This will create a 'string is not a function' error when you attempt to guess a letter using that function. Try changing the function name to 'guessLetter()' instead.

[EDIT]
Oh and I almost forgot to mention, please use code tags when pasting code in to your post.
@Logi Ali, interestingly enough, aside from the missing 'reset()' function being declared on the body's onload event, there weren't any errors in the console initially (other than his double-declared function and string which would only solve the later issue and only show up once a letter had been pressed).
11-15-2012, 04:08 PM
Logic Ali

Quote:

Originally Posted by Sup3rkirby

@Logi Ali, interestingly enough, aside from the missing 'reset()' function being declared on the body's onload event, there weren't any errors in the console initially (other than his double-declared function and string which would only solve the later issue and only show up once a letter had been pressed).

Nevertheless you'd still have to read them and fix them before addressing the algorithmic issues.
11-16-2012, 02:55 PM
jtrinaldi

ok, Ill try messing around with the suggestions you guys gave.
11-18-2012, 11:15 AM
jtrinaldi

Still haven't figured it out, can someone maybe give me a little more in-depth help with this? I am having a very hard time with this.
11-18-2012, 11:55 AM
Sup3rkirby

I'm not sure what issues you would still be having. The two corrections I mentioned fixed any issues with your script. Aside from a function that determines whether a user has won the game (or lost) everything was fine.

I suppose my question would be, did you manage to fix those two issues or are you still in the same place? If you did fix them, what issue(s) are you having now?
11-18-2012, 12:16 PM
jtrinaldi

Quote:

Originally Posted by Sup3rkirby

I'm not sure what issues you would still be having. The two corrections I mentioned fixed any issues with your script. Aside from a function that determines whether a user has won the game (or lost) everything was fine.

I suppose my question would be, did you manage to fix those two issues or are you still in the same place? If you did fix them, what issue(s) are you having now?

I tried to fix the first issue, but it does not appear to have worked in the code. I guess part of it is that I do not have enough experience in the JS Field. Your help is greatly appreciated.
11-18-2012, 12:56 PM
Sup3rkirby

Essentially, you should end up with this after making the corrections:

Code:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <body> <script> var start = true; var words = new Array("ANIMAL", "BREWERS", "FIERCE" , "XIOLPHONE" ,"BEAR", "BASEBALL", "PACKERS", "START", "ZEBRA"); var guess = ""; var show = ""; //display var gone = ""; //used letters var guesses= new Array (); //function createMask = make function make(m) { mask = ""; word_length = m.length; for(i = 0; i < word_length; i ++) { mask += "*"; } return mask; } //chosing random word function choose() { start = true; random_number = Math.round(Math.random() * (words.length - 1)); guess = words[random_number]; updatedisplayword(); } function guessLetter(ch){ length = guesses.length; for(i = 0; i< guesses.length; i++){ if(ch == guesses[i]){ return; } } guesses.push(ch); updatedisplayword(); } function updatedisplayword() { dw.value = ''; length = Number(guess.length); for(var i = 0; i < guess.length; i++) { if(isguessed( guess.charAt(i) )) { dw.value += guess.charAt(i); } else { dw.value += "*"; } } } function isguessed(ch) { length = guesses.length; for( i = 0; i< length; i ++) { if(ch == guesses[i]) { return true; } } return false; } </script> <body> <div id="wrapper"> <form name="game"> Display Word: <input id="dw" type="text" name="show"><br> Failed: <input type="text" name="usedLetters"> </form> <INPUT TYPE="BUTTON" VALUE=" A " ONCLICK="guessLetter('A')"> <INPUT TYPE="BUTTON" VALUE=" B " ONCLICK="guessLetter('B')"> <INPUT TYPE="BUTTON" VALUE=" C " ONCLICK="guessLetter('C')"> <INPUT TYPE="BUTTON" VALUE=" D " ONCLICK="guessLetter('D')"> <INPUT TYPE="BUTTON" VALUE=" E " ONCLICK="guessLetter('E')"> <br> <INPUT TYPE="BUTTON" VALUE=" F " ONCLICK="guessLetter('F')"> <INPUT TYPE="BUTTON" VALUE=" G " ONCLICK="guessLetter('G')"> <INPUT TYPE="BUTTON" VALUE=" H " ONCLICK="guessLetter('H')"> <INPUT TYPE="BUTTON" VALUE=" I " ONCLICK="guessLetter('I')"> <INPUT TYPE="BUTTON" VALUE=" J " ONCLICK="guessLetter('J')"> <br> <INPUT TYPE="BUTTON" VALUE=" K " ONCLICK="guessLetter('K')"> <INPUT TYPE="BUTTON" VALUE=" L " ONCLICK="guessLetter('L')"> <INPUT TYPE="BUTTON" VALUE=" M " ONCLICK="guessLetter('M')"> <INPUT TYPE="BUTTON" VALUE=" N " ONCLICK="guessLetter('N')"> <INPUT TYPE="BUTTON" VALUE=" O " ONCLICK="guessLetter('O')"> <br> <INPUT TYPE="BUTTON" VALUE=" P " ONCLICK="guessLetter('P')"> <INPUT TYPE="BUTTON" VALUE=" Q " ONCLICK="guessLetter('Q')"> <INPUT TYPE="BUTTON" VALUE=" R " ONCLICK="guessLetter('R')"> <INPUT TYPE="BUTTON" VALUE=" S " ONCLICK="guessLetter('S')"> <INPUT TYPE="BUTTON" VALUE=" T " ONCLICK="guessLetter('T')"> <br> <INPUT TYPE="BUTTON" VALUE=" U " ONCLICK="guessLetter('U')"> <INPUT TYPE="BUTTON" VALUE=" V " ONCLICK="guessLetter('V')"> <INPUT TYPE="BUTTON" VALUE=" W " ONCLICK="guessLetter('W')"> <INPUT TYPE="BUTTON" VALUE=" X " ONCLICK="guessLetter('X')"> <INPUT TYPE="BUTTON" VALUE=" Y " ONCLICK="guessLetter('Y')"> <INPUT TYPE="BUTTON" VALUE=" Z " ONCLICK="guessLetter('Z')"> <input value="start" type="button" onclick="choose()"> </div> </body> </html>

The updatedisplayword() correction just sets the loop to use guess.length for its condition directly, which fixes the issue with not displaying enough asterisks. The second issue was renaming your guess() function to guessLetter(). Alternatively, you could have just changed your guess variable to something else but in the end, you can't have a variable and function share the same name.

You should be able to finish it from this point on as you only need to update your guessed letters field and then determine whether or not a user has won or lost the game. That will at least finish your hangman game on a basic level.
11-18-2012, 07:37 PM
jtrinaldi

Quote:

Originally Posted by Sup3rkirby

Essentially, you should end up with this after making the corrections:

Code:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <body> <script> var start = true; var words = new Array("ANIMAL", "BREWERS", "FIERCE" , "XIOLPHONE" ,"BEAR", "BASEBALL", "PACKERS", "START", "ZEBRA"); var guess = ""; var show = ""; //display var gone = ""; //used letters var guesses= new Array (); //function createMask = make function make(m) { mask = ""; word_length = m.length; for(i = 0; i < word_length; i ++) { mask += "*"; } return mask; } //chosing random word function choose() { start = true; random_number = Math.round(Math.random() * (words.length - 1)); guess = words[random_number]; updatedisplayword(); } function guessLetter(ch){ length = guesses.length; for(i = 0; i< guesses.length; i++){ if(ch == guesses[i]){ return; } } guesses.push(ch); updatedisplayword(); } function updatedisplayword() { dw.value = ''; length = Number(guess.length); for(var i = 0; i < guess.length; i++) { if(isguessed( guess.charAt(i) )) { dw.value += guess.charAt(i); } else { dw.value += "*"; } } } function isguessed(ch) { length = guesses.length; for( i = 0; i< length; i ++) { if(ch == guesses[i]) { return true; } } return false; } </script> <body> <div id="wrapper"> <form name="game"> Display Word: <input id="dw" type="text" name="show"><br> Failed: <input type="text" name="usedLetters"> </form> <INPUT TYPE="BUTTON" VALUE=" A " ONCLICK="guessLetter('A')"> <INPUT TYPE="BUTTON" VALUE=" B " ONCLICK="guessLetter('B')"> <INPUT TYPE="BUTTON" VALUE=" C " ONCLICK="guessLetter('C')"> <INPUT TYPE="BUTTON" VALUE=" D " ONCLICK="guessLetter('D')"> <INPUT TYPE="BUTTON" VALUE=" E " ONCLICK="guessLetter('E')"> <br> <INPUT TYPE="BUTTON" VALUE=" F " ONCLICK="guessLetter('F')"> <INPUT TYPE="BUTTON" VALUE=" G " ONCLICK="guessLetter('G')"> <INPUT TYPE="BUTTON" VALUE=" H " ONCLICK="guessLetter('H')"> <INPUT TYPE="BUTTON" VALUE=" I " ONCLICK="guessLetter('I')"> <INPUT TYPE="BUTTON" VALUE=" J " ONCLICK="guessLetter('J')"> <br> <INPUT TYPE="BUTTON" VALUE=" K " ONCLICK="guessLetter('K')"> <INPUT TYPE="BUTTON" VALUE=" L " ONCLICK="guessLetter('L')"> <INPUT TYPE="BUTTON" VALUE=" M " ONCLICK="guessLetter('M')"> <INPUT TYPE="BUTTON" VALUE=" N " ONCLICK="guessLetter('N')"> <INPUT TYPE="BUTTON" VALUE=" O " ONCLICK="guessLetter('O')"> <br> <INPUT TYPE="BUTTON" VALUE=" P " ONCLICK="guessLetter('P')"> <INPUT TYPE="BUTTON" VALUE=" Q " ONCLICK="guessLetter('Q')"> <INPUT TYPE="BUTTON" VALUE=" R " ONCLICK="guessLetter('R')"> <INPUT TYPE="BUTTON" VALUE=" S " ONCLICK="guessLetter('S')"> <INPUT TYPE="BUTTON" VALUE=" T " ONCLICK="guessLetter('T')"> <br> <INPUT TYPE="BUTTON" VALUE=" U " ONCLICK="guessLetter('U')"> <INPUT TYPE="BUTTON" VALUE=" V " ONCLICK="guessLetter('V')"> <INPUT TYPE="BUTTON" VALUE=" W " ONCLICK="guessLetter('W')"> <INPUT TYPE="BUTTON" VALUE=" X " ONCLICK="guessLetter('X')"> <INPUT TYPE="BUTTON" VALUE=" Y " ONCLICK="guessLetter('Y')"> <INPUT TYPE="BUTTON" VALUE=" Z " ONCLICK="guessLetter('Z')"> <input value="start" type="button" onclick="choose()"> </div> </body> </html>

The updatedisplayword() correction just sets the loop to use guess.length for its condition directly, which fixes the issue with not displaying enough asterisks. The second issue was renaming your guess() function to guessLetter(). Alternatively, you could have just changed your guess variable to something else but in the end, you can't have a variable and function share the same name.

You should be able to finish it from this point on as you only need to update your guessed letters field and then determine whether or not a user has won or lost the game. That will at least finish your hangman game on a basic level.

Thank You a bunch. Just have to figure out how to reset it now.
11-19-2012, 02:53 PM
jtrinaldi

Ok, adjusted a few things. Just have to figure out how to determine whether they won or not.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<body>
<script>
var start = true;
var words = new Array("ANIMAL", "BREWERS", "FIERCE" , "XIOLPHONE" ,"BEAR", "BASEBALL", "PACKERS", "START", "ZEBRA");
var guess = "";
var show = ""; //display
var gone = ""; //used letters
var guesses= new Array ();

//function createMask = make
function make(m) {
mask = "";
word_length = m.length;
for(i = 0; i < word_length; i ++) {
mask += "*";
}
return mask;
}

//chosing random word
function choose() {
start = true;
random_number = Math.round(Math.random() * (words.length - 5));
guess = words[random_number];
updatedisplayword();
console.log(guess);
}

function guessLetter(ch){
length = guesses.length;
if (guesses.indexOf(ch) > -1) return;

guesses.push(ch);
updatedisplayword();
}

function updatedisplayword() {
var dw = document.getElementById("dw");
dw.value = '';
length = Number(guess.length);
for(var i = 0; i < guess.length; i++) {
if(isguessed( guess.charAt(i) )) {
dw.value += guess.charAt(i);
} else {
dw.value += "*";
}
}
var ch = document.getElementById("ch");
ch.value = '';
for (var i = 0; i < guesses.length; i++){
var isGoodGuess = false;
for (var j = 0; j < guess.length; j++){
if (guess.charAt(j) === guesses[i]){
isGoodGuess = true;
}
}
if (!isGoodGuess) ch.value += guesses[i];
}
}

function isguessed(ch) {
length = guesses.length;
for( i = 0; i< length; i ++) {
if(ch == guesses[i]) {
return true;
}
}
return false;
}
</script>
<body>

<div id="wrapper">
<form name="game">
Display Word: <input id="dw" type="text" name="dw"><br>
Failed: <input id="ch" type="text" name="ch">
</form>

<INPUT TYPE="BUTTON" VALUE=" A " ONCLICK="guessLetter('A')">
<INPUT TYPE="BUTTON" VALUE=" B " ONCLICK="guessLetter('B')">
<INPUT TYPE="BUTTON" VALUE=" C " ONCLICK="guessLetter('C')">
<INPUT TYPE="BUTTON" VALUE=" D " ONCLICK="guessLetter('D')">
<INPUT TYPE="BUTTON" VALUE=" E " ONCLICK="guessLetter('E')">
<br>
<INPUT TYPE="BUTTON" VALUE=" F " ONCLICK="guessLetter('F')">
<INPUT TYPE="BUTTON" VALUE=" G " ONCLICK="guessLetter('G')">
<INPUT TYPE="BUTTON" VALUE=" H " ONCLICK="guessLetter('H')">
<INPUT TYPE="BUTTON" VALUE=" I " ONCLICK="guessLetter('I')">
<INPUT TYPE="BUTTON" VALUE=" J " ONCLICK="guessLetter('J')">
<br>
<INPUT TYPE="BUTTON" VALUE=" K " ONCLICK="guessLetter('K')">
<INPUT TYPE="BUTTON" VALUE=" L " ONCLICK="guessLetter('L')">
<INPUT TYPE="BUTTON" VALUE=" M " ONCLICK="guessLetter('M')">
<INPUT TYPE="BUTTON" VALUE=" N " ONCLICK="guessLetter('N')">
<INPUT TYPE="BUTTON" VALUE=" O " ONCLICK="guessLetter('O')">
<br>
<INPUT TYPE="BUTTON" VALUE=" P " ONCLICK="guessLetter('P')">
<INPUT TYPE="BUTTON" VALUE=" Q " ONCLICK="guessLetter('Q')">
<INPUT TYPE="BUTTON" VALUE=" R " ONCLICK="guessLetter('R')">
<INPUT TYPE="BUTTON" VALUE=" S " ONCLICK="guessLetter('S')">
<INPUT TYPE="BUTTON" VALUE=" T " ONCLICK="guessLetter('T')">
<br>
<INPUT TYPE="BUTTON" VALUE=" U " ONCLICK="guessLetter('U')">
<INPUT TYPE="BUTTON" VALUE=" V " ONCLICK="guessLetter('V')">
<INPUT TYPE="BUTTON" VALUE=" W " ONCLICK="guessLetter('W')">
<INPUT TYPE="BUTTON" VALUE=" X " ONCLICK="guessLetter('X')">
<INPUT TYPE="BUTTON" VALUE=" Y " ONCLICK="guessLetter('Y')">
<INPUT TYPE="BUTTON" VALUE=" Z " ONCLICK="guessLetter('Z')">
<br>
<input value="start" type="button" onclick="choose()">

</div>
</body>
</html>