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…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了 估计有） 刷机程序 和 镜像 就不提供了。要刷的时…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂度…...
CSS | transition 和 transform的用处和区别
省流总结： transform用于变换/变形，transition是动画控制器 transform 用来对元素进行变形，常见的操作如下，它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...
TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？
在工业自动化持续演进的今天，通信网络的角色正变得愈发关键。 2025年6月6日，为期三天的华南国际工业博览会在深圳国际会展中心（宝安）圆满落幕。作为国内工业通信领域的技术型企业，光路科技（Fiberroad&…...
【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么，为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中，我们在使用电子设备时，我们所输入执行的每一条指令最终大多都会作用到硬件上，比如下载一款软件最终会下载到硬盘上&am…...