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

js打地鼠

news 2026/3/20 6:37: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

Phi-3 Forest Laboratory 网络编程应用：模拟智能TCP/IP协议栈调试助手

Phi-3 Forest Laboratory 网络编程应用&#xff1a;模拟智能TCP/IP协议栈调试助手 你是不是也遇到过这种情况&#xff1f;面对Wireshark抓下来的一大堆数据包&#xff0c;密密麻麻的十六进制和协议字段&#xff0c;看得人眼花缭乱。想分析一个网络问题&#xff0c;得一边翻RFC…...

编程新知 2026/3/20 6:14:42

云上养龙虾新姿势：蓝队云服务器快速部署OpenClaw指南

在数字化浪潮席卷的今天&#xff0c;连养龙虾这样传统而充满趣味的活动&#xff0c;也能与云计算技术碰撞出别样的火花。OpenClaw&#xff0c;作为一款专为模拟龙虾养殖环境设计的软件&#xff0c;不仅能够帮助养殖者科学规划、高效管理&#xff0c;还能通过数据分析提升养殖效…...

编程新知 2026/3/20 5:50:30

【亲测】笔记本token免费，window下本地养个龙虾（Openclaw+Ollama）看看?

目录环境检查查看显卡状态检查conda环境跑通OllamaOllama自带API下载模型模型“复读机”问题安装openclaw配置环境浅浅体验一下本人笔记本显卡是GTX1070 8G显存(算是老古董显卡了)&#xff0c;cpu是i7-8750H 6核12线程&#xff0c;内存32G&#xff0c;在window下&#xff0c;尝…...

编程新知 2026/3/20 4:43:56

ABAP Unit Test 实战：如何高效编写与执行单元测试

1. ABAP单元测试的核心价值 第一次接触ABAP Unit Test是在处理一个采购订单校验的增强项目时。当时程序里有个2000行的函数模块&#xff0c;我需要修改其中关于税率计算的5行代码。为了验证这5行改动&#xff0c;我不得不手工创建十几张测试单据&#xff0c;每次修改后都要重复…...

编程新知 2026/3/20 3:27:19

SAM 3优化建议：如何提升视频分割速度与精度？

SAM 3优化建议&#xff1a;如何提升视频分割速度与精度&#xff1f; 1. 引言 1.1 视频分割的挑战与机遇 视频分割&#xff0c;简单来说&#xff0c;就是让计算机看懂视频里“谁是谁”&#xff0c;并且能一直跟着它。想象一下&#xff0c;你想在一段足球比赛的视频里&#xf…...

编程新知 2026/3/20 2:31:08

STM32硬件JPEG编码实战：从DMA到阻塞模式的性能与实现对比

1. 为什么需要硬件JPEG编码&#xff1f; 在嵌入式图像处理中&#xff0c;我们经常遇到一个头疼的问题&#xff1a;一张普通的RGB565格式320x240图片&#xff0c;在STM32F4上用软件编码需要近200ms&#xff0c;而同样尺寸在STM32H7上用硬件编码仅需20ms。这个10倍的性能差距&…...

编程新知 2026/3/20 0:54:36

C#与Sql Server 2008 R2图书信息管理系统源码解析：基于VS2015与.NET...

C#与Sql server 2008 R2图书信息管理系统&#xff0c;源码带注释&#xff0c;VS2015版本&#xff0c;.net4.5框架最近在整理硬盘翻出个古董项目——基于C#和SQL Server 2008 R2的图书管理系统。虽然技术栈有点年头&#xff0c;但架构设计现在看依然有参考价值。随手打开尘封的V…...

编程新知 2026/3/20 0:02:08

效率提升：Anything to RealCharacters 2.5D转真人引擎批量处理技巧

效率提升&#xff1a;Anything to RealCharacters 2.5D转真人引擎批量处理技巧 1. 引言&#xff1a;批量处理的艺术与科学 在数字内容创作领域&#xff0c;时间就是金钱。当我们需要将大量2.5D角色、动漫立绘或卡通形象转换为逼真的真人照片时&#xff0c;如何高效完成这项任…...

编程新知 2026/3/19 23:52:04

解决罗技鼠标宏压枪不准的5个实战方案 - 绝地求生外设优化完全指南

解决罗技鼠标宏压枪不准的5个实战方案 - 绝地求生外设优化完全指南 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 在竞技射击游戏中&#xff0c…...

编程新知 2026/3/19 23:23:48

跨越网络壁垒：实战Autoware Docker镜像的拉取与部署

1. 为什么需要特殊方法拉取Autoware Docker镜像 第一次尝试在本地环境部署Autoware时&#xff0c;我遇到了几乎所有开发者都会面临的经典问题&#xff1a;docker pull命令卡在"拉取镜像层"阶段&#xff0c;进度条像蜗牛爬行一样缓慢&#xff0c;最后以超时错误告终。…...

编程新知 2026/3/19 23:07:45