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;
}
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).
Last edited by Sup3rkirby; 11-15-2012 at 02:25 PM.
"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"
@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.
Where used, return should be executed unconditionally and always as the last statement in the function.
That's my signature, it's not part of the damn post!
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?
"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"
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.
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.
"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"
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.
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>
Reply With Quote
Originally Posted by Sup3rkirby
Bookmarks