Javascript Coding

Intel_man · May 26, 2009

Feedback on the code would be awesome.

Code:

<html>
<head>
<style type="text/css">
#title{position:absolute; top:10; left:60; width:300; height:50;
background-color:white; visibility:visible; text-align: left; font-size:18pt;
z-Index:3}

#displayarea{position:absolute; top:5; left:50; width:600; height:400;
background-color:white; visibility:visible; text-align: center;border-style: ridge;
z-Index:0}

#playerchoice{position:absolute; top:115; left:125; width:50; height:50;
background-color:white; visibility:visible; text-align: center;
z-Index:3}

#computerchoice1{position:absolute; top:60; left:327; width:50; height:50;
background-color:white; visibility:visible; text-align: center;
z-Index:3}

#displayarea2{position:absolute; top:180; left:327; width:50; height:50;
background-color:white; visibility:visible; text-align: center;
z-Index:3}

#vs{position:absolute; top:90; left:210; width:100; height:110;
background-color:white; visibility:visible; text-align: center;
z-Index:2}

#player{position:absolute; top:90; left:115; width:70; height:20;
background-color:white; color:red; visibility:visible; text-align: center; font-size:16pt;
z-Index:5}

#computer{position:absolute; top:40; left:320; width:50; height:5;
background-color:white; color:red; visibility:visible; text-align: center;
z-Index:6}

#computer2{position:absolute; top:160; left:320; width:100; height:5;
background-color:white; color:red; visibility:visible; text-align: left;
z-Index:6}

#buttonarea{position:absolute; top:330; left:50; width:600; height:75;
background-color:grey; visibility:visible; text-align: center;border-style: ridge;
z-Index:1}

#buttonarea2{position:absolute; top:330; left:50; width:600; height:75;
background-color:grey; visibility:hidden; text-align: center;border-style: ridge;
z-Index:1}

#buttonrock{position:absolute; top:385; left:283; width:10; height:10;
background-color:grey; visibility:visible; text-align: center;
z-Index:7}

#buttonpaper{position:absolute; top:385; left:333; width:10; height:10;
background-color:grey; visibility:visible; text-align: center;
z-Index:7}

#buttonscissor{position:absolute; top:385; left:383; width:10; height:10;
background-color:grey; visibility:visible; text-align: center;
z-Index:7}

#scorearea{position:absolute; top:260; left:530; width:100; height:55;
background-color:white; visibility:visible; text-align: center;border-style: ridge; font-size:10pt;
z-Index:2}

#scorearea_c1{position:absolute; top:45; left:530; width:100; height:55;
background-color:white; visibility:visible; text-align: center;border-style: ridge; font-size:10pt;
z-Index:2}

#scorearea_c2{position:absolute; top:155; left:530; width:100; height:55;
background-color:white; visibility:visible; text-align: center;border-style: ridge; font-size:10pt;
z-Index:2}

#computer1name{position:absolute; top:27; left:525; width:120;
background-color:white; visibility:visible; text-align: center; font-size:10pt;
z-Index:6}

#computer2name{position:absolute; top:135; left:525; width:120;
background-color:white; visibility:visible; text-align: center; font-size:10pt;
z-Index:6}

#total{position:absolute; top:240; left:535; width:100;
background-color:white; visibility:visible; text-align: center; font-size:10pt;
z-Index:6}

#rule{position:absolute; top:266; left:70; width:400;
background-color:white; visibility:visible; text-align: left; font-size:9pt;
z-Index:6}

</style>
</head>

<body>
<script language='javascript'>
// first score area
var score1=0;
var loss1=0;
var tie1=0;
// second score area
var score2=0;
var loss2=0;
var tie2=0;
// total score area
var score=0;
var loss=0;
var tie=0;

function resetgame() {
score1=0;
loss1=0;
tie1=0;
// second score area
score2=0;
loss2=0;
tie2=0;
// total score area
score=0;
loss=0;
tie=0;

	var displayscore="Wins: "+score+"<br />Loss: "+loss+"<br />Tie: "+tie;
	var displayscore2="Wins : "+score1+"<br />Loss: "+loss1+"<br />Tie: "+tie1;
	var displayscore3="Wins: "+score2+"<br />Loss: "+loss2+"<br />Tie: "+tie2;
	document.getElementById("scorearea").innerHTML=displayscore;
	document.getElementById("scorearea_c1").innerHTML=displayscore2;
	document.getElementById("scorearea_c2").innerHTML=displayscore3;
	document.getElementById("buttonarea").style.visibility="visible";
	document.getElementById("buttonarea2").style.visibility="hidden";
	document.getElementById("buttonrock").style.visibility="visible";
	document.getElementById("buttonpaper").style.visibility="visible";
	document.getElementById("buttonscissor").style.visibility="visible";
	document.getElementById("displayarea2").style.visibility="hidden";
	document.getElementById("computerchoice1").style.visibility="hidden";
	document.getElementById("playerchoice").style.visibility="hidden";
}

function pickcard2() {
	document.getElementById("buttonarea").style.visibility="visible";
	document.getElementById("buttonarea2").style.visibility="hidden";
	document.getElementById("buttonrock").style.visibility="visible";
	document.getElementById("buttonpaper").style.visibility="visible";
	document.getElementById("buttonscissor").style.visibility="visible";
	document.getElementById("displayarea2").style.visibility="hidden";
	document.getElementById("computerchoice1").style.visibility="hidden";
	document.getElementById("playerchoice").style.visibility="hidden";
}

function pickcard(x)  {
	var cards=new Array("rock","paper","scissor");
	var cardimage=new Array("images-2.jpg","images.jpg","images-1.jpg");
	var z=Math.floor(Math.random() * cards.length);
	var z1=Math.floor(Math.random() * cards.length);
	var computerchoice=cards[z];
	var computerchoice2=cards[z1];
	document.getElementById("buttonarea").style.visibility="hidden";
	document.getElementById("buttonarea2").style.visibility="visible";
	document.getElementById("buttonrock").style.visibility="hidden";
	document.getElementById("buttonpaper").style.visibility="hidden";
	document.getElementById("buttonscissor").style.visibility="hidden";
	document.getElementById("displayarea2").style.visibility="visible";
	document.getElementById("computerchoice1").style.visibility="visible";
	document.getElementById("playerchoice").style.visibility="visible";
	var cchoice1;
	var cchoice2;
if (x=="rock") {
	document.getElementById("playerchoice").innerHTML="<img src=images-2.jpg><br />Rock";
	if (computerchoice=="paper") {
//	alert("computer1 wins");
	cchoice1="Paper";
	loss++;
	loss1++;
	}else if (computerchoice=="scissor") {
//	alert("computer1 loses");
	cchoice1="Scissor";
	score++;
	score1++;
	}else {
//	alert("tie");
	cchoice1="Rock";
	tie++;	
	tie1++;
	}
	if (computerchoice2=="paper") {
//	alert("computer2 wins");
	cchoice2="Paper";
	loss++;
	loss2++;
	}else if (computerchoice2=="scissor") {
//	alert("computer2 loses");
	cchoice2="Scissor";
	score++;
	score2++;
	}else {
//	alert("tie");
	cchoice2="Rock";
	tie++;	
	tie2++;
	}
}

if (x=="paper") {
	document.getElementById("playerchoice").innerHTML="<img src=images.jpg><br />Paper";
	if (computerchoice=="paper") {
//	alert("tie");
	cchoice1="Paper";
	tie++;
	tie1++;
	}else if (computerchoice=="scissor") {
//	alert("computer1 wins");
	cchoice1="Scissor";
	loss++;
	loss1++;
	}else {
//	alert("computer1 loses");
	cchoice1="Rock";
	score++;
	score1++;
	}
	if (computerchoice2=="paper") {
//	alert("tie");
	cchoice2="Paper";
	tie++;
	tie2++;
	}else if (computerchoice2=="scissor") {
//	alert("computer2 wins");
	cchoice2="Scissor";
	loss++;
	loss2++;
	}else {
//	alert("computer2 loses");
	cchoice2="Rock";
	score++;
	score2++;
	}
} 
if (x=="scissor") {
	document.getElementById("playerchoice").innerHTML="<img src=images-1.jpg><br />Scissor";
	if (computerchoice=="paper") {
//	alert("computer1 loses");
	cchoice1="Paper";
	score++;
	score1++;
	}else if (computerchoice=="scissor") {
//	alert("tie");
	cchoice1="Scissor";
	tie++;
	tie1++;
	}else {
//	alert("computer1 wins");
	cchoice1="Rock";
	loss++;
	loss1++;
	}
	if (computerchoice2=="paper") {
//	alert("computer2 loses");
	cchoice2="Paper";
	score++;
	score2++;
	}else if (computerchoice2=="scissor") {
//	alert("tie");
	cchoice2="Scissor";
	tie++;
	tie2++;
	}else {
//	alert("computer2 wins");
	cchoice2="Rock";
	loss++;
	loss2++;
	}
} 
	var displayimage="<img src="+cardimage[z]+"><br />"+cchoice1;
	var displayimage2="<img src="+cardimage[z1]+"><br />"+cchoice2;
	
	var displayscore="Wins: "+score+"<br />Loss: "+loss+"<br />Tie: "+tie;
	var displayscore2="Wins : "+score1+"<br />Loss: "+loss1+"<br />Tie: "+tie1;
	var displayscore3="Wins: "+score2+"<br />Loss: "+loss2+"<br />Tie: "+tie2;
	document.getElementById("computerchoice1").innerHTML=displayimage;
	document.getElementById("displayarea2").innerHTML=displayimage2;
	document.getElementById("scorearea").innerHTML=displayscore;
	document.getElementById("scorearea_c1").innerHTML=displayscore2;
	document.getElementById("scorearea_c2").innerHTML=displayscore3;

}
</script>
	<div id=title><u>Rock, Paper, Scissors</u>
	</div>
	<div id=player>Player
	</div>
	<div id=computer>Computer
	</div>
	<div id=computerchoice1>
	</div>
	<div id=computer2>Computer 2
	</div>
	<div id=playerchoice>
	</div>
	<div id=vs><img src="http://i225.photobucket.com/albums/dd212/mclaren_mercedes_f1/test.png" width=100 height=110>
	</div>
	<div id=displayarea>
	</div>
	<div id=displayarea2>
	</div> 
	<div id=scorearea>
	</div>
	<div id=scorearea_c1>
	</div>
	<div id=scorearea_c2>
	</div>
	<div id=buttonarea>
		<input type=image src="http://i225.photobucket.com/albums/dd212/mclaren_mercedes_f1/images-2.jpg" value='Rock' onClick="pickcard('rock')" />
		<input type=image src="http://i225.photobucket.com/albums/dd212/mclaren_mercedes_f1/images.jpg" value='Paper' onClick="pickcard('paper')" />   
		<input type=image src="http://i225.photobucket.com/albums/dd212/mclaren_mercedes_f1/images-1.jpg" value='Scissor' onClick="pickcard('scissor')" />  
	</div>
	<div id=buttonarea2>
		<br /><br /><input type=button value="continue" onClick="pickcard2()"/><input type=button value="reset" onClick="resetgame()"/>
	</div>
	<div id=buttonrock>Rock
	</div>
	<div id=buttonpaper>Paper
	</div>
	<div id=buttonscissor>Scissor
	</div>
	<div id=computer1name>Computer1 Score
	</div>
	<div id=computer2name>Computer2 Score
	</div>
	<div id=total>Total Score
	</div>
	<div id=rule><b>Rules:</b><br />
	1. Select the following three choices of Rock, Paper, Scissors.<br />
	2. Objective of the game is to beat the computer as many times as possible.<br />
	3. Enjoy.
</body>
</html>

Euklid · May 26, 2009

Cool. Now use Ajax to connect to a central server so two players go heads up. As soon as both players make their selection, have the page update. Then make a ladder page to list the highest scores.

Intel_man · May 28, 2009

LOL... if only I knew how to do that.

I'm not that good with coding yet.

Euklid · May 28, 2009

You will require one of the Ajax library files. That is easy part.

Harder part is the back-end. You need PHP and MySQL to manage the players and top scores. Then you just use the Ajax load function to get updates from the PHP script.

Intel_man · May 29, 2009

Yea well, the only language i know right now is javascript.

Haven't learned other languages yet.

Javascript Coding

Intel_man

VIP Member

Euklid

Member

Intel_man

VIP Member

Euklid

Member

Intel_man

VIP Member