master

分支 (1)

管理

管理

master

Kyoo
/
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<style type="text/css">
	   *{
			padding: 0;
			margin: 0;
		}
		#common{
			width: 480px;
			height: 680px;
			border: 3px solid orange;
			margin: 0 auto;
			background-image:url(img/timg.jpg) ;
		}

		#title{
			margin-top: 20px;
			font-family:"楷体";
			font-size: 60px;
			color:#FF0000;
			margin-left: 100px;
		}
		p.tip{
			font-family: "黑体";
			font-size: 18px;
			margin: 20px 0 0 20px;
			color: yellowgreen;
		}
		p.w{
			font-family: "楷体";
			font-size: 30px;
			padding-top: 20px;
			position: absolute;
			margin: 30px 0 0 35px;
			color:#8A2BE2;
		}
		p.vs{
			font-family: "楷体";
			font-size: 80px;
			float: left;
			padding-left: 20px;
			margin: 10px 0 0 200px;
			color: red;

		}
		p.d{
			font-family: "楷体";
			font-size: 30px;
			float: right;
			padding-top: 20px;
			margin: 30px 35px 0 0;
			color: #8A2BE2;
		}
		#show1{
			width: 100px;
			height: 100px;
			position: absolute;
			margin: 110px 0 0 15px;
			background-image: url(img/石头.png);
		}
		#img{
			margin-top: 100px;
			margin-left: 220px;
			visibility: hidden;
		}
		#img ul{
			width: 280px;
			height: 170px;
			margin-top: 40px;
			position: absolute;

		}
		#img ul li{
			list-style: none;
			display: inline;

		}

		#win{
			position: absolute;
			left: 760px;
			top: 350px;
			font-size: 40px;
			visibility: hidden;
			color: deepskyblue;
		}

		#loser{
			position: absolute;
			left: 760px;
			top: 350px;
			font-size: 40px;
			visibility: hidden;
			color: deepskyblue;
		}

		#draw{
			position: absolute;
			left: 760px;
			top: 350px;
			font-size: 40px;
			visibility: hidden;
			color: deepskyblue;
		}
		#show2{
			width: 100px;
			height: 100px;
			float: right;
			background-image: url(img/石头.png);
			margin: 15px 15px 0 15px;
		}

		#start{
			width: 180px;
			font-family: "黑体";
			font-weight: bold;
			font-size: 20px;
			padding: 10px;
			background-color: brown;
			text-align: center;
			margin: 300px 0 0 150px;
			-webkit-border-radius: 5px;
			cursor: pointer;
			visibility: visible;
			border-radius:20px,20px,20px,20px ;
		}
		#again{
			width: 180px;
			position: relative;
			font-family: "黑体";
			font-weight: bold;
			font-size: 20px;
			padding: 10px;
			text-align: center;
			cursor: pointer;
			-webkit-border-radius: 5px;
			background-color:chocolate;
			top: -40px;
			left: 150px;
			visibility: hidden;
			border-radius:20px,20px,20px,20px ;
		}
		#count{
			width: 300px;
			height: 200px;
			margin-top: 10px;
		}

		table{
			width: 300px;
			height: 150px;
			margin-left: 90px;
			text-align: center;
			color:blueviolet;
			border: 5px solid bisque;
		}

		</style>
		<title>猜拳游戏</title>

	</head>

	<body>
		<div id="common">
			<div id="title">请开始游戏</div>
			<p class="w">Enviroment</p>
			<p class="vs">vs</p>
			<p class="d">Player</p>
			<div id="show1"></div>

			<div id="show2"></div>
			<div id="img">
				<ul>
					<li><img src="img/石头.png" width="90px" height="90" id="st" /></li>
					<li><img src="img/剪刀.png" width="90px" height="90" id="jd" /></li>
					<li><img src="img/布.png" width="90px" height="90" id="bu" /></li>
				</ul>
			</div>
			<div id="win">
			</div>
			<div id="loser">
			</div>
			<div id="draw">
			</div>

			<div id="answertip"></div>
			<div id="start">开始</div>
			<div id="again">重开</div>
			<div id="count">
				<table border="1px" cellspacing="0" cellpadding="0">
					<tr>
						<td>选手</td>
						<td>胜利次数</td>
						<td>胜率(10次)</td>
					</tr>
					<tr>
						<td>Environment</td>
						<td id="win1"></td>
						<td id="gl"></td>
					</tr>
					<tr>
						<td>Player</td>
						<td id="win2"></td>
						<td id="gl1"></td>
					</tr>
				</table>
			</div>
		</div>


		<script type="text/javascript" charset="utf-8">
			var title = document.getElementById("title");
			var show1 = document.getElementById("show1");
			var show2 = document.getElementById("show2");
			var img = document.getElementById("img");
			var jd = document.getElementById("jd");
			var st = document.getElementById("st");
			var bu = document.getElementById("bu");
			var win = document.getElementById("win");
			var loser = document.getElementById("loser");
			var draw = document.getElementById("draw");
			var start = document.getElementById("start");
			var again = document.getElementById("again");
			var count = document.getElementById("count");
			var win1 = document.getElementById("win1");
			var win2 = document.getElementById("win2");
			var gl = document.getElementById("gl");
			var gl1 = document.getElementById("gl1");

			var move = 0;
			setInterval(function() {
				move++;
				title.style.marginLeft = move + "px";
				if(move >= 180) move = 0;
			}, 50);

			show2.onclick = function() {
				img.style.visibility = "visible";
				show2.style.backgroundImage="none";

			}

			var ru1 = null;
			var ru;
			bu.onclick = function() {
				img.style.visibility = "hidden";
				show2.style.backgroundImage = "url(img/布.png)";
				ru1 = 0;
			}
			jd.onclick = function() {
				img.style.visibility = "hidden";
				show2.style.backgroundImage = "url(img/剪刀.png)";
				ru1 = 1;
			}
			st.onclick = function() {
				img.style.visibility = "hidden";
				show2.style.backgroundImage = "url(img/石头.png)";
				ru1 = 2;
			}

			function stbtest(name) {
				var result;
				switch(name) {
					case 0:
						result = "url(img/布.png)";
						break;
					case 1:
						result = "url(img/剪刀.png)";
						break;
					case 2:
						result = "url(img/石头.png)";
						break;
					default:
						break;
				}
				return result;
			}

			start.onclick = function() {
				if(ru1 == null) {
					alert("请选择你要出的手势！");
				} else {
					start.style.visibility = "hidden";
					var num = Math.random() * 10 + 1;
					num = Math.floor(num);
					ru = num % 3;
					var g = stbtest(ru);
					show1.style.backgroundImage = g;
					again.style.visibility = "visible";
					js();
				}
			}

			var c = 0;
			var jqw = 0;
			var rw = 0;
			again.onclick = function() {
				start.style.visibility = "visible";
				again.style.visibility = "hidden";
				show1.style.backgroundImage = "url(img/石头.png)";
				show2.style.backgroundImage = "url(img/石头.png)";
				win.style.visibility = "hidden";
				loser.style.visibility = "hidden";
				draw.style.visibility = "hidden";
				ru1 = null;
				if(c == 10) {
					c = 0;
					jqw = 0;
					rw = 0;
					win2.innerHTML = rw;
					win1.innerHTML = jqw;
					gl.innerHTML = "";
					gl1.innerHTML = "";
				}
			}

			function js() {
				var i = ru1 - ru;
				i = Math.abs(i);
				switch(i) {
					case 0:
						if(ru = ru1) {
							draw.style.visibility = "visible";
							alert("Please One Again");
						}else if(ru==0 && ru1==0){
							draw.style.visibility = "visible";
							alert("Please One Again");
						}
						break;

					case 1:
						if(ru1 < ru ){
							loser.style.visibility = "visible";
							alert("YOU LOSE");
							c++;
							jqw++;
						}else  {
							win.style.visibility = "visible";
							alert("YOU WIN");
							c++;
							rw++;
						}
						break;
					case 2:
						if(ru1 > ru) {
							loser.style.visibility = "visible";
							alert("YOU LOSE");
							c++;
							jqw++;
						}else {
							win2.style.visibility = "visible";
							alert("YOU WIN");
							c++;
							rw++;
						}
						break;
					default:
						break;
				}
				win1.innerHTML = jqw;
				win2.innerHTML = rw;
				if(c == 10) {
					gl1.innerHTML = jqw / c * 100 + "%";
					gl.innerHTML = rw / c * 100 + "%";
				}
			}
			js();
		</script>
	</body>

</html>