JS之打地鼠案例

需要素材的同学可以私信我
效果图:

请添加图片描述

上代码:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 320px;height: 480px;background: url("img/game_bg.jpg") no-repeat;margin: 100px auto;}.score {position: absolute;color: white;font-size: 20px;top: 2.2%;left: 18%;}.time {position: absolute;background: url("img/progress.png");top: 66px;left: 62px;width: 180px;height: 16px;}.stop1 {width: 50px;height: 50px;background: url("img/stop.png") no-repeat center;position: absolute;top: 100px;left: 10px;}.start,.reset {width: 100px;height: 100px;background-color: pink;opacity: 0.4;border-radius: 50px;text-align: center;position: absolute;top: 130px;left: 0;bottom: 0;right: 0;margin: auto;font-size: 20px;cursor: pointer;}.gameOver {position: absolute;top: 0;text-align: center;color: white;font-size: 20px;width: 100%;height: 480px;line-height: 480px;background-color: black;opacity: 0.3;}.gameOver span {color: red;font-size: 25px;}.gameOver,.reset,.stop1 {display: none;}.box img {position: absolute;}</style>
</head><body><!-- 大盒子 --><div class="box"><!-- 得分 --><div class="score">0</div><!-- 时间流逝条 --><div class="time"></div><!-- 暂停按钮 --><div class="stop1"></div><!-- 开始 --><div class="start"><span style="z-index: 1;position: relative;left: 0px;top: 35px;color: red;">点击开始</span></div><!-- 游戏结束 --><div class="gameOver">游戏结束最终得分:<span>0</span></div><!-- 重新开始 --><div class="reset"><span style="z-index: 1;position: relative;left: 0px;top: 35px;color: red;">重新开始</span></div><!-- <img src="img/h5.png" alt=""> --></div>
</body>
<script>// 页面初始化window.onload = function () {// 获取大盒子var box = document.querySelector(".box")// 获取分数var score = document.querySelector(".score")// 获取进度条var timeBox = document.querySelector(".time")// 获取暂停按钮var stopBtn = document.querySelector(".stop1")// 获取开始按钮var startBtn = document.querySelector(".start")// 获取重新开始按钮var resetBox = document.querySelector(".reset")// 获取gameovervar gameOverbox = document.querySelector(".gameOver")// 得分var s = 0// 计时器var timer// 游戏状态,t代表开始,f代表暂停var state = true// 定义9个地洞的坐标值wolf_position = [{// 最上面的洞top: "115px",left: "95px"},{// 第二排第一个top: "160px",left: "16px"},{// 第二排第二个top: "143px",left: "185px"},{// 第二列第二个top: "194px",left: "101px"},{// 第三排第一个top: "220px",left: "14px"},{// 第四排第一个top: "293px",left: "28px"},{// 第三排第三个top: "212px",left: "197px"},{// 第二列第三个top: "274px",left: "117px"},{// 第四排第三个top: "296px",left: "205px"}]// 进度条初始宽度var timeWidth = timeBox.offsetWidth// console.log(timeWidth);// 点击开始按钮的时候startBtn.onclick = function () {// 隐藏开始按钮startBtn.style.display = "none"// 暂停按钮显示stopBtn.style.display = "block"// 进度条开始计时progressStart()// 游戏开始出现狼showWolf()// 游戏开始出现addWolf()}// 进度条计时function progressStart() {timer = setInterval(function () {timeBox.style.width = timeWidth + "px"timeWidth--if (timeWidth <= 0) {// 小于180时结束游戏clearInterval(timer)// alert("游戏结束")// 调用游戏结束gameOver()}}, 100)}// 游戏结束function gameOver() {// 重新开始按钮出现resetBox.style.display = "block"// 游戏结束标语出现gameOverbox.style.display = "block"// 游戏结束狼停止出现clearInterval(wolfTimer)gameOverbox.innerHTML = "游戏结束最终得分:" + sresetBtn()}// 暂停游戏stopBtn.onclick = function () {if (state) {// 清除定时器clearInterval(timer)// 停止时暂停生产狼clearInterval(wolfTimer)// 换成开始按钮this.style.backgroundImage = "url(img/start.png)"// 变成falsestate = false} else {// 启用定时器,调用progressStart()// 开始时显示狼showWolf()this.style.backgroundImage = "url(img/stop.png)"state = true}}// 灰太狼// 判断是否重复var nub = -1// 灰太狼轮播var wolfLuntimer// 狼下降var downWolftimervar wolfDowntimer// 狼的定时器var wolfTimerfunction addWolf() {// 创建节点var wolf = document.createElement("img")// 随机数0-8var index = Math.floor(Math.random() * 9)// 如果上一个重复重新赋值while (index == nub) {index = Math.floor(Math.random() * 9)}nub = indexconsole.log(index);// 坑位console.log(wolf_position[index]);// 赋值wolf.style.top = wolf_position[index].topwolf.style.left = wolf_position[index].left// 添加到box后面box.appendChild(wolf)// 随机出来的是小灰灰还是灰太狼var n = Math.floor(Math.random() * 10)c = ""if (n >= 3) {c = "h"} else {c = "x"}// 定义狼的下标轮播效果var Wolfindex = 0// 狼轮播// addWolf(c)wolfLuntimer = setInterval(function () {// 轮播// addWolf(c)wolf.src = "img/" + c + Wolfindex + ".png"Wolfindex++if (Wolfindex > 5) {clearInterval(wolfLuntimer)}}, 50)// 定义下标为5var downIndex = 5// 让狼下降,要延迟下降wolfDowntimer = setTimeout(function () {// 延时器里执行定时器downWolftimer = setInterval(function () {wolf.src = "img/" + c + downIndex + ".png"downIndex--if (downIndex == -1) {// downIndex = 5// clearInterval(downWolftimer)// clearTimeout(wolfDowntimer)// 移除元素box.removeChild(wolf)}}, 50)}, 1000)// 传入参数wolfScore(wolf)}// 批量显示function showWolf() {wolfTimer = setInterval(function () {addWolf()}, 1300)}// 不能连续击打var strike = 0// 打狼得分function wolfScore(wolf) {wolf.onclick = function () {if (strike == 0) {strike = 1console.log(1);// 打击前关闭下降动画clearTimeout(wolfDowntimer)clearInterval(downWolftimer)// 判断是小灰灰还是灰太狼if (c == "h") {s += 10} else {s -= 10}score.innerHTML = s// 如果小于0 不扣不变为负数if (score.innerHTML < 0) {score.innerHTML = 0}var koindex = 5// 被打中的动画wolf_ko = setInterval(function () {wolf.src = "img/" + c + koindex + ".png"koindex++if (koindex > 9) {clearInterval(wolf_ko)box.removeChild(wolf)strike = 0}}, 50)}}}// 重新开始function resetBtn() {// 隐藏当前按钮resetBox.onclick = function () {// 隐藏当前按钮this.style.display = "none"gameOverbox.style.display = "none"// 进度条填满timeWidth = 180timeBox.style.width = timeWidth + "px"// 调用进度条progressStart()// 重新赋值得分s = 0score.innerHTML = sshowWolf()wolfScore()}}}
</script>
</html>

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

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

相关文章

OC-字符串

前言 本篇文章介绍OC的字符串 字符串常量 要使用Objective-C语言创建一个常量字符串对象&#xff0c;需要在字符串开头放置 一个字符&#xff0c;下面的语句创建了一个常量字符串 "Programoning is fun" NSLog NSLog函数可以打印格式化对象&#xff0c;类似于C语…

JavaScript进阶教程- 箭头函数和this关键字

在JavaScript中&#xff0c;箭头函数是ES6中引入的一种新的函数语法。它们提供了一种更简洁的方式来写函数&#xff0c;并且对 this 关键字的行为有特殊的处理。 箭头函数&#xff08;Arrow Functions&#xff09; 箭头函数使用一个“箭头”&#xff08;>&#xff09;定义…

数据结构之树

树 前面文章讲的线性表&#xff0c;不论数组还是链&#xff0c;都是“一对一”的关系&#xff0c;本文章节让我们来认识一下“一对多”关系的数据结构——树&#xff08;Tree&#xff09;。 树结构分为二叉树和三叉树等&#xff0c;如下图所示。常用的就是二叉树&#xff0c;因…

深度学习(5)--Keras实战

目录 一.Keras基础概念 二.如何跑通Keras项目 2.1.在cmd上跑通 2.2.在PyCharm上跑通 一.Keras基础概念 Keras是深度学习中的一个神经网络框架&#xff0c;是一个高级神经网络API&#xff0c;用Python编写&#xff0c;可以在TensorFlow&#xff0c;CNTK或Theano之上运行。 …

开发相关的工具及AI算法调研【降本增效】

前置说明: 看各个章节总结即可了解章节调研结果 开发降本增效调研可用工具参考以下几块: 总结 以下是实现软件开发降本增效的主要流程,将调研涉及该过程的可用工具或方法。 1、需求收集和分析 效率从软件项目的最初阶段开始——需求收集和分析阶段。这一阶段经常被忽视…

如何保护电脑数据?电脑数据怎么保护?

电脑会储存大量的重要数据&#xff0c;而为了避免数据泄露&#xff0c;必须要使用专业的方式进行保护。那么&#xff0c;要如何保护电脑数据呢&#xff1f;下面我们就来了解一下。 文件夹加密超级大师 文件夹加密超级大师是一款专业的电脑数据加密软件&#xff0c;拥有强大的文…

医疗天使禅道使用工作流程:优化医疗服务的必经之路

目录 博客前言 医疗天使禅道使用工作流程 一.使用最高管理员账号admin管理组织结构 1.新增用户 产品经理使用禅道 1.创建产品 2.添加产品模块​编辑 3.添加产品计划 4.添加产品需求 5.创建项目 6.设置团队 项目经理使用禅道 1.关联需求 2.分解任务 测试主管使用禅…

Swiper轮播图后端接口实现

mybatis-plus:global-config:db-config:id-type: auto #id生成规则&#xff1a;数据库id自增configuration:map-underscore-to-camel-case: false # 开启驼峰功能auto-mapping-behavior: full # 自动映射任何复杂的结果log-impl: org.apache.ibatis.logging.stdout.StdOutImpl…

200G数据中心:QSFP56和QSFP-DD光模块如何选择?

随着光通信与互联网技术的迅猛发展&#xff0c;网络数据流量的需求呈指数级增长&#xff0c;电信骨干网流量年均增速高达50%至80%。为了应对日益攀升的数据传输需求&#xff0c;光通信速率实现了从10G、25G、40G到当前主流的100G、200G、400G甚至更高规格的持续演进。 在此背景…

Flutter中状态管理选项的比较:利弊探索

Flutter 应用程序开发的一个关键方面是管理状态&#xff0c;这确保了整个应用程序的数据一致性和更新。然而&#xff0c;Flutter 提供了多种状态管理解决方案&#xff0c;每种解决方案都有自己的优缺点。在这篇博客中&#xff0c;我们将探讨 Flutter 中一些流行的状态管理选项&…

TestNG @BeforeClass 注解

目录 那么&#xff0c;这个带BeforeClass注释的方法什么时候执行呢&#xff1f; 如果我们在一个类中放置多个BeforeClass注释方法会发生什么&#xff1f; 在这篇文章中&#xff0c;我们将讨论TestNG中的BeforeClass注释。BeforeClass注释方法将在特定类的测试用例之前运行。…

Linux-共享内存

文章目录 前言一、system V共享内存申请共享内存挂载共享内存删除共享内存挂载删除共享内存 二、示例代码三.运行效果 前言 在这之前我们已经学习了两种进程间通信方式&#xff1a;匿名管道和命名管道。 从我们之前的学习已经知道&#xff0c;想让多个进程间进行通信就需要让他…

Spring框架--Spring入门实验二之依赖注入

目录 引言 1、依赖注入之setter注入 2、依赖注入之构造器注入 3、为类类型属性赋值&#xff08;依赖注入之对象注入&#xff09; 4、为数组类型属性赋值 引言 Spring框架中的依赖注入&#xff08;Dependency Injection&#xff0c;DI&#xff09;是一种设计模式和编程实践…

前端JavaScript篇之intanceof 操作符的实现原理及实现、为什么0.1+0.2 ! == 0.3,如何让其相等

目录 intanceof 操作符的实现原理及实现为什么0.10.2 ! 0.3&#xff0c;如何让其相等 intanceof 操作符的实现原理及实现 instanceof 是一个用于检查对象是否属于特定类的 JavaScript 操作符。它返回一个布尔值&#xff0c;指示对象是否是特定类的实例或者原型链中是否存在该…

Tensorflow 中的损失函数 —— loss 专题汇总

回归和分类是监督学习中的两个大类。自学过程中&#xff0c;阅读别人代码时经常看到不同种类的损失函数&#xff0c;到底 Tensorflow 中有多少自带的损失函数呢&#xff0c;什么情况下使用什么样的损失函数&#xff1f;这次就来汇总介绍一下。 一、处理回归问题 1. tf.losses…

Vue组件点击事件不触发的问题,添加事件修饰符native解决

目录 一、父组件在子组件上绑定方法&#xff0c;点击不触发 .native是什么&#xff1f; 二、其他事件修饰符 .stop .prevent .capture .self .once .passive 三、子组件触发父组件方法 四、父组件调用子组件方法 一、父组件在子组件上绑定方法&#xff0c;点击不触发…

常见の算法

前言本文主要使用Java 什么&#xff0c;是快乐星球#&#xffe5;%……什么是算法&#xff1f; 算法是一组完成任务的指令。任何代码片段都可视为算法&#xff0c;但我们主要介绍常见算法 一、引入——二分查找 二分查找是一种算法&#xff0c;其输入是一个有序的元素列表。如…

java获取一段音频/mp3的时长

引言 在日常开发中&#xff0c;经常会遇到产品经理提出一个需求“上传音乐/音频”&#xff0c;而且还得显示出音频的播放时长。那我们直接世界上最简单的实现方案&#xff0c;必须是最简单&#xff0c;多一句啰嗦不准点赞。 How to do 1.提前引入包 <!--视频多媒体工具包…

浏览器实用:禁止浏览器http自动转成https

前言 因为有些网站支持http和https两种协议访问&#xff0c;有些只支持一种协议访问。但根据动态域名安全策略&#xff08;HSTS&#xff09;&#xff0c;只要该域名在浏览器中访问过一次https&#xff0c;那么浏览器将强制使http的请求变为https。 虽然这条浏览器的策略有利于提…

【oshi-core依赖】Java获取计算机的内存信息、磁盘信息、CPU信息

这篇文章,主要介绍Java如何获取计算机内存信息、磁盘信息、CPU信息【知识星球】。 目录 一、获取系统信息 1.1、引入依赖 1.2、SystemInfo类