JavaScript剪刀石头布

2021/9/26 17:12:24

编程Tag： javascript innerHTML else result ++ images choose 剪刀石头

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background: gray;
				text-align: center;
				color: aqua;
			}
			#choose {
				margin: 50px auto;
				height: 200px;
				width: 1200px;
			}
			#choose img {
				cursor: pointer;
				margin-right: 95px;
				border: #000000 1px solid;
			}
			#choose img:last-child {
				margin-right: 0;
			}
			#result {/*结果的文字显示*/
				font-size: 50px;
			}
			#win-count {
				font-size: 30px;
				color: blue;
			}
			#lost-count{
				font-size: 30px;
				color: green;
			}
			#draw-count{
				font-size: 30px;
				color: pink;
			}
			#times{
				color:red;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<h1>剪刀石头布游戏</h1>
		<h2>你获胜了<span id="win-count"></span>次!!!</h2>
		<h2>你输了<span id="lost-count"></span>次!!!</h2>
		<h2>平局<span id="draw-count"></span>次!!!</h2>
		<h2>总场数<span id="times"></span>次</h2>
		<div id="choose">
			<img src="images/jiandao.jpg" alt="剪刀" id="jiandao" width="100" height="100">
			<img src="images/shitou.jpg" alt="石头" id="shitou" width="100" height="100">
			<img src="images/bu.jpg" alt="布" id="bu" width="100" height="100">
		</div>
		<img id="yourchoose" alt="" width="100" height="100">
		<span id="result"></span>
		<img id="computer" alt="" width="100" height="100">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>		
<script>
			function $(id) {
				return document.getElementById(id);
			}
			var winCount = 0;//定义赢的次数
			var times = 1;//定义初始总次数
			var lostCount = 0;//定义输的次数
			var drawCount = 0;//定义平局的次数
			function Game(choose) {
				choose.addEventListener('click', function() {
					if (choose == $('jiandao')) {
						$('yourchoose').src = "images/jiandao.jpg";
					} else if (choose == $('shitou')) {
						$('yourchoose').src = "images/shitou.jpg";
					} else {
						$('yourchoose').src = "images/bu.jpg";
					}
					var computerResult = Math.random();
					//random() 方法可返回介于 0 ~ 1 之间的一个随机数。
					if (computerResult < 0.34) {
						$('computer').src = "images/jiandao.jpg";
						if (choose == $('jiandao')) {
							$('result').innerHTML = "平手";
							drawCount++;
						} else if (choose == $('shitou')) {
							$('result').innerHTML = "你赢了";
							winCount++;
						} else {
							$('result').innerHTML = "电脑获胜!!!";
							lostCount++;
						}
					} else if (computerResult < 0.67) {
						$('computer').src = "images/shitou.jpg";
						if (choose == $('shitou')) {
							$('result').innerHTML = "平手";
							drawCount++;
						} else if (choose == $('bu')) {
							$('result').innerHTML = "你赢了";
							winCount++;
						} else {
							$('result').innerHTML = "电脑获胜!!!";
							lostCount++;
						}
					} else {
						$('computer').src = "images/bu.jpg";
						if (choose == $('bu')) {
							$('result').innerHTML = "平手";
							drawCount++;
						} else if (choose == $('jiandao')) {
							$('result').innerHTML = "你赢了";
							winCount++;
						} else {
							$('result').innerHTML = "电脑获胜!!!";
							lostCount++;
						}
					}
					$('win-count').innerHTML = winCount;
					$('lost-count').innerHTML = lostCount;
					$('draw-count').innerHTML = drawCount;
					$('times').innerHTML = times++;
				});
			}
			Game($('jiandao'));
			Game($('shitou'));
			Game($('bu'));
</script>
</body>
</html>

效果如图：
在这里插入图片描述

这篇关于JavaScript剪刀石头布的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript剪刀石头布

相关编程文章