Skip to content

Instantly share code, notes, and snippets.

@jannaee
Created April 18, 2014 11:41
Show Gist options
  • Save jannaee/11039522 to your computer and use it in GitHub Desktop.
Save jannaee/11039522 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin:0 25px 125px 25px;
}
a{text-decoration: none;}
#outergameArea{
width: 425px;
height: 137px;
padding: 20px 20px 0 20px;
margin-left: 50px;
border: 2px solid #525;
border-radius: 20px;
}
#computerArea{
float: left;
width: 200px;
height:110px;
background:url(img/computers-image.gif) -15px -6px;
}
#humanArea{
float: right;
width:200px;
height:110px;
background:url(img/humans-image.gif) 0 -4px;
}
/* #humanArea:hover{
background:url(img/humans-image.gif) 0 -8px;
}*/
#humanPaper{
background:url(img/humans-image.gif) 15px -155px;
}
#humanScissors{
background:url(img/humans-image.gif) -1px -303px;
}
#computerPaper{
background:url(img/humans-image.gif) -15px -155px;
}
.computerScissors{
background:url(img/humans-image.gif) -15px -303px;
}
#reset{
float: right;
}
.controls{
clear: both;
position: relative;
top: 47px;
left: -60px;
}
ul.controls li{
list-style-type: none;
display: inline-block;
height: 25px;
width: auto;
padding: 5px 10px 0 10px;
margin-right: 5px;
background-color: #9DBDC6;
border-radius: 5px;
border: none;
outline: none;
}
ul.controls li:hover{
background-color: #525;
cursor: pointer;
}
ul.controls li:visited{
background-color: #272F32;
}
</style>
</head>
<body>
<h1>Rock Paper Scissors</h1>
<!-- <h4>Question 2: Link to a program written from scratch<h4>
<p>Please link to a program you've written from scratch.
You can use something like GitHub's gist to host your code. It doesn't need to be long, but it should be something you've written yourself, and not using a framework (e.g., Rails). If you don't have anything to submit, code something small, like a game of tic-tac-toe.</p> -->
<!-- <h4>Algorithim for game</h4>
<ul>
<li>User picks a selection, press "play"</li>
<li>Animate hand to lift and set down 3 times from rock position</li>
<li>Include a timer on the upper right that shows a count down from 3</li>
<li>On 3rd time:
<ul>
<li>Randomly choose for the computer an option of rock paper or scissors.</li>
<li>Player must select one of the options of rock paper or scissors before timer is up</li>
</ul>
</li>
</ul> -->
<div id="outergameArea">
<div id="computerArea">
<p style="position: relative; top:69px; left:137px;">Computer</p>
</div>
<div id="humanArea">
<p style="position: relative; top:70px; left:20px;">You</p>
</div>
<ul class="controls">
<li id="rock"><a href="#">rock</a></li>
<li id="paper"><a href="#">paper</a></li>
<li id="scissors"><a href="#">scissors</a></li>
</ul>
</div>
<!-- <canvas width="500" height="500" style="border:1px solid black"></canvas>
-->
<script>
function play(event){
//event = event || window.event;//for cross browser capability detection of event or global object event
var rock = document.getElementById('rock');
var paper = document.getElementById('paper');
var scissors = document.getElementById('scissors');
//User Choices
rock.addEventListener('click',
function(){
userChoice="rock";
computerLogic();
compare();
},false);
paper.addEventListener('click',
function(){
userChoice="paper";
computerLogic();
compare();
},false);
scissors.addEventListener('click',
function(){
userChoice="scissors";
computerLogic();
compare();
},false);
function computerLogic(){
computerChoice = Math.floor(Math.random()*6);
//Randomized Computer Choice
if (computerChoice<=1) {
//console.log(computerChoice);
computerChoice = "rock";
} else if(computerChoice >=2 && computerChoice <=3){
//console.log(computerChoice);
computerChoice = "scissors";
} else if(computerChoice >=4){
//console.log(computerChoice);
computerChoice = "paper";
}
}
function compare(){
if (userChoice === computerChoice){
console.log('tie');
} else if(userChoice === "rock"){
if(computerChoice==="scissors") {
console.log('you win');
}else if(computerChoice==="paper"){
console.log('computer wins');
}
} else if(userChoice === "scissors"){
if(computerChoice==="rock"){
console.log('computer wins');
}else{console.log("You wins")}
} else if (userChoice ==="paper") {
if (computerChoice ==="rock") {
console.log('you win');
}else if(computerChoice==="scissors"){
console.log('computer wins');
}
};
console.log("you picked " + userChoice + " computer picked " + computerChoice);
}
}
play();
</script>
</body>
</html
@Jayaramki
Copy link

missed ">" at the end of "</ html >"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment