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

JS之打地鼠案例

news 2026/2/7 23:46:46

需要素材的同学可以私信我
效果图：

请添加图片描述

上代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 320px;height: 480px;background: url("img/game_bg.jpg") no-repeat;margin: 100px auto;}.score {position: absolute;color: white;font-size: 20px;top: 2.2%;left: 18%;}.time {position: absolute;background: url("img/progress.png");top: 66px;left: 62px;width: 180px;height: 16px;}.stop1 {width: 50px;height: 50px;background: url("img/stop.png") no-repeat center;position: absolute;top: 100px;left: 10px;}.start,.reset {width: 100px;height: 100px;background-color: pink;opacity: 0.4;border-radius: 50px;text-align: center;position: absolute;top: 130px;left: 0;bottom: 0;right: 0;margin: auto;font-size: 20px;cursor: pointer;}.gameOver {position: absolute;top: 0;text-align: center;color: white;font-size: 20px;width: 100%;height: 480px;line-height: 480px;background-color: black;opacity: 0.3;}.gameOver span {color: red;font-size: 25px;}.gameOver,.reset,.stop1 {display: none;}.box img {position: absolute;}</style>
</head><body><!-- 大盒子 --><div class="box"><!-- 得分 --><div class="score">0</div><!-- 时间流逝条 --><div class="time"></div><!-- 暂停按钮 --><div class="stop1"></div><!-- 开始 --><div class="start"><span style="z-index: 1;position: relative;left: 0px;top: 35px;color: red;">点击开始</span></div><!-- 游戏结束 --><div class="gameOver">游戏结束最终得分:<span>0</span></div><!-- 重新开始 --><div class="reset"><span style="z-index: 1;position: relative;left: 0px;top: 35px;color: red;">重新开始</span></div><!-- <img src="img/h5.png" alt=""> --></div>
</body>
<script>// 页面初始化window.onload = function () {// 获取大盒子var box = document.querySelector(".box")// 获取分数var score = document.querySelector(".score")// 获取进度条var timeBox = document.querySelector(".time")// 获取暂停按钮var stopBtn = document.querySelector(".stop1")// 获取开始按钮var startBtn = document.querySelector(".start")// 获取重新开始按钮var resetBox = document.querySelector(".reset")// 获取gameovervar gameOverbox = document.querySelector(".gameOver")// 得分var s = 0// 计时器var timer// 游戏状态,t代表开始,f代表暂停var state = true// 定义9个地洞的坐标值wolf_position = [{// 最上面的洞top: "115px",left: "95px"},{// 第二排第一个top: "160px",left: "16px"},{// 第二排第二个top: "143px",left: "185px"},{// 第二列第二个top: "194px",left: "101px"},{// 第三排第一个top: "220px",left: "14px"},{// 第四排第一个top: "293px",left: "28px"},{// 第三排第三个top: "212px",left: "197px"},{// 第二列第三个top: "274px",left: "117px"},{// 第四排第三个top: "296px",left: "205px"}]// 进度条初始宽度var timeWidth = timeBox.offsetWidth// console.log(timeWidth);// 点击开始按钮的时候startBtn.onclick = function () {// 隐藏开始按钮startBtn.style.display = "none"// 暂停按钮显示stopBtn.style.display = "block"// 进度条开始计时progressStart()// 游戏开始出现狼showWolf()// 游戏开始出现addWolf()}// 进度条计时function progressStart() {timer = setInterval(function () {timeBox.style.width = timeWidth + "px"timeWidth--if (timeWidth <= 0) {// 小于180时结束游戏clearInterval(timer)// alert("游戏结束")// 调用游戏结束gameOver()}}, 100)}// 游戏结束function gameOver() {// 重新开始按钮出现resetBox.style.display = "block"// 游戏结束标语出现gameOverbox.style.display = "block"// 游戏结束狼停止出现clearInterval(wolfTimer)gameOverbox.innerHTML = "游戏结束最终得分:" + sresetBtn()}// 暂停游戏stopBtn.onclick = function () {if (state) {// 清除定时器clearInterval(timer)// 停止时暂停生产狼clearInterval(wolfTimer)// 换成开始按钮this.style.backgroundImage = "url(img/start.png)"// 变成falsestate = false} else {// 启用定时器,调用progressStart()// 开始时显示狼showWolf()this.style.backgroundImage = "url(img/stop.png)"state = true}}// 灰太狼// 判断是否重复var nub = -1// 灰太狼轮播var wolfLuntimer// 狼下降var downWolftimervar wolfDowntimer// 狼的定时器var wolfTimerfunction addWolf() {// 创建节点var wolf = document.createElement("img")// 随机数0-8var index = Math.floor(Math.random() * 9)// 如果上一个重复重新赋值while (index == nub) {index = Math.floor(Math.random() * 9)}nub = indexconsole.log(index);// 坑位console.log(wolf_position[index]);// 赋值wolf.style.top = wolf_position[index].topwolf.style.left = wolf_position[index].left// 添加到box后面box.appendChild(wolf)// 随机出来的是小灰灰还是灰太狼var n = Math.floor(Math.random() * 10)c = ""if (n >= 3) {c = "h"} else {c = "x"}// 定义狼的下标轮播效果var Wolfindex = 0// 狼轮播// addWolf(c)wolfLuntimer = setInterval(function () {// 轮播// addWolf(c)wolf.src = "img/" + c + Wolfindex + ".png"Wolfindex++if (Wolfindex > 5) {clearInterval(wolfLuntimer)}}, 50)// 定义下标为5var downIndex = 5// 让狼下降，要延迟下降wolfDowntimer = setTimeout(function () {// 延时器里执行定时器downWolftimer = setInterval(function () {wolf.src = "img/" + c + downIndex + ".png"downIndex--if (downIndex == -1) {// downIndex = 5// clearInterval(downWolftimer)// clearTimeout(wolfDowntimer)// 移除元素box.removeChild(wolf)}}, 50)}, 1000)// 传入参数wolfScore(wolf)}// 批量显示function showWolf() {wolfTimer = setInterval(function () {addWolf()}, 1300)}// 不能连续击打var strike = 0// 打狼得分function wolfScore(wolf) {wolf.onclick = function () {if (strike == 0) {strike = 1console.log(1);// 打击前关闭下降动画clearTimeout(wolfDowntimer)clearInterval(downWolftimer)// 判断是小灰灰还是灰太狼if (c == "h") {s += 10} else {s -= 10}score.innerHTML = s// 如果小于0 不扣不变为负数if (score.innerHTML < 0) {score.innerHTML = 0}var koindex = 5// 被打中的动画wolf_ko = setInterval(function () {wolf.src = "img/" + c + koindex + ".png"koindex++if (koindex > 9) {clearInterval(wolf_ko)box.removeChild(wolf)strike = 0}}, 50)}}}// 重新开始function resetBtn() {// 隐藏当前按钮resetBox.onclick = function () {// 隐藏当前按钮this.style.display = "none"gameOverbox.style.display = "none"// 进度条填满timeWidth = 180timeBox.style.width = timeWidth + "px"// 调用进度条progressStart()// 重新赋值得分s = 0score.innerHTML = sshowWolf()wolfScore()}}}
</script>
</html>

感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！

相关文章：

JS之打地鼠案例

需要素材的同学可以私信我 效果图&#xff1a; 上代码&#xff1a; <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 320px;heigh…...

编程日记 2024/1/26 2:00:33

Kubernetes入门

k8s相关基础知识 文章目录 k8s相关基础知识1、Container2、PodPod 与 Container 的不同Pod 其它命令 3、Deployment扩容升级版本Rolling update(滚动更新)存活探针&#xff08;livenessProb&#xff09;就绪探针(readiness) 4、ServiceClusterIPNodePortLoadBalancer 5、Ingres…...

编程日记 2024/1/26 1:57:30

EtherNet/IP开发：C++搭建基础模块，EtherNet/IP源代码

这里是CIP资料的协议层级图&#xff0c;讲解协议构造。 ODVA&#xff08;www.ODVA.org&#xff09;成立于1995年&#xff0c;是一个全球性协会&#xff0c;其成员包括世界领先的自动化公司。结合其成员的支持&#xff0c;ODVA的使命是在工业自动化中推进开放、可互操作的信息和…...

编程日记 2024/1/26 1:55:27

Django(九)

1. 用户登录-Cookie和Session 什么是cookie和session&#xff1f; 发送HTTP请求或者HTTPS请求(无状态&短连接) http://127.0.0.1:8000/admin/list/ https://127.0.0.1:8000/admin/list/http无状态短连接&#xff1a;一次请求响应之后断开连接&#xff0c;再发请求重新连…...

编程日记 2024/1/26 1:50:22

解决Android Studio Unexpected tokens (use ； to separate expressions on the same line)

[TOC](Unexpected tokens (use ; to separate expressions on the same line)) 问题描述&#xff1a;Unexpected tokens (use ; to separate expressions on the same line) 原因&#xff1a;Android Studio 更新到最新的版本之后&#xff0c;gradle工程目录结构发生改变 问…...

编程日记 2024/1/26 1:45:18

【云原生】Docker网络模式和Cgroup资源限制

目录 一、Docker 网络实现原理 二、Docker 的网络模式 #网络模式详解&#xff1a; 第一种&#xff1a;host模式 第二种&#xff1a;bridge模式 第三种&#xff1a;container模式 第四种&#xff1a;none模式 第五种&#xff1a;自定义网络 三、Cgroup资源控制 第一种&a…...

编程日记 2024/1/26 1:39:12

实战：加密传输数据解密

前言 下面将分享一些实际的渗透测试经验&#xff0c;帮助你应对在测试中遇到的数据包内容加密的情况。我们将以实战为主&#xff0c;技巧为辅&#xff0c;进入逆向的大门。 技巧 开局先讲一下技巧&#xff0c;掌握好了技巧&#xff0c;方便逆向的时候可以更加快速的找到关键…...

编程日记 2024/1/26 1:38:11

前端开发提高效率的两大工具

一、浏览器中的开发者工具 怎么启动开发者工具&#xff1f; 在浏览器中按下F12或者鼠标右键点击检查 怎么利用&#xff08;常用的几点&#xff09;&#xff1f; 1、元素 点击标红的图标可以用于在页面选择元素&#xff0c;同时右侧会找到元素在前端代码中的位置 点击下方红…...

编程日记 2024/1/26 1:37:10

探索设计模式的魅力：深入理解面向对象设计的深层原则与思维

如何同时提高一个软件系统的可维护性 和 可复用性是面向对象对象要解决的核心问题。 通过学习和应用设计模式&#xff0c;可以更加深入地理解面向对象的设计理念&#xff0c;从而帮助设计师改善自己的系统设计。但是&#xff0c;设计模式并不能够提供具有普遍性的设计指导原则。…...

编程日记 2024/1/26 1:35:08

【Py/Java/C++三种语言详解】LeetCode每日一题240122【贪心】LeetCode670、最大交换

文章目录 题目链接题目描述解题思路为什么是贪心一个带图的例子 代码pythonjavacpp时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 题目链接 LeetCode670、最大交换 题目描述 给定一个非负整数数组 nums 和一个整数 k &#xff0c;你需要将这个数组分成 k 个非空的连…...

编程日记 2024/1/26 1:34:07

Linux/Doctor

Enumeration nmap 已知目标开放了22,80,8089端口&#xff0c;扫描详细情况如下 可以看到对外开放了22,80,8089三个端口 TCP/80 SSTI 访问80端口&#xff0c;有一个infodoctors.htb的电子邮件&#xff0c;点击其他的也没有什么反应&#xff0c;猜测有可能需要域名访问 在/et…...

编程日记 2024/1/26 1:31:04

嵌入式linux学习之系统烧录

1.所需文件 1. 开发板为正点原子stm32mp157,文件可按照linux驱动教程编译&#xff0c;也可在正点原子文档->08、系统镜像\02、出厂系统镜像中找到&#xff1a; 2.烧录 1.拨码开关为000(usb启动)&#xff0c;otg接口接入虚拟机&#xff0c;打开stm32cubeProgrammer: 2.页面…...

编程日记 2024/1/26 1:30:01

JVM-初始JVM

什么是JVM JVM 全称是 Java Virtual Machine&#xff0c;中文译名 Java虚拟机。JVM 本质上是一个运行在计算机上的程序&#xff0c;他的职责是运行Java字节码文件。 Java源代码执行流程如下&#xff1a; JVM的功能 1 - 解释和运行 2 - 内存管理 3 - 即时编译 解释和运行 解释…...

编程日记 2024/1/26 1:29:00

EXCEL VBA网抓技巧-复制网页表格，不用遍历单元格

EXCEL VBA网抓技巧-复制网页表格&#xff0c;不用遍历单元格 对应表格复制 Sub tableTest()Set winhttp CreateObject("winhttp.WinHttpRequest.5.1")Set HTML CreateObject("htmlfile")Set oWindow HTML.ParentWindowUrl "https://www.taiwanlo…...

编程日记 2024/1/26 1:27:59

动态规划——炮兵回城【集训笔记】

题目描述 游戏盘面是一个m行n列的方格矩阵&#xff0c;将每个方格用坐标表示&#xff0c;行坐标从下到上依次递增&#xff0c;列坐标从左至右依次递增&#xff0c;左下角方格的坐标为(1,1)&#xff0c;则右上角方格的坐标为(m,n)。 游戏结束盘上只剩下一枚炮兵没有回到城池中&a…...

编程日记 2024/1/26 1:25:57

低成本扫码点餐：1000元全包

在数字化时代&#xff0c;扫码点餐已经成为餐饮行业的标配。然而&#xff0c;对于许多小规模或初创的餐饮企业来说&#xff0c;开发一套完整的扫码点餐系统是一项成本高昂的任务。今天&#xff0c;我们将向您介绍一个低成本、高效的方法&#xff0c;让您用1000块钱轻松搞定一套…...

编程日记 2024/1/26 1:24:56

五款焊在电脑上的效率软件

在当今快节奏的商业环境中&#xff0c;提高工作效率成为了每个人都渴望实现的目标。尤其是在面对繁忙的工作日程、庞杂的任务清单和团队合作的压力时&#xff0c;我们需要一些可靠的工具来帮助我们更好地管理时间、组织工作和提高生产力。幸运的是&#xff0c;现在有许多高效的…...

编程日记 2024/1/26 1:23:55

小程序样例3：根据日历创建待办事项

基本功能 1、待办事项查看 选择不同的日期显示不同的待办: 2、选择日期后 新增事项&#xff1a; 3. 点击事项&#xff0c;查看详情 4、删除事项&#xff1a;删除事项3之后&#xff0c;剩余事项2 5、点击日期可以选择更多的月&#xff1a; 实现思路&#xff1a; 1、数据结构&a…...

编程日记 2024/1/26 1:21:53

计算机设计大赛 协同过滤电影推荐系统

文章目录 1 简介1 设计概要2 课题背景和目的3 协同过滤算法原理3.1 基于用户的协同过滤推荐算法实现原理3.1.1 步骤13.1.2 步骤23.1.3 步骤33.1.4 步骤4 4 系统实现4.1 开发环境4.2 系统功能描述4.3 系统数据流程4.3.1 用户端数据流程4.3.2 管理员端数据流程 4.4 系统功能设计 …...

编程日记 2024/1/26 1:20:52

docker下安装rabbitmq

1.查询rabbitmq的镜像 docker search rabbitmq 2.安装镜像 如果需要安装其他版本在rabbitmq后面跟上版本号即可 docker pull rabbitmq:3.7.7-management docker pull rabbitmq:版本号 -management 直接安装最新的 docker pull rabbitmq 3.启动容器 docker run -dit --name rab…...

编程日记 2024/1/26 1:19:51

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/7 23:18:31

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2026/1/23 10:10:53

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2026/1/24 14:43:35

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

编程新知 2026/1/28 11:35:09

【Linux】自动化构建-Make/Makefile

前言 上文我们讲到了Linux中的编译器gcc/g 【Linux】编译器gcc/g及其库的详细介绍-CSDN博客 本来我们将一个对于编译来说很重要的工具&#xff1a;make/makfile 1.背景 在一个工程中源文件不计其数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;mak…...

编程新知 2026/2/4 16:04:21