www.webdeveloper.com
Results 1 to 11 of 11

Thread: Having problems with finishing up a hangman game.

  1. #1
    Join Date
    Nov 2012
    Posts
    7

    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>

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Use the error console.

  3. #3
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,034
    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 03:25 PM.

  4. #4
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by Sup3rkirby View 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).
    Nevertheless you'd still have to read them and fix them before addressing the algorithmic issues.

  5. #5
    Join Date
    Nov 2012
    Posts
    7
    ok, Ill try messing around with the suggestions you guys gave.

  6. #6
    Join Date
    Nov 2012
    Posts
    7
    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.

  7. #7
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,034
    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?

  8. #8
    Join Date
    Nov 2012
    Posts
    7
    Quote Originally Posted by Sup3rkirby View 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?
    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.

  9. #9
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,034
    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.

  10. #10
    Join Date
    Nov 2012
    Posts
    7
    Quote Originally Posted by Sup3rkirby View Post
    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. #11
    Join Date
    Nov 2012
    Posts
    7
    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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles