js案例：打地鼠游戏（打灰太狼）
效果预览图
游戏规则
当灰太狼出现的时候鼠标左键点击灰太狼加10分，小灰灰出现的时候鼠标左键点小灰灰击减10分，不点击不减分不加分。
整体思路
1.把获取背景图片中每个地洞的位置，把所有位置放到一个数组中。
2.封装随机数函数，随机获取数组中洞的位置，同时给灰太狼/小灰灰图片设置定位，把灰太狼/小灰灰定位到随机的洞里。
3.设置计时器轮回图片使其达到从洞里出来到洞里去的效果。
4.设置点击事件，点击时更换状态图片，增加分数。
完整代码
<!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;}.wp {width:320px;height:480px;background: url(./img/game_bg.jpg) no-repeat 0 0;margin: 0 auto;position: relative;overflow: hidden;}.one {position:absolute;left: 15px;top: 158px;cursor: pointer;}#defen{display: block;margin: 6px 0 0 56px;font-size: 30px;color: #fff;}.jdt{margin-left: 63px;margin-top: 20px;height: 16px;border-radius: 10px;}.ksyx{width: 200px;height: 200px;background: linear-gradient(to right, #ff00ff, #00ffff);border-radius: 50%;margin: 0 auto;color: #fff;text-align: center;line-height: 200px;font-size: 30px;margin-top: 100px;animation: pulse 2s infinite linear;cursor: pointer;}@keyframes pulse {0% {transform: scale(1); }50% {transform: scale(1.2);}100% {transform: scale(1);}}.yxjs{width: 200px;height: 200px;background: linear-gradient(to right, #ff00ff, #00ffff);border-radius: 50%;margin: 0 auto;color: #fff;text-align: center;line-height: 50px;font-size: 26px;margin-top: 100px;animation: pulse 2s infinite linear;cursor: pointer;display: none;align-items: center;padding: 20px;}</style>
</head>
<body><div class="wp"><img src="" alt="" class="one"><var id="defen">0</var><img src="./img/progress.png" alt="" class="jdt"><div class="ksyx">开始游戏</div><div class="yxjs">游戏结束您的得分为100点击继续游戏</div></div>
</body>
</html>
<script>
let timmer;
let one = document.querySelector('.one');
let defen = document.querySelector('#defen')
let jdt = document.querySelector('.jdt')
let ksyx = document.querySelector('.ksyx')
let yxjs = document.querySelector('.yxjs')
let n=0;
let dr = 1;
let jore = ['h','x'];
let dong = [ { x:96,y:112 },{ x:15,y:158 },{ x:187,y:140 },{ x:103,y:189 },{ x:30,y:292 },{ x:119,y:273 },{ x:207,y:296 },{ x:17,y:219 },{ x:200,y:212 }];
ksyx.onclick = function(){ksyx.style.display = 'none';timmer = setInterval(function(){let sjgd = sj(0,8)if(dr==0){n--; if (n<0) {dr=1;one.style.left = `${dong[sjgd].x}px`one.style.top = `${dong[sjgd].y}px`let dl= jore.sort(function(){return Math.random()-0.5})}}if(dr==1){n++;if(n==5){dr=0; }}one.src = './img/'+jore[0]+n+'.png';
},100);
//进度条
let s = 30;
let jdtjsq ;
jdtjsq = setInterval(function(){s--;jdt.style.width = s*6+'px'if (s<0) {clearTimeout(timmer)yxjs.style.display = 'flex';yxjs.innerHTML = '游戏结束您的得分为'+sum+'分';}
},1000)
//封装随机数
function sj(m,n){return Math.floor(Math.random()*(n-m+1)+m)
}
//得分机制
let sum = 0
one.onclick = function(){n=9;if (jore[0]=='x') {sum -= 10;}if (jore[0]=='h') {sum += 10;}console.log(sum);if (sum>=50) {defen.style.color = '#f00'}defen.innerHTML = sum;
}
}
</script>相关文章：
js案例：打地鼠游戏（打灰太狼）
效果预览图 游戏规则 当灰太狼出现的时候鼠标左键点击灰太狼加10分，小灰灰出现的时候鼠标左键点小灰灰击减10分，不点击不减分不加分。 整体思路 1.把获取背景图片中每个地洞的位置，把所有位置放到一个数组中。 2.封装随机数函数，随…...
删除杀软回调 bypass EDR 研究
01 — 杀软或EDR内核回调简介 Windows x64 系统中，由于 PatchGuard 的限制，杀软或EDR正常情况下，几乎不能通过 hook 的方式，完成其对恶意软件的监控和查杀。那怎么办呢？别急，微软为我们提供了其他的方法&a…...
Ansible自动化部署工具-组件及语法介绍
大家好，我是蓝胖子，我认为自动化运维要做的事情就是把运维过程中的某些步骤流程化，代码化，这样在以后执行类似的操作的时候就可以解放双手了，让程序自动完成。避免出错，Ansible就是这方面非常好用的工具。它…...
postgresql实现job的六种方法
简介 在postgresql数据库中并没有想oracle那样的job功能，要想实现job调度，就需要借助于第三方。本人更为推荐kettle，pgagent这样的图形化界面，对于开发更为友好 优势劣势Linux 定时任务（crontab） 简单易用…...
layui 表格（table）合计 取整数
第一步 开启合计行 是否开启合计行区域 table.render({elem: #myTable, url: ../baidui/, page: true, cellMinWidth: 100,totalRow:true,cols: [[ //表头//{ type: checkbox },{ type: checkbox,totalRowText: "合计" },//合计行区域{ field: id, align: center,…...
深入理解 TCP；场景复现，掌握鲜为人知的细节
握手失败 第一次握手丢失了，会发生什么？ 当客户端想和服务端建立 TCP 连接的时候，首先第一个发的就是 SYN 报文，然后进入到 SYN_SENT 状态。 在这之后，如果客户端迟迟收不到服务端的 SYN-ACK 报文（第二次…...
【MySQL系列】 第二章 · SQL（中）
写在前面 Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正࿰…...
IBM Qiskit量子机器学习速成（一）
声明：本篇笔记基于IBM Qiskit量子机器学习教程的第一节，中文版译文详见：https://blog.csdn.net/qq_33943772/article/details/129860346?spm1001.2014.3001.5501 概述 首先导入关键的包 from qiskit import QuantumCircuit from qiskit.u…...
音视频基础知识
图像（YUV RGB） 这个讲的比较好 RGB颜色编码 图像显示主要是由像素组成，每个像素点的颜色组成都是采用RGB格式，RGB就是红、绿、蓝，RGB分别取不同的值，展示不同的颜色。 YUV…...
ida81输入密码验证算法分析以及破解思路
本文分析了ida81对输入密码的验证流程，分别对输入密码到生成解密密钥、密码素材的生成过程以及文件数据的加密过程这三个流程进行分析，并尝试找一些可利用的破绽。很遗憾，由于水平有限，目前也只是有个思路未能完全实现，…...
C语言——贪吃蛇
一. 游戏效果 贪吃蛇 二. 游戏背景 贪吃蛇是久负盛名的游戏，它也和俄罗斯⽅块，扫雷等游戏位列经典游戏的⾏列。 贪吃蛇起源于1977年的投币式墙壁游戏《Blockade》，后移植到各种平台上。具体如下： 起源。1977年，投币式…...
Android sqlite 使用简介
进行Android应用开发时经常会用到数据库。Android系统支持sqlite数据库，在app开发过程中很容易通过SQLiteOpenHelper使用数据库，SQLiteOpenHelper依赖于Context对象，但是基于uiatomator1.0和Java程序等无法获取Context的应用如何使用数据库呢…...
UE地形系统材质混合实现和Shader生成分析(UE5 5.2)
前言 随着电脑和手机硬件性能越来越高，游戏越来越追求大世界，而大世界非常核心的一环是地形系统，地形系统两大构成因素：高度和多材质混合，此篇文章介绍下UE4/UE5 地形的材质混合方案----基于WeightMap混合。 材质层 …...
Git分支与Git标签的介绍及其场景应用
目录 一、Git分支 1.1 定义 1.2 基本概念 1.3 特点与优势 1.4 Git分支操作命令 1.4.1 查看分支 1.4.2 创建分支 1.4.3 删除分支 1.4.4 切换分支 1.4.5 创建并切换到新建分支 1.5 场景应用 1.5.1 前期准备 1.5.2 具体操作 二、Git标签 2.1 定义 2.2 类型 2.3 标…...
Three.js——基于原生WebGL封装运行的三维引擎
文章目录 前言一、什么是WebGL？二、Three.js 特性 前言 Three.js中文官网 Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。既然Threejs是一款WebGL三维引擎，那么…...
第八章认识Express框架
目录 Express模块化路由 基本概述 基本使用 基本构建 案例项目 Express接收请求参数 基本概述 基本类别 Express接收GET请求参数 Express接收POST请求参数 Express接收路由参数 Express模块化路由 基本概述 在Express中，路由是指确定应用程序如何响应对…...
【K8s集群离线安装-kubeadm】
1、kubeadm概述 kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具。这个工具能通过两条指令快速完成一个kubernetes集群的部署。 2、环境准备 2.1 软件环境 软件版本操作系统CentOS 7Docker19.03.13K8s1.23 2.2 服务器 最小硬件配置：2核CPU、2G内存…...
python工具CISCO ASA设备任意文件读取
python漏洞利用 构造payload： /CSCOT/translation-table?typemst&textdomain/%2bCSCOE%2b/portal_inc.lua&default-language&lang../漏洞证明： 文笔生疏，措辞浅薄，望各位大佬不吝赐教，万分感谢。 免…...
TCP关闭的两种方法概述
一个TCP需要经过四次挥手才可以关闭连接，能够开启四次挥手的函数有两个： int close(int sockfd) int shutdown(int sockfd,int howto) 接下来就分别讲解一下这两个函数。 close()函数 函数原型 #include<unistd.h> int close(int sockfd)这个函…...
Git的Hooks机制
参考文章：详解如何在项目中使用git Hooks（husky、yorkie） git hooks钩子 git hooks是一些自定义的脚本，用于控制git工作的流程，分为客户端钩子和服务端钩子。 ~/work/step-time/ [master*] ll .git/hooks total…...
软件实施交付转运维学习第五天：用户管理和权限管理
今天是软件实施交付转运维学习的第五天。前面四天我们分别了解了运维的基本概念、Linux常用命令。今天，我们进入一个既基础又极其重要的模块——用户管理和权限管理。无论是操作系统层面，还是应用系统层面，用户和权限都是安全的基石。谁可以访…...
【AI原生软件性能基准测试黄金标准】：20年实战总结的7大不可绕过陷阱与5步精准压测法
第一章：AI原生软件性能基准测试的范式革命 2026奇点智能技术大会(https://ml-summit.org) 传统基准测试工具（如SPEC CPU、SysBench）面向通用计算负载设计，其工作负载建模、指标维度与调度语义已无法刻画AI原生软件的核心行为特征…...
动静分离实现)
D4案例2 Nginx/Java服务自定义镜像部署及(NAS/NFS文件存储)动静分离实现
D4案例2 Nginx/Java服务自定义镜像部署及(NAS/NFS文件存储)动静分离实现 第一步：重新创建干净的命名空间 kubectl get namespace linux36 -o json | jq .spec.finalizers=[] | kubectl replace --raw /api/v1/namespaces/linux36/finalize -f - kubectl delete deploy -n linu…...
毕业论文排版救星：Word多级列表+自动编号保姆级教程（含格式调整技巧）
毕业论文排版救星：Word多级列表自动编号保姆级教程（含格式调整技巧） 写毕业论文最让人头疼的莫过于排版问题——手动调整章节编号不仅耗时费力，一旦中间插入新内容，后续所有编号都要重新修改。我曾见过一位同学因为反复…...
Qt新手必看：MinGW和MSVC构建套件到底怎么选？从安装到项目配置保姆级指南
Qt构建套件选择指南：MinGW与MSVC深度对比与实战配置 第一次打开Qt Creator时，那个充满选项的"Kit Selection"界面总让人望而生畏。作为一个从零开始学习Qt的开发者，我也曾在这个界面前犹豫不决——MinGW还是MSVC？这个看…...
sys-con 技术架构解析：Switch 第三方控制器支持的系统模块实现原理
sys-con 技术架构解析：Switch 第三方控制器支持的系统模块实现原理 【免费下载链接】sys-con Nintendo Switch sysmodule that allows support for third-party controllers 项目地址: https://gitcode.com/gh_mirrors/sy/sys-con sys-con 是一个为任天堂 Sw…...
Anaconda Navigator打不开？三步搞定‘str‘ object has no attribute ‘get‘报错（附详细文件修改指南）
Anaconda Navigator启动报错深度修复指南：从原理到实战 当你满心期待地双击Anaconda Navigator图标，准备开始一天的数据分析工作，却迎面撞上"str object has no attribute get"这个晦涩的错误提示——这种挫败感我太熟悉了。作为P…...
软考高项通关秘籍：手把手教你用Excel打造需求跟踪矩阵（附模板下载）
软考高项实战指南：用Excel构建需求跟踪矩阵的7个关键步骤 在项目管理领域，需求跟踪矩阵就像是一张精准的导航地图，它能确保项目团队从需求源头到最终交付物始终保持正确的航向。对于备考软考高项（信息系统项目管理师）的…...
DDT4All汽车诊断工具：从零开始掌握专业级ECU调参与故障诊断
DDT4All汽车诊断工具：从零开始掌握专业级ECU调参与故障诊断 【免费下载链接】ddt4all OBD tool 项目地址: https://gitcode.com/gh_mirrors/dd/ddt4all 想要深入了解汽车电子系统却不知从何入手？面对复杂的OBD-II诊断工具感到困惑？DDT…...
LFM2.5-1.2B-Thinking-GGUF开发工具链整合：在IDEA中配置模型调试环境
LFM2.5-1.2B-Thinking-GGUF开发工具链整合：在IDEA中配置模型调试环境 1. 为什么要在IDEA中配置模型调试环境 对于Java开发者来说，IntelliJ IDEA是最常用的集成开发环境。将LFM2.5-1.2B-Thinking-GGUF模型的调试环境直接集成到IDEA中，可以显…...