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

js打地鼠

news 2026/3/31 21:17:21

文章目录

  • 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

基于Vue的川汇水产养殖管理系统[vue]-计算机毕业设计源码+LW文档

摘要&#xff1a;随着水产养殖业的快速发展&#xff0c;传统的管理方式已难以满足现代化水产养殖的需求。本文介绍了一款基于Vue框架开发的川汇水产养殖管理系统&#xff0c;该系统旨在提高水产养殖管理的效率和精准度。系统涵盖了系统用户管理、水质管理、药品管理、设备管理、…...

编程新知 2026/3/31 21:02:41

新手入门：用快马生成第一个交易平台风格的前端页面

今天想和大家分享一个特别适合前端新手的练手项目——用InsCode(快马)平台快速搭建一个简易的交易平台前端页面。作为一个刚接触金融科技开发的小白&#xff0c;我发现这种模拟真实业务场景的项目特别能激发学习兴趣。 项目目标拆解 这个模拟交易账户页面需要实现几个核心功能模…...

编程新知 2026/3/31 20:56:33

金蝶K3生产任务单状态查询SQL全解析：从计划到结案

1. 金蝶K3生产任务单状态查询SQL入门指南 第一次接触金蝶K3的生产任务单查询时&#xff0c;我也被那些复杂的SQL语句搞得头晕眼花。后来才发现&#xff0c;只要理解了系统设计逻辑&#xff0c;这些查询其实就像查快递单号一样简单。生产任务单在系统中会经历计划、确认、下达、…...

编程新知 2026/3/31 19:22:56

Android Studio 高版本兼容低版本项目配置

AndroidStudio开发工具高版本兼容低版本项目配置&#xff1a;1、 JDK 配置&#xff1a;gradle.properties 文件中指定jdk 版本&#xff1a;org.gradle.java.homeD\:\\ProgramFiles\\JDK\\jdk-11.0.262 配置Gradle 编译版本&#xff1a;3. 显示所有Gradle task 列表设置完成后&a…...

编程新知 2026/3/31 19:02:26

如何在5分钟内开始使用Ivy Wallet：新手入门教程

如何在5分钟内开始使用Ivy Wallet&#xff1a;新手入门教程 【免费下载链接】ivy-wallet Ivy Wallet is an open-source money manager app for android that you can either build or download from Google Play. 项目地址: https://gitcode.com/gh_mirrors/iv/ivy-wallet …...

编程新知 2026/3/31 17:49:33

AO3镜像站使用指南：5分钟轻松访问全球同人创作宝库

AO3镜像站使用指南&#xff1a;5分钟轻松访问全球同人创作宝库 【免费下载链接】AO3-Mirror-Site 项目地址: https://gitcode.com/gh_mirrors/ao/AO3-Mirror-Site 还在为无法访问Archive of Our Own&#xff08;AO3&#xff09;而烦恼吗&#xff1f;AO3镜像站项目为你提…...

编程新知 2026/3/31 17:33:24

避坑指南：用docker-compose部署Python项目时最容易忽略的5个配置细节（内网特别版）

避坑指南&#xff1a;用docker-compose部署Python项目时最容易忽略的5个配置细节&#xff08;内网特别版&#xff09; 在企业级开发中&#xff0c;内网环境下的Docker部署往往比公网场景复杂数倍。我曾亲眼见过一个团队因为时区配置错误导致日志时间全部错乱&#xff0c;排查了…...

编程新知 2026/3/31 17:25:10

M2LOrder模型在STM32项目中的潜在应用：边缘设备情绪反馈

M2LOrder模型在STM32项目中的潜在应用&#xff1a;边缘设备情绪反馈 最近在捣鼓一个基于STM32的智能硬件项目&#xff0c;想给它加点“人情味”。比如&#xff0c;当用户对它说话时&#xff0c;它能感知到用户的情绪是开心还是沮丧&#xff0c;并给出更贴切的反馈。这听起来很…...

编程新知 2026/3/31 16:40:21

GD32F407定时器实战：1ms中断精准控制LED闪烁（附源码与调试技巧）

GD32F407定时器实战&#xff1a;1ms中断精准控制LED闪烁&#xff08;附源码与调试技巧&#xff09; 1. 嵌入式定时器的核心价值与应用场景 在嵌入式系统开发中&#xff0c;定时器如同系统的心跳&#xff0c;为各类周期性任务提供精准的时间基准。以智能家居中的温控系统为例&…...

编程新知 2026/3/31 16:32:17

Vue2集成海康摄像头RTSP流：基于FFmpeg转码与WebSocket实时传输方案

1. 海康摄像头RTSP流播放的技术挑战 海康威视作为国内主流监控设备厂商&#xff0c;其摄像头输出的RTSP流在Web端直接播放存在天然技术屏障。浏览器原生不支持RTSP协议&#xff0c;传统方案需要依赖浏览器插件或转码服务。我在实际项目中发现&#xff0c;直接使用VLC测试RTSP流…...

编程新知 2026/3/31 16:09:46