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

js打地鼠

news 2026/2/2 18:51:22

文章目录

  • 1实现效果
  • 2代码实现

1实现效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

游戏难度：简单，一般，困难，噩梦（控制setInterval的time参数）
按钮功能：结束（可以通过修改gameScore的值来修改判定结束的分数），开始，重开
游戏得分

2代码实现

注意路径：
在这里插入图片描述
我的img和html文件是并列关系，引入的相对路径

url(./img/xxx.jpg)

资源图片：

mouse.jpg
在这里插入图片描述

bg.jpg
在这里插入图片描述

hit.jpg
在这里插入图片描述

hummer.png
在这里插入图片描述

注意：注意计时器，何时打开了，何时需要关闭它，创建的timeId从1开始，之前的不关闭，在创建新的时，timeId是2 ，依次类推，不及时关闭定时器，可能会造成逻辑混乱。
比如：在本例中，在游戏执行过程中，直接修改下拉框后，不执行clearInterval(timeId)，而是直接调用startGame(),就会创建另一个定时器，此时如果达到了判输的条件，执行gameOver()，虽然执行了clearInterval(timeId)，但是关闭的定时器是新开的那个，此时的timeId值是2，原来的1还存活着。但是这个结束条件依然成立（score<=gameScore）,在第一个定时器中每次执行到gameOver()都会被触发，这就是bug，所以要在改变下拉框时，要及时关闭第一个定时器（timeId=1的）。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>打地鼠</title><style>* {margin: 0;padding: 0;}body {background-color: lightblue;}.div1 {text-align: center;background-color: lightgreen;width: 100%;line-height: 50px;}.div2 {margin: 0 auto;width: 600px;height: 610px;}td {width: 200px;height: 200px;border-radius: 100px;background-image: url(./img/bg.jpg);background-size: 100% 100%;background-repeat: no-repeat;border: 1px solid #000;cursor: url("./img/hummer.png"), auto;}select{text-align: center;width: 70px;height: 30px;font-family: 'Courier New', Courier, monospace;border-radius: 5px;}button{width: 100px;height: 30px;font-family: 'Courier New', Courier, monospace;border-radius: 5px;background-color: lightgray;margin-right: 30px;margin-left: 30px;}button:hover{background-color: orange;color: #fff;}span{color: red;width: 40px;height: 30px;padding-left: 10px;font-size: 20px;font-family: 'Courier New', Courier, monospace;display: inline-block;box-sizing: border-box;}</style>
</head><body><audio src="./audio/bg.mp3" class="bgMusic"></audio><audio src="./audio/hit.wav" class="hitMusic"></audio><div class="div1">游戏难度：<select id="select"><option>简单</option><option>一般</option><option>困难</option><option>噩梦</option></select><button id="start">开始游戏</button>游戏得分：<span id="score">0</span></div><div class="div2"><table><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></div><script>//是否开始游戏let isPlay = false;let score = 0;// 是否捶打let flag = true;let lastIndex = 0;var timeId = 0;let Tid=0;// 捶了是否锤中let isRight=false;let isHit=false;// 定时器时间let time = 2000;let index = 0;let gameScore = -20;// 获取元素let select = document.querySelector("#select");let start = document.querySelector("#start");let scoreSpan = document.querySelector("#score");let tds = document.querySelectorAll("td");let bgMusic = document.querySelector(".bgMusic");let hitMusic = document.querySelector(".hitMusic");// 给开始按钮添加点击事件start.onclick = function () {isPlay = !isPlay;if (isPlay) {// 获取游戏难度let level = select.value;clearTimeout(Tid);score = 0;scoreSpan.innerHTML = score;tds[lastIndex].style.backgroundImage = 'url(./img/bg.jpg)';// 设置游戏难度bgMusic.play();startGame(level);start.innerHTML = "结束游戏";} else {// 结束游戏bgMusic.pause();clearInterval(timeId); // 清除定时器start.innerHTML = "开始游戏";}}// 给td添加点击事件tds.forEach((td, i) => {td.onclick = hit.bind(null, i);})// 给下拉框添加change事件select.onchange = function () {if (isPlay) {let level = select.value;flag = true;score = 0;scoreSpan.innerHTML = score;tds[lastIndex].style.backgroundImage = 'url(./img/bg.jpg)';// 清除之前开启的定时器，直接切换选项，之前开启的定时器还在运行，所以要关闭clearInterval(timeId); startGame(level);}}function startGame(level) {if (level == '简单') {time = 2000;} else if (level == '一般') {time = 1500;} else if (level == '困难') {time = 1000;} else {time = 800;}timeId = setInterval(function () {// 在还原之前，检查flag的值，为false,代表上一次没有落捶if (flag == false) {score -= 5;scoreSpan.innerHTML = score;}// 开始新的出现位置，锤击状态置为未锤击flag = false;isRight=false;isHit=false;gameOver(score);// 将上一次的改回原背景tds[lastIndex].style.backgroundImage = 'url(./img/bg.jpg)';// 随机获取一个索引if (isPlay) {index = Math.floor(Math.random() * tds.length);;}// 给当前的索引添加样式tds[index].style.backgroundImage = 'url(./img/mouse.jpg)';lastIndex = index;}, time);}// TODO: 游戏是否击中的判断逻辑需要完善function hit(i) {// 游戏开始时，锤击才有效if (isPlay) {hitMusic.play();// 锤击的td和随机产生的td索引一致，只第一次捶中有效（锤击地鼠出现位置）if (i == lastIndex&&!isRight) {isRight=true;score += 3;// 改变背景tds[i].style.backgroundImage = 'url(./img/hit.jpg)'} else if(!isHit){// 捶错地方,只第一次捶错有效score -= 5;gameOver(score);}scoreSpan.innerHTML = score;flag = true;isHit=true;}}// 游戏结束function gameOver(score) {if (score <= gameScore) {// 清楚当前的计时器idclearInterval(timeId);scoreSpan.innerHTML = score;isPlay = false;flag = true;start.innerHTML = "重新开始";Tid = setTimeout(() => {alert('游戏结束，得分：' + score);}, 300);}}</script>
</body></html>

相关文章：

js打地鼠

文章目录 1实现效果2代码实现 1实现效果 游戏难度&#xff1a;简单&#xff0c;一般&#xff0c;困难&#xff0c;噩梦&#xff08;控制setInterval的time参数&#xff09; 按钮功能&#xff1a;结束&#xff08;可以通过修改gameScore的值来修改判定结束的分数&#xff09;&am…...

编程日记 2024/1/27 5:23:22

计算机网络体系架构认知--网络协议栈

文章目录 一.计算机网络分层架构各协议层和计算机系统的联系从整体上理解计算机网络通信计算机网络通信的本质 二.Mac地址,IP地址和进程端口号三.局域网通信与跨局域网通信局域网通信跨局域网通信全球互联的通信脉络 四.网络编程概述 一.计算机网络分层架构 实现计算机长距离网…...

编程日记 2024/1/27 5:19:18

Ubuntu 22.04 安装tomcat

tomcat是常用的Java服务容器，这篇文章我们就来讲讲如何安装它。 更新软件包 首先是更新软件包，这是最常规的操作 sudo apt update 然后是开始安装，不多一会就可以安装好了 sudo apt install tomcat9 然后看一下状态 sudo systemctl status tomcat9 发现虽然启动了，但…...

编程日记 2024/1/27 5:18:18

记录：Ubuntu 18.04 X86 上通过CMake 指定编译器工具链交叉编译。

最好是通过 cmake 命令行来设置&#xff0c;要不然你只有在 CMakeFiles.txt 里面自己写判断语句了。 要用 cmake 交叉编译&#xff0c;必须设置连接器&#xff0c;要不然会使用当前系统的 ld&#xff0c;就是 /usr/bin/ld。 但是其它平台是不会ld上的&#xff0c;elf格式都不…...

编程日记 2024/1/27 5:12:13

requests，js逆向练习

自上而下排除jquery源码&#xff0c;点进去utils 发现第一次请求是getTime 再次运行此断点才是登录&#xff0c;这个时候密码已经被加密了 查看上级js页面&#xff0c;发现加密函数 进去看函数加密过程 得到结果RSA python代码 import base64 import jsonimport requests f…...

编程日记 2024/1/27 5:11:12

Chrome 插件调试

http://blog.haoji.me/chrome-plugin-develop.html#te-bie-zhu-yi-background-de-bao-cuo 手把手&#xff1a;Chrome浏览器开发系列(四)&#xff1a;调试我们开发的插件 - 掘金...

编程日记 2024/1/27 5:10:11

云轴科技ZStack成为交通运输业上云用云推进中心首批成员单位

近日&#xff0c;中国信息通信研究院、中国交通运输协会信息专业委员会联合发起成立“交通运输业上云用云推进中心”&#xff0c;上海云轴信息科技有限公司&#xff08;简称云轴科技ZStack&#xff09;凭借优秀的产品技术创新能力和在交通运输领域的实践经验成为首批成员单位并…...

编程日记 2024/1/27 5:08:06

代码随想录算法训练营31期day4,力扣24+19+02.07+142

24&#xff0c;动指针 class Solution { public:ListNode* swapPairs(ListNode* head) {//建立虚拟头结点auto dummynew ListNode(-1);dummy->nexthead;for(auto pdummy;p->next&&p->next->next;){auto ap->next;auto ba->next;p->nextb;a->n…...

编程日记 2024/1/27 5:07:06

eNSP学习——利用单臂路由实现VLAN间路由

目录 原理概述 实验内容 实验目的 实验步骤 实验拓扑 实验编址 配置步骤 创建VLAN并配置Access、Trunk接口 配置路由器子接口和IP地址 配置路由器子接口封装VLAN 测试结果 原理概述 在以太网中&#xff0c;通常会使用VLAN技术隔离二层广播域来减少广播的影响&#…...

编程日记 2024/1/27 5:03:01

ISO27001认证：企业与个人发展的必备之选

ISO27001认证&#xff0c;对于企业和个人来说&#xff0c;都具有极高的价值和重要性。作为国际权威的信息安全管理体系标准&#xff0c;它为企业提供了保障信息安全、防范风险和提升竞争力的有力工具。 &#x1f4bc;对企业的价值&#xff1a; ISO27001认证可以帮助企业满足国家…...

编程日记 2024/1/27 5:02:00

SpringBoot使用druid

SpringBoot使用druid 一、前言二、配置1、pom依赖2、配置文件yml3、配置类 一、前言 Java程序很大一部分要操作数据库&#xff0c;为了提高性能操作数据库的时候&#xff0c;又不得不使用数据库连接池。 Druid 是阿里巴巴开源平台上一个数据库连接池实现&#xff0c;结合了 C…...

编程日记 2024/1/27 4:58:58

TongWeb8交流常见问答集

问题1&#xff1a;今后用到你们TongWeb产品该联系谁&#xff1f; 答复&#xff1a; 1. 商务问题&#xff0c;如&#xff1a;报价、license授权、合同等请联系销售。 2. TongWeb技术问题&#xff0c;未签项目联系售前&#xff0c;已签项目联系售后。有指定项目经理的项目&…...

编程日记 2024/1/27 4:56:55

GBASE南大通用分享-mysql中的load data infile用法

GBASE南大通用分享 mysql中的load data infile用法 LOAD DATA [LOW_PRIORITY] [LOCAL] INFILE file_name.txt [REPLACE | IGNORE] INTO TABLE tbl_name [FIELDS [TERMINATED BY \t] [OPTIONALLY] ENCLOSED BY ] [ESCAPED BY \\ ]] [LINES TERMINATED BY \n] [IGNORE number L…...

编程日记 2024/1/27 4:55:54

Ubuntu18编译jdk8源码

环境 系统 ubuntu18 Linux ubuntu 5.4.0-150-generic #167~18.04.1-Ubuntu SMP Wed May 24 00:51:42 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux jdk源码openjdk-8u41-src-b04-14_jan_2020.zip bootJdk jdk-8u391-linux-x64.tar.gz ps -e|grep ssh sudo apt-get install ssh…...

编程日记 2024/1/27 4:54:53

《开始使用PyQT》 第01章 PyQT入门 02 安装Python3和PyQT6

02 安装Python3和PyQT6 《开始使用PyQT》 第01章 PyQT入门 02 安装Python3和PyQT6 So that all readers are on the same page, let’s begin by installing or updating your version of Python. 为了让所有读者都能理解&#xff0c;让我们从安装或更新 Python 版本开始。 …...

编程日记 2024/1/27 4:53:52

Java集合-Map接口(key-value)

Map接口的特点&#xff1a;①KV键值对方式存储②Key键唯一&#xff0c;Value允许重复③无序。 Map有四个实现类&#xff1a;1.HashMap类2.LinkedHashMap类3.TreeMap类4.Hashtable类 1.HashMap类&#xff1a; 存储结构&#xff1a;哈希表 数组Node[ ] 链表&#xff08;红黑…...

编程日记 2024/1/27 4:52:51

【操作系统】实验九 写一个设备驱动程序

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的很重要&…...

编程日记 2024/1/27 4:51:49

基于密码技术的身份认证——基于对称密码体制的身份认证

一、符号说明&#xff1a; A→B&#xff1a;表示通信实体A向通信实体B发送消息&#xff1b; Ek(x)&#xff1a;表示用认证双方共享的密钥K对x进行加密&#xff1b; Text1&#xff0c;Text2&#xff0c;……&#xff0c;Text n属于可选项&#xff1b; ||&#xff1a;表示比特…...

编程日记 2024/1/27 4:46:44

算法36：单调栈结构、子数组最小乘积的最大值问题(力扣1586)----单调栈

单调栈&#xff1a;就是在栈中实现数据的单调性。即从栈底到栈顶&#xff0c;要么递增&#xff0c;要么递减。 那么&#xff0c;使用单调栈&#xff0c;可以解决什么问题呢&#xff1f; 给定一个可能含有重复值的数组arr&#xff0c;i位置的数一定存在如下两个信息 1&#x…...

编程日记 2024/1/27 4:43:41

django mysql in 有序返回

from django.db.models import * ordering f"FIELD(id, {,.join([str(_) for _ in ids])})" # 默认就按照算法返回的 id 排序p_data_result PeptidesDataResult.objects.using("polypeptide").filter(id__inids).values().extra(select{ordering: orderi…...

编程日记 2024/1/27 4:41:40

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2026/1/9 14:53:35

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2026/2/2 6:06:11

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2026/1/26 17:26:03

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/12/27 19:12:09

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2026/1/26 18:00:15

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

编程新知 2025/11/29 18:42:46

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2026/2/1 12:04:40

python可视化：俄乌战争时间线关键节点与深层原因

俄乌战争时间线可视化分析&#xff1a;关键节点与深层原因 俄乌战争是21世纪欧洲最具影响力的地缘政治冲突之一&#xff0c;自2022年2月爆发以来已持续超过3年。 本文将通过Python可视化工具&#xff0c;系统分析这场战争的时间线、关键节点及其背后的深层原因&#xff0c;全面…...

编程新知 2026/1/20 17:54:09

作为点的对象CenterNet论文阅读

摘要 检测器将图像中的物体表示为轴对齐的边界框。大多数成功的目标检测方法都会枚举几乎完整的潜在目标位置列表&#xff0c;并对每一个位置进行分类。这种做法既浪费又低效&#xff0c;并且需要额外的后处理。在本文中&#xff0c;我们采取了不同的方法。我们将物体建模为单…...

编程新知 2026/1/22 20:37:41