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

js打地鼠

news 文章来源：https://blog.csdn.net/m0_58730471/article/details/135839920 2024/11/29 11:39:45

文章目录

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实现效果游戏难度：简单，一般，困难，噩梦（控制setInterval的time参数） 按钮功能：结束（可以通过修改gameScore的值来修改判定结束的分数）&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 命令行来设置，要不然你只有在 CMakeFiles.txt 里面自己写判断语句了。要用 cmake 交叉编译，必须设置连接器，要不然会使用当前系统的 ld，就是 /usr/bin/ld。但是其它平台是不会ld上的，elf格式都不…...

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

requests，js逆向练习

自上而下排除jquery源码，点进去utils 发现第一次请求是getTime 再次运行此断点才是登录，这个时候密码已经被加密了查看上级js页面，发现加密函数进去看函数加密过程得到结果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 手把手：Chrome浏览器开发系列(四)：调试我们开发的插件 - 掘金...

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

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

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

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

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

24，动指针 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 测试结果原理概述在以太网中，通常会使用VLAN技术隔离二层广播域来减少广播的影响&#…...

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

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

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

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

SpringBoot使用druid

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

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

TongWeb8交流常见问答集

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

编程日记 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. 为了让所有读者都能理解，让我们从安装或更新 Python 版本开始。 …...

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

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

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

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

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

🕺作者： 主页我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux 😘欢迎关注：👍点赞🙌收藏✍️留言 🏇码字不易，你的👍点赞🙌收藏❤️关注对我真的很重要&…...

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

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

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

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

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

单调栈：就是在栈中实现数据的单调性。即从栈底到栈顶，要么递增，要么递减。那么，使用单调栈，可以解决什么问题呢？ 给定一个可能含有重复值的数组arr，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

c++24.1.26嵌套if语句

嵌套if语句：if语句中的if语句实践：...

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

机器学习--基础概念（二）

1.分类算法分类算法是有监督学习的一个核心问题，他从数据中学习一个分类决策函数或分类模型，对新的输入进行预测，输出变量取有限个离散值。以下是一些常见的分类算法： 逻辑回归 (Logistic Regression): 用于二分类问题&#x…...

编程日记 2024/1/27 4:38:35

Ubuntu20.04 安装 ROS noetic + MAVROS

本文在 AlphaCatOvO【ROS】在 Ubuntu 20.04 安装 ROS 的详细教程基础上，根据实际安装经验，稍微进行补充。一、安装Ubuntu20.04 假设已经正确安装。二、安装 ROS noetic 2.1 换源执行 sudo apt update sudo mv /etc/apt/sources.list /etc/apt/…...

编程日记 2024/1/27 4:35:32

【数学笔记】一元n次不等式，分式不等式，绝对值不等式

不等式基本性质一元n次不等式一元二次不等式一元高次不等式分式不等式绝对值不等式基本性质性质 a > b ⇔ b < a a>b\Leftrightarrow b<a a>b⇔b<a a > b , b > c ⇒ a > c a>b,b>c\Rightarrow a>c a>b,b>c⇒a>c a > b ,…...

编程日记 2024/1/27 4:33:31

转载-android性能优化

android性能优化 Reason: Broadcast of Intent { actandroid.intent.action.TIME_TICK ActivityManager: ANR in com.***.*** PID: 16227 Reason: Broadcast of Intent { actandroid.intent.action.TIME_TICK flg0x50000014 (has extras) }有那么一段时间我被这个ANR折磨到每…...

编程日记 2024/1/27 4:32:30

笔记 | Clickhouse命令行查询

在 ClickHouse 中，可以使用命令行客户端执行查询。默认情况下，ClickHouse 的命令行客户端称为 clickhouse-client。下面是一些基本的步骤和示例，用于使用 clickhouse-client 进行查询。首先，需要确保已经安装了 ClickHouse 服务…...

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

Dockerfile-xxxx

1、Dockerfile-server FROM openjdk:8-jdk-alpine WORKDIR /app COPY . . CMD java -Xms1536M -Xmx1536M -XX:UseG1GC -jar -Dlog4j2.formatMsgNoLookupstrue -Dloader.pathresources,lib -Duser.timezoneGMT-05 /app/server-main-1.0.0.jar 2、Dockerfile-bgd #FROM openjdk…...

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

文章目录

1实现效果

2代码实现

相关文章：