damolaview damolaview - 10 days ago 7
Javascript Question

I updated this javascript color guessing game.1st is perfect, the 2nd isn't .making a function that checks the user input

This code is supposed to be a color guessing game whereby i have a color array . the user is supposed to guess the color and when it is correct. The game stops.I'm trying to test my user input to make the interface better but the code doesn't seem to work this is my first code which is working perfectly.

<!DOCTYPE html>
<html>
<head>
<title>Color guessing game</title>
</head>

<body onload="do_game()">
<script>
var color = ["Black","Blue","Brown","Cyan","GoldenRod","Green","Maroon","Olive","Pink","Red"];
var target;
var finished = false;
var guess_input;
var guesses;
var randomComputerGuess;

function do_game() {
var target_index = Math.random() * 10;
target = Math.floor(target_index);


alert(color[target]);
randomComputerGuess = color[target];

while(!finished) {
guess_input = prompt("I am thinking of one of these colors: \n\n" +
"Black,Blue,Brown,Cyan,GoldenRod,Green, Maroon,Olive,Pink,Red \n\n"
+ "What color am i thinking of?");
guesses +=1;
if(randomComputerGuess == guess_input){
alert("Good Job! You are correct.");
finished = true;
}




}
}

/*function check_guess(guess_input){
if(guess_input == color[target]){
alert("Congratulations! You have guessed the color! \n\n"
+ "It took you " + guesses + "guess(es) to finish the game! \n\n"
+ "You can see this color in the background.");
return true;
}
}*/

Body=document.getElementsByTagName("body")[0];
Body.style.background=color[target];


</script>

</body>
</html>


Now this is my updated which is not working.i added a function check.guess() to check my user input for certain scenarios like if it isnt a color name in the array or it is lower in position or higher than random color chosen by my previous function do.game()

<!DOCTYPE html>
<html>
<head>
<title>Color guessing game</title>
</head>

<body onload="do_game()">
<script>
var color = ["Black","Blue","Brown","Cyan","GoldenRod","Green","Maroon","Olive","Pink","Red"];
var target;
var finished = false;
var guess_input;
var guesses;
var randomComputerGuess;

function do_game() {
var target_index = Math.random() * 10;
target = Math.floor(target_index);


alert(color[target]);
randomComputerGuess = color[target];

while(!finished) {
guess_input = prompt("I am thinking of one of these colors: \n\n" +
"Black,Blue,Brown,Cyan,GoldenRod,Green, Maroon,Olive,Pink,Red \n\n"
+ "What color am i thinking of?");
guesses +=1;
finished = check_guess();
/*if(randomComputerGuess == guess_input){
alert("Good Job! You are correct.");
finished = true;
}*/
}
}

function check_guess(guess_input){
if(color.indexOf(guess_input) == -1){
alert("Sorry, I do no not recognize your color. \n\n"
+ "Please try again.");
return false;
}

if(guess_input > randomComputerGuess){
alert("Sorry, your guess is not correct! \n\n"
+ "Hint: Your color is alphabetically higher than mine. \n\n"
+ "Please try again. ");
return false;
}

if(guess_input < randomComputerGuess){
alert("Sorry, your guess is not correct! \n\n"
+ "Hint: Your color is alphabetically lower than mine. \n\n"
+ "Please try again. ");
return false;
}

if(guess_input == randomComputerGuess){
alert("Congratulations! You have guessed the color! \n\n"
+ "It took you " + guesses + "guess(es) to finish the game! \n\n"
+ "You can see this color in the background.");
return true;
}
}

Body=document.getElementsByTagName("body")[0];
Body.style.background=color[target];


</script>

</body>
</html>

Answer

As you found, you weren't passing your guess into your check_guess function, but in addition to that, you have a lot of unnecessary code. Here's a cleaned up version that shows the color at the end. There are also comments within the code to explain the changes.

window.addEventListener("DOMContentLoaded", function(){

  // Changed colors to lower case so they can be compared to lower case later
  var colors = ["black","blue","brown","cyan","goldenrod","green","maroon","olive","pink","red"];
  var target = null;
  var guess_input = null;
  var guesses = 0;
  var randomComputerGuess = null;

  // Math.random() will return a random number between 0 (inclusive) and 1 (exclusive)
  // I've change your multiplier to 11 so that you can concievably get 10 from the operation
  // I've also combined target_index and target to just one variable
  var target = Math.floor(Math.random() * 11);
       
  randomComputerGuess = colors[target];

  console.log("Random color is: " + randomComputerGuess);

  // while(true/false) creates an opportunity for an infinite loop, which
  // is bad practice. Instead, make loop have a definite end point
  // In this scenario, the user will have 3 guesses before the game ends
  while(guesses < 3) {
         
     guess_input = prompt("I am thinking of one of these colors: \n\n" +
                          colors.join(", ") + "\n\n" +
                          "What color am i thinking of?");
     
     // Added .toLowerCase() so guess doesn't have to be case-sensitive
     check_guess(guess_input.toLowerCase());
                
     guesses++; // Increase the guess count
                
   }
            
  function check_guess(guess_input){
            
    var retVal = false;
    var message = null; 
    
    // The first check looks for no entry or user hitting cancel
    if(guess_input === "" || guess_input === null) {
        message = "You didn't enter a value!";
    } else if(guess_input < randomComputerGuess){
        message = "Sorry, your guess is not correct! \n\n" +
                  "Hint: Your color is alphabetically higher than mine. \n\n" +
                  "Please try again.";
    } else if(guess_input > randomComputerGuess){
        message = "Sorry, your guess is not correct! \n\n" +
                  "Hint: Your color is alphabetically lower than mine. \n\n" +
                  "Please try again.";
    } else if(guess_input.toLowerCase() === colors[target].toLowerCase()){            
      message = "Congratulations! You have guessed the color! \n\n" +
                "It took you " + guesses + " guess(es) to finish the game! \n\n" +        
                "You can see this color in the background.";
      guesses = 3;
      retVal = true;
    }

    alert(message);
    return retVal;
        
  }

  document.getElementsByTagName("body")[0].style.background = colors[target];
});