jannaee · April 18, 2014 11:41 · Jayaramki · Apr 18, 2014
diff --git a/gistfile1.txt b/gistfile1.txt
 <!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
	<!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