🙈作者简介：练习时长两年半的Java up主
🙉个人主页：老茶icon
🙊 ps:点赞👍是免费的，却可以让写博客的作者开兴好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连
目录
- 课程名：Java
- 内容/作用：知识点/设计/实验/作业/练习
- 学习：jQuery制作一个简单的打地鼠游戏
- 前言
- 原理
- 代码如下
- 总结
课程名：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()
代码如下
<!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>
总结
| 往期专栏 |
|---|
| Java全栈开发 |
| 数据结构与算法 |
| 计算机组成原理 |
| 操作系统 |
| 数据库系统 |
| 物联网控制原理与技术 |
