原生js实现简单猜拳游戏

发表于 | 分类于

构思

这是一个简单的练手demo。我要实现的是一个简单的猜拳游戏，游戏双方分别为用户和电脑（严格来说是浏览器，暂且这么叫吧），电脑出拳随机，用户选择出拳后，电脑停止滚动，同时显示电脑和用户出拳结果，判断胜负关系，同时统计用户成绩。

其实要实现的效果很简单，直接说我的思路吧。

  1. 首先，将三种出拳的图片列出，获取元素到数组；
  2. 然后生成一个随机数，使用随机数作为数组下标，获取电脑出拳结果；
  3. 设置定时器让电脑快速出拳并滚动显示；
  4. 定义函数实现用户点击出拳，并将结果显示在出拳显示区域；
  5. 获取双方出拳结果，定义函数，判定胜负关系；
  6. 统计胜负关系，重置游戏至下一轮。

页面结构

页面结构布局我设计的很简单，最上方显示双方出拳结果，中间区域显示用户成绩，最下方为用户出拳选择区域。

具体的html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>猜拳游戏</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <div id="box">
    	<h1>猜拳游戏</h1>
    	<div id="showarea" class="clearFix"><!-- 出拳显示区域开始 -->
	    	<div class="fl">
	    		<img id="computer" src="images/paper.jpg">
	    		<h3>电脑的选择</h3>
	    	</div>
	    	<div class="vs fl">
	    		<h1>VS</h1>
	    	</div>
			<div class="fl">
				<img id="user" src="">
				<h3>你的选择</h3>
			</div>
		</div><!-- 出拳显示区域结束 -->

		<section id="scores"><!-- 比分结果部分开始 -->
			<span class="tit">你的成绩:</span>
			<span>胜</span><span id="wincount">0</span>
			<span>平</span><span id="evencount">0</span>
			<span>负</span><span id="losecount">0</span>
		</section><!-- 比分结果部分结束 -->

    	<div id="options"><!-- 选项部分开始 -->
    		<ul>
    			<li>
    				<img src="images/rock.jpg" alt="石头" value="1">
    			</li>
    			<li>
    				<img src="images/scissor.jpg" alt="剪刀" value="2">
    			</li>
    			<li>
    				<img src="images/paper.jpg" alt="布" value="3">
    			</li>
    		</ul>
    	</div>
    	<h3>请点击图片选择你本轮应战的武器</h3>
    </div><!-- 选项部分结束 -->

    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

css样式

整个游戏的css样式也比较简单，只是做了简单的居中。

具体的css代码如下：

@charset "UTF-8";
body,ul,li,h1{
	margin: 0;
	padding: 0;
}

li{
	list-style: none;
}

.fl{
	float: left;
}

.clearFix:after{
	content: '';
	display: block;
	clear: both;
}

ul{
	margin: 20px auto;
	height: 120px;
}

li{
	float: left;
	width: 150px;
	margin: 10px;
	cursor: pointer;
}

img{
	vertical-align: top;
	width: 200px;
	height: 132px;
}

#box{
	width: 800px;
	margin: 0 auto;
	padding: 60px 0;
	text-align: center;
}

#showarea{
	width: 600px;
	margin: 50px auto 0;
}

.vs{
	width: 150px;
	height: 132px;
	font-size: 40px;
	line-height: 132px;
	margin-top: 10px;
	margin-right: 40px;
	vertical-align: middle;
}

#options{
	width: 520px;
	height: 120px;
	margin: 0 auto;
}

#options img{
	width: 150px;
	height: auto;
}

#scores{
	text-align: center;
	height: 40px;
	margin: 40px 0;
}

span{
	display: inline-block;
	width: 30px;
	font-size: 24px;
	line-height: 40px;
	text-align: center;
}

span.tit{
	width: 120px;
	padding-right: 20px;
}

#wincount,
#evencount,
#losecount{
	width: 60px;
	font-size: 24px;
	line-height: 40px;
	margin-right: 20px;
	color: #f60;
}

h3{
	text-align: center;
}

JavaScript部分

游戏最关键的JavaScript部分，其实总体比较简单。最关键的是解决如何通过获取双方出拳的图片来判断胜负。我这里是这样实现的：我在写出拳选项部分的时候，给每张图片都添加了一个value值，相当于给三张图片都添加了一个value属性，双方出拳的时候，都会把value值传递给出拳结果，最后获取出拳结果的value值进行比较，即可判定胜负关系。

另外一个需要注意的是，在调用判定胜负函数来判定结果时，需要使用setTimeout定时器来适当延迟胜负判定，否则会先显示判定结果，后显示用户出拳结果图片（这个我尝试过）。

具体的思路上边说过，这里不再重复叙述了。下面是详细的JavaScript代码：

//获取所需元素
var computer = document.getElementById("computer");
var user = document.getElementById("user");
var options = document.getElementById("options");
var list = options.getElementsByTagName("img");
var wincount = document.getElementById("wincount");
var evencount = document.getElementById("evencount");
var losecount = document.getElementById("losecount");
var win = 0, even = 0, lose = 0;	//定义三个变量用于存储成绩


//定义函数实现电脑随机出拳
//生成随机数实现出拳
function changeimg(){
	var r = Math.floor(Math.random()*3);
	computer.src = list[r].src;
	//通过绑定自定义的value属性，追踪图片结果，方便之后判定结果
	//自定义属性无法直接使用.value访问，需要通过getAttribute获取
	computer.value = list[r].getAttribute("value");
}

//设置定时器让电脑出拳滚动显示
var timer = setInterval(changeimg, 10);

//设置鼠标点击图片效果
var lis = document.getElementsByTagName("li");
for(var i = 0; i<list.length; i++){
	lis[i].index = i;
	lis[i].onmousedown = function(){
		lis[this.index].style.boxShadow = "0 0 10px 0 rgba(0,0,0,0.6)";
	}
	lis[i].onmouseover = function(){
		lis[this.index].style.boxShadow = "0 0 3px 0 rgba(0,0,0,0.3)";
	}
	lis[i].onmouseout = function(){
		lis[this.index].style.boxShadow = "0 0 0 0 #fff";
	}
}


//定义函数实现点击选择后，user出拳显示在上方区域
for(var i = 0; i<list.length; i++){
	list[i].index = i;
	list[i].onclick = function(){
		user.src = list[this.index].src;
		//通过绑定自定义的value属性，追踪图片结果，方便之后判定结果
		user.value = list[this.index].getAttribute("value");
		//console.log(user.value);
		//用户点击提交后，清空定时器，使电脑出拳停止滚动
		clearInterval(timer);
		//设置定时器实现先显示用户选择，再执行比较；否则先比较，后显示用户选择
		var timer1 = setTimeout(judge, 100);
		//判断完毕，重新让电脑出拳开始滚动
		timer = setInterval(changeimg, 20);
	}
}


//定义函数判定胜负
//通过前面获取到的图片的value值作比较，判断胜负
//value=1,对应"石头"; value = 2对应"剪刀"; value = 3对应"布"
function judge(){
	var comr = computer.value;
	var usrr = user.value;
	// console.log(comr);
	// console.log(usrr);
	if(comr == "1"){
		switch(usrr) {
			case "1":
				even += 1;
				evencount.innerText = even;
				alert("打平了！");
				break;
			case "2":
				lose += 1;
				losecount.innerText = lose;
				alert("你输了！");
				break;
			default:
				win += 1;
				wincount.innerText = win;
				alert("你赢了！");
		}
	}
	else if(comr == "2"){
		switch(usrr) {
			case "1":
				win += 1;
				wincount.innerText = win;
				alert("你赢了！");
				break;
			case "2":
				even += 1;
				evencount.innerText = even;
				alert("打平了！");
				break;
			default:
				lose += 1;
				losecount.innerText = lose;
				alert("你输了！");
		}
	}
	else{
		switch(usrr) {
			case "1":
				lose += 1;
				losecount.innerText = lose;
				alert("你输了！");
				break;
			case "2":
				win += 1;
				wincount.innerText = win;
				alert("你赢了！");
				break;
			default:
				even += 1;
				evencount.innerText = even;
				alert("打平了！");
		}
	}
	//判定结束，将user上一轮的图片清空，准备下一轮
	user.src = "";
}