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…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环！ 传统痛点： Java 8 之前，集合操作离不开冗长的 for 循环和匿名类。例如，过滤列表中的偶数： List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架，支持"一次开发，多端部署"，可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务，为旅游应用带来…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
多种风格导航菜单 HTML 实现（附源码）
下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
Mac下Android Studio扫描根目录卡死问题记录
环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中，提示一个依赖外部头文件的cpp源文件需要同步，点…...
安卓基础（aar）
重新设置java21的环境，临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的： MyApp/ ├── app/ …...
蓝桥杯 冶炼金属
原题目链接 🔧 冶炼金属转换率推测题解 📜 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V，是一个正整数，表示每 V V V 个普通金属 O O O 可以冶炼出 …...
Spring是如何解决Bean的循环依赖：三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间互相持有对方引用，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...