JavaScript剪刀石头布

2021-09-26 15:02:17 阅读：250 来源： 互联网

标签：++ JavaScript innerHTML 石头 result images else 剪刀 choose

<!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,innerHTML,石头,result,images,else,剪刀,choose
来源： https://blog.csdn.net/m0_51700376/article/details/120489082

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript剪刀石头布