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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/139795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯域名优惠卷领取

腾讯域名到到期了&#xff0c;听说申请此计划&#xff0c;可获得优惠卷&#xff0c;看到网上5年域名只需要10元&#xff0c;姑且试试看。 我的博客即将同步至腾讯云开发者社区&#xff0c;邀请大家一同入驻&#xff1a;https://cloud.tencent.com/developer/support-plan?in…

【hacker送书第一期】嵌入式虚拟化技术与应用

第一期图书推荐 前言为什么嵌入式系统需要虚拟化技术&#xff1f;专家推荐本书适用群体内容简介目录权威作者团队参与方式 前言 随着物联网设备的爆炸式增长和万物互联应用的快速发展&#xff0c;虚拟化技术在嵌入式系统上受到了业界越来越多的关注、重视和实际应用。嵌入式系…

Win10专业版安装wsl-ubuntu子系统

文章目录 一、查看是否满足安装要求二、管理员权限启动 Windows PowerShell三、启用Windows10子系统功能四、启用虚拟机平台功能五、重启电脑六、下载 Linux 内核更新包&#xff08;适用于 x64 计算机的 WSL2 Linux 内核更新包&#xff09;七、将 WSL 2 设置为默认版本八、打开…

利用检测结果实现半自动标注

1. 将目标检测结果保存为xml格式 #-----------------------------------------------------------------------------------# # 下面定义了xml里面的组成模块&#xff0c;无需改动。 #-----------------------------------------------------------------------------------…

关于session的不断变化问题

今天在帮同学解决一个小问题&#xff0c;差点阴沟翻船。 问题再现&#xff1a;他从github上拉了一个项目下来跑&#xff0c;结果发生跑不通问题出现在验证码一直不对。 我一看项目源码&#xff0c;验证码生成后存储再session中了&#xff0c;等用户发送请求验证的时候sessionI…

「帝国风暴兵」加入 The Sandbox,推出真实的全新人物化身系列和体验!

我们很高兴宣布与流行文化中最具标志性的娱乐品牌 Shepperton 设计工作室的「帝国风暴兵」达成合作伙伴关系。这一合作标志着该科幻品牌首次进入元宇宙&#xff0c;让风暴兵的粉丝们以全新的方式体验「帝国风暴兵」。 在这个体验中&#xff0c;玩家将置身于帝国风暴兵的营地&am…

数据分析实战 | 泊松回归——航班数据分析

目录 一、数据及分析对象 二、目的及分析任务 三、方法及工具 四、数据读入 五、数据理解 六、数据准备 七、模型训练 八、模型评价 一、数据及分析对象 CSV文件&#xff1a;o-ring-erosion-only.csv 数据集链接&#xff1a;https://download.csdn.net/download/m0_7…

网络安全之文件包含漏洞及其防护

一、引言 文件包含漏洞也是一种注入型漏洞&#xff0c;其本质就是输入一段用户能够控制的脚本或者代码&#xff0c;并让服务端执行。举个例子&#xff0c;PHP为例&#xff0c;我们常常把可重复使用的函数写入到单个文件中&#xff0c;在使用该函数时&#xff0c;直接调用此文件…

基于 Gin 的 HTTP 代理 demo

上次用 TCP 模拟了一个 HTTP 代理之后&#xff0c;感觉那样还是太简陋了&#xff0c;想着是不是可以用框架来做一个有点实际用处的东西。所以&#xff0c;就思索如何用 golang 的 Gin 框架来实现一个&#xff1f;嗯&#xff0c;对的你没有听错&#xff0c;是 gin 框架。你可能会…

Java 数据结构篇-实现双链表的核心API

&#x1f525;博客主页&#xff1a; 小扳_-CSDN博客 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 双链表的说明 1.1 双链表 - 创建 1.2 双链表 - 根据索引查找节点 1.3 双链表 - 根据索引插入节点 1.4 双链表 - 头插节点 1.5 双链表 - 尾插 1.6 双链表 - 根据索引来…

Dell戴尔灵越Inspiron 7700 AIO一体机电脑原厂预装Windows10系统

链接&#xff1a;https://pan.baidu.com/s/1-slgR9t4Df_eko0Y6xaeyw?pwdmk0p 提取码&#xff1a;mk0p 灵越7700一体机原装出厂系统自带声卡驱动、无线网卡驱动、面部识别等所有驱动、出厂主题壁纸、系统属性专属LOGO标志、Office办公软件、MyDell等预装程序 由于时间关系,…

Spring 事务失效的场景

1.直接new出来的对象添加事务不起作用&#xff0c;因为只有spring定义的bean才接受事务。 2.由于mysql的引擎用Myisam不支持事务&#xff0c;所以如果使用mysql的myisam引擎的话&#xff0c;事务不起作用。 3.如果Transaction注解到非public方法上&#xff0c;事务不起作用&…

【数据库设计和SQL基础语法】--导论

一、什么是数据库设计和SQL 1.1. 数据库设计&#xff1a; 数据库设计是指在创建和管理数据库系统时&#xff0c;通过合理的规划和设计来组织、存储和管理数据的过程。一个好的数据库设计能够确保数据的有效性、完整性、一致性和可扩展性&#xff0c;同时提高系统的性能和可维护…

RT-Thread上部署TinyMaix推理框架,使MCU赋予AI能力

概要 当谈到微控制器(MCU)和人工智能(AI)的结合,我们进入了一个激动人心的领域。传统上,AI应用程序需要大型计算机或云服务器的处理能力,但随着技术的发展,现在可以将AI嵌入到微控制器中。这为嵌入式系统、物联网设备、机器人和各种其他应用开启了新的可能性。 MCU A…

Linux如何修改主机名(hostname)(亲测可用)

文章目录 背景Linux如何修改主机名&#xff08;hostname&#xff09;方法方法1. 使用 hostnamectl 命令示例 2. 编辑 /etc/hostname 文件注意事项 背景 我创建虚拟机的时候没设置主机名&#xff0c;现在显示localhost&#xff0c;有点尴尬&#x1f605;&#xff1a; 需要重新设…

冒泡排序

贵阳这个地方的天气变化好大呀&#xff0c;前两天晒大太阳&#xff0c;今天就冷的脚抖&#xff0c;简直不要太冷&#xff0c;但是不管怎么样&#xff0c;还是要学习的哟&#xff01; 冬天来了&#xff0c;春天确实还有一点远&#xff01; 好了&#xff0c;话不多说&#xff0c;…

SpringBoot 缓存之 @Cacheable 详细介绍

一、简介 1、缓存介绍 Spring 从 3.1 开始就引入了对 Cache 的支持。定义了 org.springframework.cache.Cache 和 org.springframework.cache.CacheManager 接口来统一不同的缓存技术。并支持使用 JCache&#xff08;JSR-107&#xff09;注解简化我们的开发。&#xfeff; 其…

由浅入深学习统计学 - 常用统计图形学习

学习笔记 第一章- 信息图形化 图形化&#xff08;可视化&#xff09; 在一堆数据中&#xff0c;自己发现了这些数据的规律&#xff0c;但是无法表述给其他人知道&#xff0c;图形化就是便于他人理解数据的规律的展示的手段。 或者说我们也可以从统计的数据图形中发现某些没有…

城市内涝积水预防,万宾科技内涝监测仪如何预警?

近几年来城市内涝所引发的安全隐患极为突出&#xff0c;影响着城市道路安全&#xff0c;而且也让市民心中多有惶恐。一旦城市内涝问题出现背后不仅是路面积水问题&#xff0c;更会导致城市无法正常运行&#xff0c;导致市民日常生活和工作受到影响。所以对于排水防涝设施的建设…

Linux之基础开发工具gdb调试器的使用(三)

文章目录 一、Linux调试器-gdb使用1、安装gdb2、背景3、Debug和release4、区分Debug和release 二、Linux调试器-gdb命令演示1、显示指定行之后的代码&#xff08;自动记录最后一条指令&#xff09;2、断点1、打印断点2、查看断点3、删除断点4、使能&#xff08;禁用/开启&#…