Skip to content

Instantly share code, notes, and snippets.

@a17levine

a17levine/rps.html

Last active Aug 29, 2015
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rock Paper Scissors</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button class='rps-action' id="rock">Rock</button>
<button class='rps-action' id="paper">Paper</button>
<button class='rps-action' id="scissors">Scissor</button>
<h1 id="message"></h1>
<h3 >User Choice: <span id="userChoice"></span></h3>
<h3 >Computer Choice: <span id="compChoice"></span></h3>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="rps.js"></script>
</body>
</html>
console.log('rps.js loaded');
// What the computer's choice is
function computerChoice() {
// RPS has 3 options, rock, paper, scissors
// Each one should get a 33% chance of getting picked
var number = Math.random();
/*
* Way 1
*/
// var choice;
// if(number >= 0 && number <= 0.33) {
// console.log('between 0 and 33');
// choice = 'rock';
// } else if(number <= 0.67 && number > 0.33) {
// console.log('between 33 and 67')
// choice = 'paper';
// } else {
// choice = 'scissor';
// console.log('between 67-100')
// }
// return choice
/*
* Way 2
*/
// if(number >= 0 && number <= 0.33) {
// console.log('between 0 and 33');
// var choice = 'rock';
// } else if(number <= 0.67 && number > 0.33) {
// console.log('between 33 and 67')
// var choice = 'paper';
// } else {
// var choice = 'scissor';
// console.log('between 67-100')
// }
// return choice;
/*
* Way 3
*/
if(number >= 0 && number <= 0.33) {
console.log('between 0 and 33');
return 'rock';
} else if(number <= 0.67 && number > 0.33) {
console.log('between 33 and 67');
return 'paper';
} else {
console.log('between 67-100');
return 'scissors';
}
}
// Comparing the computer to the user
var compare = function( computer, user ) {
if(computer === user) {
return "it's a tie";
}
// //Scissors Beats Paper
// if(computer === 'scissors'){
// if(user === 'rock') {
// return 'rock wins';
// } else if (user === 'paper') {
// return 'scissors wins';
// }
// }
// if(computer === 'rock'){
// if(user ==='scissors') {
// return 'rock wins'
// } else if (user === 'paper') {
// return 'scissors wins';
// }
// }
// if(computer === 'paper'){
// if(user ==='scissors') {
// return 'scissors wins'
// } else if (user === 'rock') {
// return 'paper wins';
// }
// }
// Paper win options
if(computer === 'rock' && user === 'paper') {
return 'paper wins';
}
if(computer === 'paper' && user === 'rock') {
return 'paper wins';
}
// Rock win options
if(computer === 'scissors' && user === 'rock') {
return 'rock wins';
}
if(computer === 'rock' && user === 'scissors') {
return 'rock wins';
}
// Scissors win options
if(computer === 'paper' && user === 'scissors') {
return 'scissors wins';
}
if(computer === 'scissors' && user === 'paper') {
return 'scissors wins';
}
}
// What the user's choice is
$("#rock,#paper,#scissors").on('click', function(){
var userChoice = this.id;
var compChoice = computerChoice();
var message = compare(userChoice, compChoice);
$("#userChoice").html(userChoice);
$("#compChoice").html(compChoice);
$("#message").html(message);
});
$(".rps-action").on('click', function(){
var userChoice = this.id;
var compChoice = computerChoice();
var message = compare(userChoice, compChoice);
$("#userChoice").html(userChoice);
$("#compChoice").html(compChoice);
$("#message").html(message);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.