利用javascript写一个石头剪刀布的简易小游戏

2021/5/11 20:25:31

编程Tag： javascript innerHTML 小游戏 break getElementById document case ++ 剪刀

本文主要是介绍利用javascript写一个石头剪刀布的简易小游戏，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>石头剪刀布</title>
	<style type="text/css">

		div{
			border:3px solid red;
			float: left;
			margin-left: 20%;
			padding: 10px;
			text-align: center;
			background-color: pink
		}
		img{
			height: 100px;
			margin:10px;
			border:1px solid blue;
			opacity: 0.4
		}
		ul{
			list-style: none;
			margin-left: 20%
		}
		li{
			display: inline;

		}
		span{
			width: 70px;
			float: left;
			background-color: teal;
			padding:5px;
		}
	</style>
</head>
<body>
	<div>
		<strong>电脑玩家</strong> <br>
		<img src="rock.jpg" alt="" style="opacity:1.0"> <br>
		<strong>玩家</strong>	<br>
		<img src="scissor.jpg" alt="scissor" onm ouseover="over(this)" onm ouseout="out(this)" onclick="myClick(this)">
		<img src="rock.jpg" alt="rock" onm ouseover="over(this)" onm ouseout="out(this)" onclick="myClick(this)">
		<img src="paper.jpg" alt="paper" onm ouseover="over(this)" onm ouseout="out(this)" onclick="myClick(this)"> <br>
		<ul>
			<li><span><b>胜利</b></span></li>
			<li><span><b>平手</b></span></li>
			<li><span><b>失败</b></span></li>
		</ul>
		<ul style="clear:left">
			<li><span id="win"><b>0</b></span></li>
			<li><span id="sci"><b>0</b></span></li>
			<li><span id="lose"><b>0</b></span></li>
		</ul>
	</div>
</body>
<script type="text/javascript">

	var img=document.getElementsByTagName('img')[0];
	/*鼠标移入移出改变图片透明度*/
	function over(divDom){
		divDom.style.opacity=1.0;
	}
	function out(divDom){
		divDom.style.opacity=0.4;
	}

	/*页面加载，电脑玩家图片一致循环替换*/
	var i=0;
	function load() {
		i++;
		var m=i%3;
		switch(m){
			case 0:
			img.src="scissor.jpg";
			break;
			case 1:
			img.src="rock.jpg";
			break;
			case 2:
			img.src="paper.jpg";
			break;
		}
		setTimeout(load,100);
	}
	load();

	/*封装玩家点击事件*/
	var s=0;
	var l=0;
	var w=0;
	function myClick(divDom) {
		if(divDom.alt=="scissor"){
			//此时玩家是剪刀
			switch(i%3){
				case 0://电脑为剪刀
				alert("平手");
				document.getElementById("sci").innerHTML=++s;
				break;
				case 1://电脑为石头
				alert("失败");
				document.getElementById("lose").innerHTML=++l;
				break;
				case 2://电脑为布
				alert("胜利");
				document.getElementById("win").innerHTML=++w;
				break;	
			}
		}else if(divDom.alt=="rock"){
			//此时玩家是石头
			switch(i%3){
				case 0://电脑为剪刀
				alert("胜利");
				document.getElementById("win").innerHTML=++w;
				break;
				case 1://电脑为石头
				alert("平手");
				document.getElementById("sci").innerHTML=++s;
				break;
				case 2://电脑为布
				alert("失败");
				document.getElementById("lose").innerHTML=++l;
				break;	
			}
		}else  if(divDom.alt=="paper"){
			//此时玩家是布
			switch(i%3){
				case 0://电脑为剪刀
				alert("失败");
				document.getElementById("lose").innerHTML=++l;
				break;
				case 1://电脑为石头
				alert("胜利");
				document.getElementById("win").innerHTML=++w;
				break;
				case 2://电脑为布
				alert("平手");
				document.getElementById("sci").innerHTML=++s;
				break;	
			}
		}
	}
</script>
</html>

最后实现的效果如下:

在这里插入图片描述玩法:电脑会以较快速度随机刷新石头剪刀和布三种中的一种，玩家通过点击下方的图片来选择出石头剪刀还是布，这里面有胜利，失败和平手三种情况，出现的每种情况都会被记录在下方。

这个小游戏主要用到了JS中的鼠标点击事件以及鼠标的移入移出事件，其中涉及到的图片请自行准备。

这篇关于利用javascript写一个石头剪刀布的简易小游戏的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

利用javascript写一个石头剪刀布的简易小游戏

相关编程文章