jQuery制作一个简单的打地鼠游戏(超详细讲解)

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：老茶icon
🙊 ps:点赞👍是免费的，却可以让写博客的作者开兴好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：Java

内容/作用：知识点/设计/实验/作业/练习

学习：jQuery制作一个简单的打地鼠游戏

前言

综合CSS+JS+jQuery知识，简单实现打地鼠小游戏，实现结果过如下：

打地鼠小游戏

原理

"打地鼠"游戏原理：

1.静态布局：n*n的div容器，默认无背景

2.随机显示：定义class，写上背景图的样式，所有的div开始随机，随机到的div拥有该class值，其余div移除该class值

3.点击消失同时计分：给所有div添加单击事件，判断单击的div是否拥有class值，如果有则移除，加分

4.控制游戏时长：开始后，使用setInterval()随机显示，使用setTimeout()在10s后移除setInterval()

代码如下

javascript"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			#main {
				width: 740px;
				height: 500px;
				margin: 100px auto 0;
				background-color: gainsboro;
			}

			#main>div {
				width: 100px;
				height: 100px;
				float: left;
				background-color: #fff;
				margin-left: 20px;
				margin-top: 20px;
			}

			button {
				border: none;
				display: block;
				background-color: #999;
				width: 150px;
				height: 40px;
				margin: 50px auto;
				color: #fff;
				font-size: 20px;
			}

			/* 用于显示背景图的样式 */
			.show {
				background-image: url("img/dishu.jpg");
				background-size: 100%;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<script>
				for (var i = 1; i <= 24; i++) {
					document.write("<div ></div>")
				}
			</script>
		</div>

		<button>开始游戏</button>
		<script src="js/jquery-3.6.4.min.js"></script>
		<script>
			// 间隔器
			var startGame;
			// 分数
			var score = 0;
			// 获取所有的div，这里的divList是Jquery对象
			var $divList = $("#main>div");

			// 开始游戏按钮
			$("button:eq(0)").click(() => {
				// 每次游戏重置分数
				score = 0;
				$("button:eq(0)").attr("disabled", "true");
				setTimeout(() => {
					alert("游戏结束，你的得分为【" + score + "】");
					clearInterval(startGame);
				}, 10000);

				// 每隔0.8s
				startGame = setInterval(() => {
					$divList.removeClass("show");
					var index = Math.floor(Math.random() * $divList.length);
					$("#main>div:eq(" + index + ")").addClass("show");
				}, 800);
			});

			// 所有div添加单击事件
			$("#main>div").click(function() {
				if ($(this).hasClass("show")) {
					$(this).removeClass("show");
					score++;
				}
			});
		</script>
	</body>
</html>