IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> 【JS】前端-猜拳小游戏 -> 正文阅读

[游戏开发]【JS】前端-猜拳小游戏

? ??

?? ? ??

?

<!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
 */
  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2021-09-02 11:43:50  更:2021-09-02 11:44:23 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/21 23:56:49-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码