【JS】前端-猜拳小游戏

最新推荐文章于 2024-07-26 20:46:33 发布

小乐新学

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量533

点赞数 2

本文链接：https://blog.csdn.net/m0_55211917/article/details/120032147

版权

HTML JavaScript 游戏开发前端开发用户交互

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>猜拳游戏</title>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<table class="table1">
			<tr>
				<td class="td1">
					<div class="text1">你</div>
					<div class="image"><img id="youimg" src="img/zb.jpg"/></div>
				</td>
				<td class="td1">
					<div class="text2">VS</div>
				</td>
				<td class="td1">
					<div class="text1">电脑</div>
					<div class="image"><img id="computerimg" src="img/zb.jpg"/></div>
				</td>
			</tr>
			<tr>
				<td class="td1" colspan="3">
					<div class="text3" id="ready">Are you ready?</div>
				</td>
			</tr>
			<tr>
				<td class="td1">
					<div class="text1">你选择了：</div>
					<div class="image"><img id="img" src="img/zb.jpg"/></div>
				</td>
				<td class="td1">
					<div class="text4">Choice</div>
				</td>
				<td class="td1">
					<div class="text1">请选择出拳:</div>
					<div class="">
						<select id="select" onchange="start()">
							<option value="0">请选择</option>
							<option value="1">石头</option>
							<option value="2">剪刀</option>
							<option value="3">布</option>
						</select>
						<button id="btn" onclick="go()">确认出拳</button>		
					</div>
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<table class="table2">
						<tr class="tr2">
							<td class="td2"><div class="text1">总数:</div></td>
							<td class="td3"><div class="text1" id="sum">0</div></td>
							<td class="td2"><div class="text1">胜利:</div></td>
							<td class="td3"><div class="text1" id="win">0</div></td>
							<td class="td2"><div class="text1">失败:</div></td>
							<td class="td3"><div class="text1" id="fail">0</div></td>
							<td class="td2"><div class="text1">平局:</div></td>
							<td class="td3"><div class="text1" id="equal">0</div></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>
<script type="text/javascript" src="js/index.js" ></script>

.table1{
	text-align: center;
	border: 1px solid black;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 100px auto;
}
.table2{
	margin: auto;
}
.td1{
	border: 1px solid black;
	padding: 10px;
}
.text1{
	font-size: 15px;
	color: black;
	font-family: "微软雅黑";
	font-weight: 600;
	margin: 10px auto;
}
.text2{
	color:	#FFC125 ;
	font-size: 50px;
	font-weight: bolder;
}
.text3{
	color: red;
	font-weight: bolder;
	font-size: 30px;
	margin: 15px auto;
}
.text4{
	color:	#FFC125 ;
	font-size: 30px;
	font-weight: bolder;

}
.td2{
	width: 50px;
}
.td3{
	text-align: left;
	width: 30px;
}

.image{
	margin: auto 30px;
}
.btn{
	position:absolute;
	cursor: pointer;
}

var sumnum=0;
var winnum=0;
var failnum=0;
var equalnum=0;

function start(){
	var sel=document.getElementById('select').value;//获取下拉菜单的value值
	var img=document.getElementById('img');

	if(sel==1){
		img.src='img/st.jpg';
	}
	else if(sel==2){
		img.src='img/jd.jpg';
	}
	else if(sel==3){
		img.src='img/bu.jpg';
	}
}

function go(){
	var youimg=document.getElementById('youimg');
	var computerimg=document.getElementById('computerimg');
	var ready=document.getElementById('ready');
	var sel=document.getElementById('select').value;
	var img=document.getElementById('img');
	
	var sum=document.getElementById('sum');
	var win=document.getElementById('win');
	var fail=document.getElementById('fail');
	var equal=document.getElementById('equal');
	
	if(sel!=0){
		youimg.src=img.src;
	
		var num=parseInt(Math.random()*3+1);
		
		if(num==1){
			computerimg.src='img/st.jpg';
		}
		else if(num==2){
			computerimg.src='img/jd.jpg';
		}
		else if(num==3){
			computerimg.src='img/bu.jpg';
		}
		
		
		var result=sel-num;
		sumnum++;
		if(result==0){
			equalnum++;
			ready.innerText='平局';
			
		}
		else if(result==-1||result==2){
			winnum++;
			ready.innerText='胜利';
			
		}
		else if(result==-2||result==1){
			failnum++;
			ready.innerText='失败';
		}
	}
	else{
		ready.innerText='请选择出拳';
	}
	
	win.innerText=winnum;
	fail.innerText=failnum;
	equal.innerText=equalnum;
	sum.innerText=sumnum;
}



/*
 * 石头 剪刀 布
 * 1   2   3
 * 
 * 胜利  1 2  -1
 * 		2 3  -1
 * 		3 1  2
 * 
 * 失败  1  3  -2
 * 		2  1  1
 * 		3  2  1
 */

小乐新学

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
【JS】前端-猜拳小游戏

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>猜拳游戏</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <table class="table1"> &lt...
复制链接

扫一扫