Hangman Game Trying to Limit the Number of Guesses - JavaScript

Question

Trying to complete the Hangman Game from JS for Kids challenge #3. Its asking to limit the # of guesses for the player.

I was thinking I need to dump all guesses into a new array, and then have the game quit once the new array length became greater than number of guesses but its not working. The hint in the book is to use &&, but not really seeing where that would go with the other conditions laid out.

Appreciate any thoughts on where I went wrong-

 //create an array of words
  var words =["java","monkey","amazing","pankcake"];

  //pick a random words
  var word= words[Math.floor(Math.random() * words.length)];

 //set up the answer array
  var answerArray=[];
    for(var i=0; i< word.length; i++){
    answerArray[i]="_";
  }
  var remainingLetters=word.length;

  //The game loop
   while(remainingLetters >= 0) {

  //show the player their progress
   alert(answerArray.join(" "));

   //Get a guess from the player
   var guess=prompt("guess a letter, or click cancel to stop playing");

  **//add guesses to an answerArray
   var guessAll="";
      guessAll+=guess;**

 //convert toLowerCase
  var guessLower=guess.toLowerCase();
    if(guessLower===null){
     break;

  **} else if(guessAll.length >4) {
   break;**

 } else if(guessLower.length !== 1){
  alert("Please pick single character");

  }else{
  //update the game state with the guess
  for(var j=0; j<word.length; j++){
    if(word[j] ===guessLower){
      answerArray[j]= guessLower;
      remainingLetters--;
    }
    }
  }
}

//the end of the game loops alert(answerArray.join(" ")); alert("You are a Good Guesser!! the answer was " + word);

Answer 1

Well, there are a few things to point out in your code, see if you follow. Check the snippet below:

//The game loop
while(remainingLetters >= 0) {

    //show the player their progress, Get a guess from the player, etc.

    //add guesses to an answerArray
    var guessAll="";
    guessAll+=guess;

    // all other stuff
}

Notice how var guessAll=""; is inside the loop? That means with each interaction (every time the loop goes around), you are redefining guessAll as a blank, so you're erasing the guesses you were supposed to be keeping track of. Now if you move this declaration outside the loop, like this:

// This is your answers array
var guessAll="";

//The game loop
while(remainingLetters >= 0) {

    //show the player their progress, Get a guess from the player, etc.

    //add guesses to an answerArray
    guessAll+=guess;

    // all other stuff
}

Now the variable guessAll is only initialized once. With each loop, a new guess gets appended to the pre-existing value, which is kept between loops, because you are not erasing it anymore.

I believe the hint to use && (which means AND) would apply to the whilecheck:

while(remainingLetters >= 0 && guessAll.length < 4) { 
    ... 
}

This way, it checks for both remaningLetters unguessed and the amount of guesses the player tried. Both conditions must be true: the number of remaining undiscovered letter must be greater or equal to zero AND the player must have tried less than four times. This also has the effect of making this check else if(guessAll.length > 4) break; unnecessary, because the loop will be terminated when the limit is reached.

However, as you have longer words ("amazing", "monkey"), the player would never be able to complete the word in only 4 tries, so this limit should be raised. A very good practice is turning it into a parameter, like this:

var maximumTries = 10;

(...)

while (remainingLetters >= 0 && guessAll.length < maximumTries) {
...

It improves the readability of your code and it's much easier to maintain. Suppose you later find out that 10 tries is too hard and you want to make it 15: you'd just have to change the value in the first line of your code, without the need to diving into programming logic and analizing exactly where you should change it inside the loop, testing for consequences, etc. So my suggested fix for your code is:

// set the maximum number of tries
var maximumTries = 10;

// create an array of words
var words =["java","monkey","amazing","pancake"];

// pick a random word
var word = words[Math.floor(Math.random() * words.length)];

// set up the answer array
var answerArray=[];
for(var i=0; i< word.length; i++){
    answerArray[i]="_";
}
var remainingLetters=word.length;

// this will hold all the letters tried
var guessAll="";

// The game loop
while(remainingLetters >= 0 && guessAll.length < maximumTries) {

    // show the player their progress
    alert(answerArray.join(" "));

    // Get a guess from the player
    var guess = prompt("guess a letter, or click cancel to stop playing.");

    // add guesses to an answerArray
    guessAll += guess;

    //convert toLowerCase
    var guessLower = guess.toLowerCase();
    if (guessLower === null) {
        break;
    } else if(guessLower.length !== 1){
        alert("Please pick single character");
    } else {

        //update the game state with the guess
        for(var j=0; j<word.length; j++){
            if(word[j] === guessLower){
                answerArray[j] = guessLower;
                remainingLetters--;
            }
        }
    }
}

You may see it in action at JS Fiddle. Keep in mind that in programming there is almost always more than one way to achieve the same result, this is just one of them.