Step 9: Rock, Paper, Scissors


#1

I wanted to try challenge 1: "What if a user makes an inappropriate choice like 'dog'? How can we extend the function to handle that?"

In my code, I wanted the javascript to run the code on line 1 (which is the prompt for the user to choose rock, paper scissors). From there, I wanted the javascript to check to make sure the user's prompt was valid before continuing on with the code.

So, after line 1, I have an if/else statement saying if userChoice is not equal to scissors, rock and paper, to prompt the user to choose from rock, paper and scissors.

I tested the code, and it seems to work when I type in something like "dog".

The problem I have, is when I run the code and do type in something valid like "rock". After I type in "rock", the invalid prompt shows up and asks me to choose rock, paper and scissors again.

How do I fix this so that if I type in the correct choice, it runs the code?


var userChoice = prompt("Do you choose rock, paper or scissors?");

if (userChoice !== "rock") {
var userChoice = prompt("Invalid answer. Please choose rock, paper or scissors?");
}
else if (userChoice !== "paper") {
var userChoice = prompt("Invalid answer. Please choose rock, paper or scissors?");
}
else if (userChoice !== "scissors") {
var userChoice = prompt("Invalid answer. Please choose rock, paper or scissors?");
}
else {
console.log("Your choice: " + userChoice);
}

var computerChoice = Math.random();
if (computerChoice < 0.34) {
computerChoice = "rock";
} else if(computerChoice <= 0.67) {
computerChoice = "paper";
} else {
computerChoice = "scissors";
} console.log("Computer: " + computerChoice);

var compare = function(choice1, choice2) {
if (choice1 === choice2) {
return "The result is a tie!";

}
else if (choice1 === "rock") {
    if (choice2 === "scissors") {
        return "rock wins";
    }
    else {
        return "paper wins";
    }
}
else if (choice1 === "paper") {
    if (choice2 === "rock") {
        return "paper wins";
    }
    else {
        return "scissors wins";
    }
}
else if (choice1 === "scissors") {
    if (choice2 === "rock") {
        return "rock wins";
    }
    else {
        return "scissors wins";
    }
}

};

    console.log(compare(userChoice, computerChoice));

#2

@darivu,

 var getUserChoice = function() {
     var invalidChoice = true;
     var userChoice = "";
     while( invalidChoice ) {
         userChoice = prompt('Your choice','default-value');
         if ( userChoice === "paper" || 
              userChoice === "scissors" ||
              userChoice === "rock") {
                  invalidChoice = false;
         }
     }
     return userChoice;
 };
 
 var userChoice = getUserChoice();
 console.log( "User choice is: " +userChoice );

OR


 var getUserChoice = function() {
     var invalidChoice = true;
     var userChoice = "";
     var valid = ["paper","scissors","rock"];
     while( invalidChoice ) {
         userChoice = 
         prompt('Your choice with Array indexof()','default-value');
         if ( valid.indexOf(userChoice) != -1 ) {
                  invalidChoice = false;
         }
     }
     return userChoice;
 };

 var userChoice = getUserChoice();
 console.log( userChoice );

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/while
https://developer.mozilla.org/en/docs/Web/API/Window/prompt


#3

My coding just like this and I dont know while the result is 0.35...the screen shows "scissors". Please explain to me. Thanks!


#4

@arcwhiz82953,

The Math.random() method will deliver a number with a value
in the range of 0_(included)_ upontill 0.9999_(1 excluded)_.

As you will have to divide the number range form 0_(inclusive)_ to 0,9999_(so 1 excluded)_
into 3 equal partitions
we have to use an if else-if else statement.
The if else-if else skeleton looks like:

    if (conditionA) {
               //conditionA is true
                //your code 
     } else if (conditionB) {
               //conditionA is false
               //conditionB is true
              //your code 
    } else {     // <=== !! Takes NO condition-statements !!
               //conditionA is false
               //conditionB is false
              //your code 
    }

following the Instructions the conditions would be:
1. If computerChoice is between 0 and 0.33, make computerChoice equal to "rock".
( 0 <= computerChoice && computerChoice <= 0.33) which we capture at the IF using
( computerChoice <= 0.33)

  1. else If computerChoice is between 0.34 and 0.66, make computerChoice equal to "paper".
    ( 0.33 < computerChoice && computerChoice < 0.67) which we capture at the ELSE IF as
    ( computerChoice < 0.67 )

  2. else computerChoice will be between 0.67 and 1, make computerChoice equal to "scissors".
    ( 0.67 <= computerChoice && computerChoice < 1) , you reached the ELSE level
    you can asume that computerChoice is greater equal to 0.67,
    the ELSE does NOT take a condition, just write your code.


#5

Thank you very much!


#6

Thank you! Definitely need to learn about "while".

Is there a way to do this with just what we've learned up to step 9 though?


#7

@darivu,

You could pack the code in a FOR-loop which run 4 times....

the for-loop:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for

the while-loop:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while

the do-while-loop:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while