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

js案例：打地鼠游戏（打灰太狼）

news 2025/11/19 8:52:45

效果预览图

游戏规则

当灰太狼出现的时候鼠标左键点击灰太狼加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.封装随机数函数，随…...

编程日记 2023/11/12 23:43:11

删除杀软回调 bypass EDR 研究

01 — 杀软或EDR内核回调简介 Windows x64 系统中，由于 PatchGuard 的限制，杀软或EDR正常情况下，几乎不能通过 hook 的方式，完成其对恶意软件的监控和查杀。那怎么办呢？别急，微软为我们提供了其他的方法&a…...

编程日记 2023/11/12 23:42:10

Ansible自动化部署工具-组件及语法介绍

大家好，我是蓝胖子，我认为自动化运维要做的事情就是把运维过程中的某些步骤流程化，代码化，这样在以后执行类似的操作的时候就可以解放双手了，让程序自动完成。避免出错，Ansible就是这方面非常好用的工具。它…...

编程日记 2023/11/12 23:41:09

postgresql实现job的六种方法

简介在postgresql数据库中并没有想oracle那样的job功能，要想实现job调度，就需要借助于第三方。本人更为推荐kettle，pgagent这样的图形化界面，对于开发更为友好优势劣势Linux 定时任务（crontab） 简单易用…...

编程日记 2023/11/12 23:40:07

第一步开启合计行是否开启合计行区域 table.render({elem: #myTable, url: ../baidui/, page: true, cellMinWidth: 100,totalRow:true,cols: [[ //表头//{ type: checkbox },{ type: checkbox,totalRowText: "合计" },//合计行区域{ field: id, align: center,…...

编程日记 2023/11/12 23:39:06

深入理解 TCP；场景复现，掌握鲜为人知的细节

握手失败第一次握手丢失了，会发生什么？ 当客户端想和服务端建立 TCP 连接的时候，首先第一个发的就是 SYN 报文，然后进入到 SYN_SENT 状态。在这之后，如果客户端迟迟收不到服务端的 SYN-ACK 报文（第二次…...

编程日记 2023/11/12 23:38:05

【MySQL系列】第二章 · SQL（中）

写在前面 Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正&#xff0…...

编程日记 2023/11/12 23:37:04

IBM Qiskit量子机器学习速成（一）

声明：本篇笔记基于IBM Qiskit量子机器学习教程的第一节，中文版译文详见：https://blog.csdn.net/qq_33943772/article/details/129860346?spm1001.2014.3001.5501 概述首先导入关键的包 from qiskit import QuantumCircuit from qiskit.u…...

编程日记 2023/11/12 23:35:01

音视频基础知识

图像（YUV RGB） 这个讲的比较好 RGB颜色编码图像显示主要是由像素组成，每个像素点的颜色组成都是采用RGB格式，RGB就是红、绿、蓝，RGB分别取不同的值，展示不同的颜色。 YUV…...

编程日记 2023/11/12 23:34:00

ida81输入密码验证算法分析以及破解思路

本文分析了ida81对输入密码的验证流程，分别对输入密码到生成解密密钥、密码素材的生成过程以及文件数据的加密过程这三个流程进行分析，并尝试找一些可利用的破绽。很遗憾，由于水平有限，目前也只是有个思路未能完全实现&#xff0c…...

编程日记 2023/11/12 23:32:59

C语言——贪吃蛇

一. 游戏效果贪吃蛇二. 游戏背景贪吃蛇是久负盛名的游戏，它也和俄罗斯⽅块，扫雷等游戏位列经典游戏的⾏列。贪吃蛇起源于1977年的投币式墙壁游戏《Blockade》，后移植到各种平台上。具体如下： 起源。1977年，投币式…...

编程日记 2023/11/12 23:31:58

Android sqlite 使用简介

进行Android应用开发时经常会用到数据库。Android系统支持sqlite数据库，在app开发过程中很容易通过SQLiteOpenHelper使用数据库，SQLiteOpenHelper依赖于Context对象，但是基于uiatomator1.0和Java程序等无法获取Context的应用如何使用数据库呢…...

编程日记 2023/11/12 23:30:56

UE地形系统材质混合实现和Shader生成分析(UE5 5.2)

前言随着电脑和手机硬件性能越来越高，游戏越来越追求大世界，而大世界非常核心的一环是地形系统，地形系统两大构成因素：高度和多材质混合，此篇文章介绍下UE4/UE5 地形的材质混合方案----基于WeightMap混合。材质层 …...

编程日记 2023/11/12 23:29:56

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 标…...

编程日记 2023/11/12 23:28:55

Three.js——基于原生WebGL封装运行的三维引擎

文章目录前言一、什么是WebGL？二、Three.js 特性前言 Three.js中文官网 Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。既然Threejs是一款WebGL三维引擎，那么…...

编程日记 2023/11/12 23:27:54

第八章认识Express框架

目录 Express模块化路由基本概述基本使用基本构建案例项目 Express接收请求参数基本概述基本类别 Express接收GET请求参数 Express接收POST请求参数 Express接收路由参数 Express模块化路由基本概述在Express中，路由是指确定应用程序如何响应对…...

编程日记 2023/11/12 23:26:53

【K8s集群离线安装-kubeadm】

1、kubeadm概述 kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具。这个工具能通过两条指令快速完成一个kubernetes集群的部署。 2、环境准备 2.1 软件环境软件版本操作系统CentOS 7Docker19.03.13K8s1.23 2.2 服务器最小硬件配置：2核CPU、2G内存…...

编程日记 2023/11/12 23:25:52

python工具CISCO ASA设备任意文件读取

python漏洞利用构造payload： /CSCOT/translation-table?typemst&textdomain/%2bCSCOE%2b/portal_inc.lua&default-language&lang../漏洞证明： 文笔生疏，措辞浅薄，望各位大佬不吝赐教，万分感谢。免…...

编程日记 2023/11/12 23:24:51

TCP关闭的两种方法概述

一个TCP需要经过四次挥手才可以关闭连接，能够开启四次挥手的函数有两个： int close(int sockfd) int shutdown(int sockfd,int howto) 接下来就分别讲解一下这两个函数。 close()函数函数原型 #include<unistd.h> int close(int sockfd)这个函…...

编程日记 2023/11/12 23:23:50

Git的Hooks机制

参考文章：详解如何在项目中使用git Hooks（husky、yorkie） git hooks钩子 git hooks是一些自定义的脚本，用于控制git工作的流程，分为客户端钩子和服务端钩子。  ~/work/step-time/ [master*] ll .git/hooks total…...

编程日记 2023/11/12 23:21:47

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2025/11/16 15:48:52

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...

编程新知 2025/11/16 22:20:07

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...

编程新知 2025/11/16 22:23:38