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

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

news 2026/2/10 2:04:47

🙈作者简介：练习时长两年半的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.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全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术

相关文章：

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

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;老茶icon &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开兴好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;计…...

编程日记 2023/4/14 11:18:52

typora和C51开发环境

经过查阅&#xff0c;可以用wiz和typora联动的方式记录笔记&#xff0c;这样一个文件夹里既可以用typora也可以用内置编辑器&#xff08;一种富文本编辑器&#xff09;&#xff0c;注意同一个文件不能用不同的编辑器&#xff0c;否则会错乱。以下&#xff0c;我列举了用typora的…...

编程日记 2023/4/14 11:13:51

linux echo彩色打印

定义了三个颜色 把打印的内容加载头和尾巴之间即可 pt_head_green"\033[32;1m" pt_head_red"\033[31;1m" pt_head_yellow"\033[33;1m" pt_tail"\033[0m"echo "$pt_head_yellow | make clean |$pt_tail"...

编程日记 2023/4/14 11:08:49

2023年4月PMP®项目管理专业人士认证招生简章

PMP认证是Project Management Institute在全球范围内推出的针对评价个人项目管理知识能力的资格认证体系。国内众多企业已把PMP认证定为项目经理人必须取得的重要资质。 【PMP认证收益】 1、能力的提升&#xff08;领导力&#xff0c;执行力&#xff0c;创新能力&#xff0c;竞…...

编程日记 2023/4/14 11:03:46

Java每日一练(20230410)

目录 1. 二叉树的锯齿形层序遍历 &#x1f31f;&#x1f31f; 2. 从中序与后序遍历序列构造二叉树 &#x1f31f;&#x1f31f; 3. 平衡二叉树 &#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专…...

编程日记 2023/4/14 10:58:45

主动配电网故障恢复的重构与孤岛划分统一模型研究【升级版本】（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/4/14 10:53:44

TS2023年面试题汇总~~~~持续更新中！！！！

文章目录一、typescript 的数据类型有哪些二、TypeScript 中枚举类型的理解三、TypeScript 中接口的理解四&#xff0c; TypeScript 中类的理解五&#xff0c;TypeScript 中泛型的理解&#xff1f;六&#xff0c;TypeScript 中高级类型的理解&#xff1f;六&#xff0c;TypeScr…...

编程日记 2023/4/14 10:48:43

CSS模块的书写以及删除线的作用和来历什么是删除线

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>/*关羽这一行代码变为绿色*/#gy_li{color: green}/*张飞,苹果这一行代码变为黄色*/#zf_li,#pg_ul{color: yellow}/*i…...

编程日记 2023/4/14 10:43:42

Libhevc介绍

随着高清电视的普及和4K、8K超高清电视的出现&#xff0c;视频编解码技术也得到了广泛应用和发展。H.265/HEVC (High Efficiency Video Coding) 编解码标准作为一种新一代的视频编码技术&#xff0c;具有更高的压缩率和更好的画面质量&#xff0c;已经被成为未来视频编码的趋势…...

编程日记 2023/5/29 22:26:16

基于Tensorflow的最基本GAN网络模型

import tensorflow as tf from tensorflow import keras from tensorflow.keras import layers import matplotlib.pyplot as plt %matplotlib inline import numpy as np import glob import os #&#xff08;1&#xff09;创建输入管道 # 导入原始数据 (train_images, train…...

编程日记 2023/4/14 10:33:40

数据质量管理概述

1、数据质量的概念 指的是在组织业务&#xff0c;管理要求下&#xff0c;符合数据使用者满足业务&#xff0c;管理需求的评价方式 2、数据质量管理的概念 3、4种常见低质量数据情况 1&#xff09;重要数据缺失 有些信息暂时无法获取或者获取代价太大信息在采集输入中遗漏属…...

编程日记 2023/4/14 10:28:39

C++ const、volatile和mutable关键字详解

对于cv&#xff08;const 与 volatile&#xff09;类型限定符和关键字mutable在《cppreference》中的定义为&#xff1a; cv可出现于任何类型说明符中&#xff0c;以指定被声明对象或被命名类型的常量性&#xff08;constness&#xff09;或易变性&#xff08;volatility&#…...

编程日记 2023/5/31 12:14:45

MySQL实验四：数据更新

MySQL实验四&#xff1a;数据更新 目录MySQL实验四&#xff1a;数据更新导读表结构sql建表语句模型图1、 SQL更新&#xff1a;将所有学生的年龄增加1岁代码2、SQL更新&#xff1a;修改“高等数学”课程倒数三名成绩&#xff0c;在原来分数上减5分代码解析3、SQl更新&#xff1a…...

编程日记 2023/4/14 10:18:35

商汤科技推出“日日新SenseNova”，大模型体系赋能人工智能新未来

2023年4月10日&#xff0c;商汤科技SenseTime技术交流日活动在上海举行&#xff0c;分享了以“大模型大算力”推进AGI&#xff08;通用人工智能&#xff09;发展的战略布局&#xff0c;并公布了商汤在该战略下的“日日新SenseNova”大模型体系。 公开信息显示&#xff0c;商汤科…...

编程日记 2023/4/14 10:08:33

【中创AI】斯坦福人工智能年度报告：AI论文发表量中国世界第一！

斯坦福以人为本人工智能研究所 (HAI) 发布了最新一期的 2023 AI 指数 (2023 AI Index) 报告&#xff0c;探讨了过去一年机器学习的发展。 &#xff08;斯坦福HAI于2019年初成立&#xff0c;致力于研究新的AI方法&#xff0c;并研究该技术对社会的影响。其每年发布一份AI指数报…...

编程日记 2023/5/30 7:21:31

Java基础（五）面向对象编程（基础）

学习面向对象内容的三条主线 Java类及类的成员&#xff1a;&#xff08;重点&#xff09;属性、方法、构造器&#xff1b;&#xff08;熟悉&#xff09;代码块、内部类面向对象的特征&#xff1a;封装、继承、多态、&#xff08;抽象&#xff09;其他关键字的使用&#xff1a;…...

编程日记 2023/5/29 22:27:48

寻找CSDN平行世界的另一个你

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 寻找CSDN平行世界的另一个你摘要前言列表测试目的摘要 本文作了一个测试&#xff0c;看看在 CSDN 的博文中&#xff0c;艾特&#xff08;&#xff09;某个好友&#xff0c;TA是否能够…...

编程日记 2023/6/1 6:25:15

ChatGPT的发展对客户支持能提供什么帮助？

多数组织认为客户服务是一种开销&#xff0c;实际上还可以将客户服务看成是一种机会。它可以让你在销售后继续推动客户的价值。成功的企业深知&#xff0c;客户服务不仅可以留住客户&#xff0c;还可以增加企业收入。客户服务是被低估的手段&#xff0c;它可以通过推荐、见证和…...

编程日记 2023/4/14 9:48:25

数据安全评估体系建设

数据安全评估是指对重要数据、个人信息等数据资产的价值与权益、合规性、威胁、脆弱性、防护等进行分析和判断&#xff0c;以评估数据安全事件发生的概率和可能造成的损失&#xff0c;并采取相应的措施和建议。 数据安全评估的重要性和背景 1.国家法律法规下的合规需要 目前数…...

编程日记 2023/4/14 9:43:23

论文阅读 - ANEMONE: Graph Anomaly Detection with Multi-Scale Contrastive Learning

目录 摘要 1 简介 2 问题陈述 3 PROPOSED ANEMONE FRAMEWORK 3.1 多尺度对比学习模型 3.1.1 增强的自我网络生成 3.1.2 补丁级对比网络 3.1.3 上下文级对比网络 3.1.4 联合训练 3.2 统计异常估计器 4 EXPERIMENTS 4.1 Experimental Setup 4.1.1 Datasets 4.1.2 …...

编程日记 2023/4/14 9:38:22

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2026/2/8 20:41:58

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/12/6 22:50:48

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2026/1/31 17:15:25

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2026/1/31 10:55:22

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2026/2/5 6:28:09

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/2/6 22:20:51