JS实现简单小游戏箭头石头布案例，文末附素材

本文链接：https://blog.csdn.net/weixin_53798158/article/details/127821563
<html>

<head>
	<style>
		* {
			margin: 0 auto;
			padding: 0
		}

		body {
			background-color: #000;
		}

		#header {
			width: 425px;
			margin: 50px auto
		}

		#content {
			width: 1024px;
			height: 800px;
			margin: 20px auto
		}

		#content #status {
			float: left;
			width: 250px;
			height: 300px;
			margin: auto 20px;
			border: 2px solid #fff;
			font-family: '微软雅黑';
			font-size: 20px;
			color: #fff;
			line-height: 50px;
			text-align: center;
			padding-top: 100px;
		}

		#content #workspace {
			width: 700px;
			height: 400px;
			border: 1px solid #fff;
			float: right;
		}

		#content #workspace #player,
		#content #workspace #computer {
			width: 220px;
			float: left;
			margin: 10px 60px;
		}

		#content #workspace #text {
			float: left;
			width: 60px;
			font-family: '微软雅黑';
			color: #fff;
		}

		#content #workspace #pic {
			float: left;
			width: 140px;
			margin-right: 20px;
		}

		#content #workspace #clickqu {
			clear: both;
			width: 550px;
			height: 200px;
			margin-bottom: 5px;
			border: 2px solid #fff;
			position: relative;
		}

		#content #workspace #clickqu img {
			position: absolute;
		}

		#content #workspace #clickqu #pic1 {
			left: 20px;
			top: 20px;
		}

		#content #workspace #clickqu #pic2 {
			left: 190px;
			top: 20px;
		}

		#content #workspace #clickqu #pic3 {
			left: 360px;
			top: 20px;
		}
	</style>
</head>

<body>
	<div id="header">
		<img src="images/title.png" />
	</div>
	<div id="content">
		<div id="status">
			<p id="sum">总的局数:0</p>
			<p id="success">胜利局数:0</p>
			<p id="fail">失败局数:0</p>
			<p id="eval">打平局数:0</p>
		</div>
		<div id="workspace">
			<div id="chuquan">
				<div id="player">
					<div id="text">
						<h2>玩</h2><br />
						<h2>家</h2>
					</div>
					<div id="pic"><img id="pimg" src="images/shitou.png" /></div>
				</div>
				<div id="computer">
					<div id="pic"><img id="cimg" src="images/shitou.png" /></div>
					<div id="text">
						<h2>电</h2><br />
						<h2>脑</h2>
					</div>
				</div>
			</div>
			<div id="clickqu">
				<a href="#"><img id="pic1" src="images/jiandao.png" onclick="j()" /></a>
				<a href="#"><img id="pic2" src="images/shitou.png" onclick="s()" /></a>
				<a href="#"><img id="pic3" src="images/bu.png" onclick="b()" /></a>
			</div>
		</div>
	</div>
</body>
<script>
	// 获取元素  
	var pimg = document.getElementById('pimg');
	var cimg = document.querySelector('#cimg');

	var imgs = ['images/jiandao.png', 'images/shitou.png', 'images/bu.png'];
	var m, num; // m 用户出的  0 代表 剪刀  1 石头  2 布 
	// num 电脑出的  0 剪刀 1 石头  2 布 
	var winner = [
		[0, -1, 1],
		[1, 0, -1],
		[-1, 1, 0]
	];
	//声明三个计数器 
	var win = 0;
	var fail = 0;
	var fair = 0;
	// [0][2] [1][0] [2][1] 用户出的和电脑出的  结果为1 说明用户赢了
	// winner[0][2] = 1 
	// winner[1][0] = 1 
	// winner[2][1] = 1 

	// winner[0][1] = -1
	// winner[1][2] = -1
	// winner[2][0] = -1

	// winner[0][0] = 0 
	// winner[1][1] = 0 
	// winner[2][2] = 0 
	// 修改src 路径  
	// 用户点击 剪刀的时候 做的事情
	// 电脑也要生成随机数
	function j() {
		m = 0;
		pimg.src = imgs[0];
		num = Math.floor(Math.random() * 3);
		cimg.src = imgs[num];
		setTimeout(res1, 100);
	}
	// 用户点击 石头的时候 做的事情
	// 电脑也要生成随机数
	function s() {
		m = 1;
		pimg.src = imgs[1];
		num = Math.floor(Math.random() * 3);
		cimg.src = imgs[num];
		setTimeout(res1, 100);
	}
	// 用户点击 布的时候 做的事情
	// 电脑也要生成随机数  
	function b() {
		m = 2;
		pimg.src = imgs[2];
		num = Math.floor(Math.random() * 3);
		cimg.src = imgs[num];
		setTimeout(res1, 100); //
	}



	// 得到数值结果进行判断  赢 输  平 

	// 用户 出 剪刀  电脑出 布  用户出 石头  电脑出 剪刀 用户出 布 电脑出 石头
	// 用户的出的 等于 电脑出的  平局 
	// 用户出除了以上情况就是输 


	// 0 剪刀    1 石头   2 布  
	// 用户 0  2 用户 1  0   2  1   赢 
	// 用户 0  1  用户 1  2   2 0   输 
	// 用户 0  0  用户 1  1    2 2   平 


	// 0 平局    1 赢     -1 输 

	// 总得结果需要计时器  
	var count = 0

	function res() {
		count++;
		document.getElementById('sum').innerHTML = "总的局数" + count + '局'
		switch (winner[m][num]) {
			case 1:
				win++;
				document.getElementById('success').innerHTML = "赢的局数" + win + '局';
				break;
			case 0:
				fair++;
				document.getElementById('eval').innerHTML = "平的局数" + fair + '局';
				break;
			case -1:
				fail++
				document.getElementById('fail').innerHTML = "输的局数" + fail + '局'
				break;
		}

	}


	function res1() {
		count++;
		document.getElementById('sum').innerHTML = "总的局数" + count + '局'
		if ((m == 0 && num == 2) || (m == 1 && num == 0) || (m == 2 && num == 1)) {
			win++;
			document.getElementById('success').innerHTML = "赢的局数" + win + '局';
		} else if (m == num) {
			fair++;
			document.getElementById('eval').innerHTML = "平的局数" + fair + '局';
		} else {
			fail++
			document.getElementById('fail').innerHTML = "输的局数" + fail + '局'

		}
	}
</script>

</html>
附图片