当前位置：首页 > news >正文

本人做静态网站开发南昌seo优化公司

news 2026/4/6 13:18:08

本人做静态网站开发,南昌seo优化公司,营口建设街道政府网站,广东工程承包网站🙈作者简介：练习时长两年半的Java up主 🙉个人主页：老茶icon 🙊 ps:点赞👍是免费的，却可以让写博客的作者开兴好久好久😎 📚系列专栏：Java全栈，计…

🙈作者简介：练习时长两年半的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>