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()
代码如下
<!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.8sstartGame = 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全栈开发 |
| 数据结构与算法 |
| 计算机组成原理 |
| 操作系统 |
| 数据库系统 |
| 物联网控制原理与技术 |
