简单小游戏之石头剪刀布

简易创作并未布局可玩
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 800px;
				height: 500px;
				background: skyblue;
				margin: 0 auto;
			}
			#bLef{
				float: left;
				width: 400px;
				height: 400px;
			}
			#bRig{
				float: left;
				width: 400px;
				height: 400px;
			}
			#bBot{
				width: 800px;
				height: 100px;
				float: left;
			}
			#wol{
				width: 800px;
				height: 30px;
			}
			#jfb{
				width: 800px;
				height: 70px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="bLef">
				玩家&nbsp;<span id="san"></span><br>请选择你要出的选项:
				<button id="stone">石头</button>
				<button id="knife">剪刀</button>
				<button id="scrw">布</button><br>
				<button id="btn">确定</button>
			</div>
			<div id="bRig">
				电脑<br><span id="spn"></span>
			</div>
			<div id="bBot">
				对局结果:
				<div id="wol">
					
				</div>
				<div id="jfb">
					总局数:<span id="all">
						
					</span>
					玩家胜利:<span id="useWin"></span>
					平局局数:<span id="nwl"></span>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	let cop=document.getElementById("spn")
	let san=document.getElementById("san")
	let bot=document.getElementById("bBot")
	let btn=document.getElementById("btn")
	let stone=document.getElementById("stone")
	let scrw=document.getElementById("scrw")
	let knife=document.getElementById("knife")
	let wol=document.getElementById("wol")
	let use=document.getElementById("useWin")
	let all=document.getElementById("all")
	let nwl=document.getElementById("nwl")
	let comCou=0;
	let useCou=0;
	let faiCou=0;
	let det=0;
	stone.onclick=function(){
		san.innerHTML="石头"
	}
	knife.onclick=function(){
		san.innerHTML="剪刀"
	}
	scrw.onclick=function(){
		san.innerHTML="布"
	}
	let arr=["石头","剪刀","布"]
	btn.onclick=function(){
		det++;
		let m=Math.floor(Math.random()*3)
		cop.innerHTML=arr[m]
		if(san.innerHTML==cop.innerHTML){
			wol.innerHTML="平局"
			faiCou++;
		}else if(san.innerHTML=="石头"&&cop.innerHTML=="布"){
			wol.innerHTML="玩家败"
			comCou++;
		}else if(san.innerHTML=="石头"&&cop.innerHTML=="剪刀"){
			wol.innerHTML="玩家胜"
			useCou++;
		}else if(san.innerHTML=="剪刀"&&cop.innerHTML=="布"){
			wol.innerHTML="玩家胜"
			useCou++;
		}else if(san.innerHTML=="剪刀"&&cop.innerHTML=="石头"){
			wol.innerHTML="玩家败"
			comCou++;
		}
		
		all.innerHTML=det;
		use.innerHTML=useCou;
		nwl.innerHTML=faiCou;
	}
</script>
简单小游戏之石头剪刀布

猜你喜欢
