Color Guessing Game HELP!

#1

COLOR GUESSING GAME

Hello to all.. I have been trying to improve my skllls on JS with all that I have learned so far in this awesome website!.. I found this pretty interesting excercise on the internet.. but I don`t know how to make it work properly!

The game is essentially the user has to guess a color that is inside an array of colors that is set randomly, if the user gets wrong he will have another opportinity until he gets right!.. at the end the code will show the user how many guesses he did!.. the problem that I have is the next one:

  • The code has to show the user three things: 1 - if the user do not enter a color that is in the array it will show a message "That is not a color in the range!" 2 - if the color that the user introduces is either lower or higher alphabetically it will show a message with hints to the user to guess properly.

with the lower and higher color I have not problem.. but I cannot get that error message properly that shows ("That is not a color range!") .. I don't get what is wrong with my code, I always get "that color is not in the range!" even though I put a color name that IS in the array, so I finish in a infinite loop!.. how can I do to get that message correctly when I run the game?.. you can check the code below!.. 

<script type="text/javascript">
var target;
var guess_input;
var colors=["aqua", "black", "blue", "cyan", "darkgold", "gold", "grey", "orange", "purple", "yellow"];
var finished = false;
var guesses = 0;

function do_game() {
    var random_number = Math.random() * 10;
    var random_number_integer = Math.floor(random_number);
    target = colors[random_number_integer];
    alert(target);

    while(!finished) {
        guess_input = prompt("I'm thinking of a color between "+ colors.join (", ") +"\n\n Can you guess what?" );
        guesses += 1;
        finished = check_guess();
    }
};

function check_guess() {
    if (guess_input !== colors) {
        alert("That color is not in the range!");
        return false;
    }

    if (guess_input < target) {
        alert("Sorry that is not the color! \n \n Hint: Your color is alfabetically lower");
        return false;
    }

    if (guess_input > target) {
        alert("Sorry that is not the color! \n \n Hint: Your color is alphabetically higher");
        return false;
    }
    alert("Your did it! It took you " + guesses + " guesses to take it right!");
    return true;
};
</script>
#2

@rogerreng,
You are looking for
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf

#3

Let’s start by examining these two variables. They belong to the game but are declared in the global namespace. Possibly this is so they are accessible to both functions?

target is defined in do_game() but evaluated in check_guess(). We can protect the global scope by declaring these both locally, and pass them as argument or return value.

function do_game() {
    var target = colors[Math.floor(Math.random() * colors.length)];
};

and in the while loop,

    finished = check_guess(guess_input, target);

and,

function check_guess(guess_input, target) {

};

That leaves two other variables in global scope, possibly for the same reason… universal access. Do we stretch our parameter list to four arguments? Or, might it be just as easy to include the check_guess() in the scope of do_game()?

function do_game() {
    var check_guess = function () {
        return true;
    };
    var getColor = function () {
        return colors[Math.floor(Math.random() * colors.length)];
    };

    var colors = ["aqua", "black", "blue", "cyan", "darkgold", 
                  "gold", "grey", "orange", "purple", "yellow"];

    var guess_input;
    var finished = false;
    var guesses = 0;
    var target = getColor();

    while(!finished) {
        guess_input = prompt("I'm thinking of a color between "+ colors.join (", ") +"\n\n Can you guess what?" );
        guesses += 1;
        finished = check_guess();
    }
}

Now there are no variables in global scope, and both functions still have access to all the running values. The check_guess() function is written as above for testing. We want to see that a true value in the return will end the while loop. Now that function can be reconstructed.

That brings up how the guess is compared to the target. Since a match is an instant win, then we only need to return true or false. The state of target and guess_input is accessible, and suggests another simple function to handle this comparison.

    var check_guess = function () {
        return colors.indexOf(guess_input) > -1;
    };

Following is a refactoring of the OP code in a proof of concept.

function do_game() {
    var colors = ["aqua", "black", "blue", "cyan", "darkgold", 
                  "gold", "grey", "orange", "purple", "yellow"];

    var check_guess = function () {
        return colors.indexOf(guess_input) > -1;
    };
    var getColor = function () {
        return colors[Math.floor(Math.random() * colors.length)];
    };
    var compare = function () {
        if (guess_input < target) return ["Too low", false];
        if (guess_input > target) return ["Too high", false];
        return ["You win!", true];
    };
    var guess_input;
    var finished = false;
    var guesses = 0;
    var target = getColor();

    while(!finished) {
        guess_input = prompt("I'm thinking of a color between "+ colors.join (", ") +"\n\n Can you guess what?" );
        guesses += 1;
        finished = check_guess();
        if (finished) {
            final = compare();
            console.log(final[0]);
            finished = final[1];            
        }
        else console.log("Guess is not in the list");
    }
}

Sample run

 > do_game()
 Guess is not in the list
 Too low
 Too high
 Too low
 Too high
 Too low
 Too high
 Too low
 Too high
 Too low
 You win!
#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.