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

js打地鼠

news 2026/2/10 17:20:34

文章目录

  • 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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2026/2/8 4:37:24

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2026/2/7 6:10:30

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

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

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2026/1/30 15:16:32

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2026/2/1 13:41:09

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/2/9 1:38:05

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

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

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

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/2/8 10:51:42

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2026/2/6 7:30:33