JavaScript Tutorial 9 - Rock-Paper-Scissors

This is another quick game using some of the JavaScript that we have learned so far. To start this app off we need to once again generate a random number between 1 - 100 like so...

var number = Math.round(Math.random() * 100);

We will use this to decide what the computer picks, using some simple comparison code, the computer will pick an option based off the number generated...


if (number <= 33)
{
com = "rock";
}
else if (number >= 66)
{
com = "paper";
}
else 
{
com = "scissor";
}

So basically all this code does is take the number generated previously and says its less or equal to 33 then the com will pic rock, or if the number is greater or equal to 66 then com will choose paper and if its not any of those options then they pick scissors.

Now that we have our computer choice done, we now have to add in functionality for the user to pick their choice. We will use a simple prompt like this...

var user = prompt("What do you Choose, Rock...Papper...Scissor?");

So this will work well but what if the user types in with capital letters or under case, because JavaScript is case sensitive, we need to add in a statement so no matter what is typed into the box it will always output it lower case. That will look like this...

var user = user.toLowerCase();

Now we don't need to worry about capital letters. We now have both inputs from the computer and user. Next we have to add in comparison code that will decide who the winner is. Because we have two conditions instead of one, when we use the if statement we can add in "&&" and put in a second condition. So both conditions have to be true for the code to execute.


if ((com == "rock") && (user == "paper"))
{
alert("You Win.Com Chose " + com);
}
else if ((com == "rock") && (user == "scissor"))
{
alert("You Loose.Com Chose " + com);
}
else if ((com == "rock") && (user == "rock"))
{
alert("You Tie.Com Chose " + com);
}
else if ((com == "paper") && (user == "rock"))
{
alert("You Loose.Com Chose " + com);
}
else if ((com == "paper") && (user == "scissor"))
{
alert("You Win.Com Chose " + com);
}
else if ((com == "paper") && (user == "paper"))
{
alert("You Tie.Com Chose " + com);
}
else if ((com == "scissor") && (user == "paper"))
{
alert("You Loose.Com Chose " + com);
}
else if ((com == "scissor") && (user == "rock"))
{
alert("You Win.Com Chose " + com);
}
else if ((com == "scissor") && (user == "scissor"))
{
alert("You Tie.Com Chose " + com);
}

That block of code will cover every possible outcome and will spit out an alert statement based on the input. When you put all the code together it will look like this...

var number = Math.round(Math.random() * 100);

var user = prompt("What do you Choose, Rock...Papper...Scissor?");

var user = user.toLowerCase();

if (number <= 33)

{

com = "rock";

}

else if (number >= 66)

{

com = "paper";

}

else 

{

com = "scissor";

}

if ((com == "rock") && (user == "paper"))

{

alert("You Win.Com Chose " + com);

}

else if ((com == "rock") && (user == "scissor"))

{

alert("You Loose.Com Chose " + com);

}

else if ((com == "rock") && (user == "rock"))

{

alert("You Tie.Com Chose " + com);

}

else if ((com == "paper") && (user == "rock"))

{

alert("You Loose.Com Chose " + com);

}

else if ((com == "paper") && (user == "scissor"))

{

alert("You Win.Com Chose " + com);

}

else if ((com == "paper") && (user == "paper"))

{

alert("You Tie.Com Chose " + com);

}

else if ((com == "scissor") && (user == "paper"))

{

alert("You Loose.Com Chose " + com);

}

else if ((com == "scissor") && (user == "rock"))

{

alert("You Win.Com Chose " + com);

}

else if ((com == "scissor") && (user == "scissor"))

{

alert("You Tie.Com Chose " + com);

}

This is a very simple and easy to make JavaScript version of Rock-Paper-Scissors.