Wednesday, May 1, 2013

J.S. Project: Rock, Paper, Scissors


Today, we're going to create the classic rock paper scissors game! Each player chooses either rock, paper, or scissors and the possible outcomes are:

Rock destroys scissors.
Scissors cut paper.
Paper covers rock.

Our code will break the game into three components:
a. User makes a choice
b. Computer makes a choice
c. A compare function will determine who wins

We are going to first start off by asking the user which option they'd like to pick. We're going to use this choice later in the compare function to determine the winner.

01 / 07 : declare a variable called userChoice and set it equal to the answer we get by asking the user: "Do you choose rock, paper, or scissors?":
    HINT - remember to prompt the user to ask a question...

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

02 / 07 : Awesome sauce! Now, we've gotta get the computer to make a choice too. The game is going to be fun (and worth playing) if the computer chooses randomly. If we declare a variable and set it equal to Math.random(), that variable will equal a number between 0 and 1. Declare a variable called computerChoice and set it equal to Math.random(). Then, print out computerChoice so you can see how Math.random() works!

var computerChoice = Math.random();
console.log(computerChoice);

03 / 07 : So we've created computerChoice but it now equals a random number between 0 and 1. We need to somehow translate this random number into a random choice of rock, paper, or scissors:
    1. If computerChoice is between 0 and 0.33, make computerChoice equal to rock.
    2. If computerChoice is between 0.34 and 0.66, make computerChoice equal to paper.
    3. If computerChoice is between 0.67 and 0.99, make computerChoice equal to scissors.
We've gotta use if / else if / else because there are three outcomes (we use if / else for two):

if ( 0 <= computerChoice <=  0.33 ) {
    console.log("rock");
} else if ( 0.34 <=  computerChoice <=  0.66 ) {
    console.log("paper");
} else {
    console.log("scissors");
}

04 / 07 : Now comes the fun part! We're going to create a function that takes two parameters (the two choices made) and return the winning choice. We have to first figure out all the different outcomes, which are essentially the choices that the user makes equaling the choice the computer makes. Declare a  function called compare() taking two parameters choice1 and choice2. Inside the function, write an if statement such that if the two parameters equal each other, the function will return: "The result is a tie!".

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

05 / 07 : Wonderful. Now, let's consider the other scenarios in this game: what if choice1 is "rock"? Given choice1 is "rock",
        a. if choice2 is "scissors", then "rock" wins.
        b. if choice2 is "paper", then "paper" wins.
How are we going to structure this? Well, we've already got an if statement, so the code inside that if statement will be another if statement itself! Write an if statement where the condition is choice1 equals "rock". Then, in the code block for that if statement, write an if / else statement. In that statement, if choice2 is "scissors", return "rock wins". Otherwise, return "paper wins".
    HINT - putting if statements inside if statements might be a little tricky at first. Here's an outline of what the syntax should look like:
if (condition) {
    if (condition) {
        return "some string";
    } else {
        return "some other string";
    }
}

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

06 / 07 : Well, what if choice1 is "paper"?
        a. if choice2 is "rock", then "paper" wins.
        b. if choice2 is "scissors", then "scissors" wins.
We're gonna use the same structure to add these two extra scenarios:

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

07 / 07 : Lastly, we've got to consider what if choice1 s "scissors:
        a. if choice2 is "rock", then "rock" wins.
        b. if choice2 is "paper", then "scissors" wins.
We're almost done, let's take the same structure we've used in the past couple exercises and apply it to these two new scenarios:

if (choice1 === "scissors") {
    if (choice2 === "rock") {
        return("paper wins");
    } else {
        return("scissors wins");
    }
}
     
Finally, call your function and pass in userChoice and computerChoice as your two parameters:

compare(userChoice, computerChoice);

// now, here's the entire game all in one go: 


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

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

function compare( choice1, choice2 ) {
    if (choice1 === choice2 ) {
        return("The result is a tie!");
    }
   
    if (choice1 === "rock") {
        if (choice2 === "scissors") {
            return("rock wins");
        } else {
            return("paper wins");
        }
    }
   
    if (choice1 === "paper") {
        if (choice2 === "rock") {
            return("paper wins");
        } else {
            return("scissors wins");
        }
    }
   
    if (choice1 === "scissors") {
        if (choice2 === "rock") {
            return("rock wins");
        } else {
            return("scissors wins");
        }
    }
}

compare(userChoice, computerChoice);


Congrats on making your awesome game!

P.S. Check out my new video where I give you all a tour of my room

Song of the day // The Hours (Beach House) 

No comments:

Post a Comment