【JavaScript】简易打地鼠游戏

步骤分析：

获取相关元素
1.1 开始按钮
1.2 分数框
1.3 所有的地鼠洞
给开始按钮定义函数startGame
2.1 隐藏开始按钮
2.2 清除分数为0: 允许多次玩
2.3 开启定时器: 间隔时间自定义
2.3.1 获取随机整数: 0-地鼠洞长度之间
2.3.2 给随机数对应的地鼠洞添加up类(显示地鼠)
2.3.3 给当前地鼠洞增加一个延时器: 到时自动清除up类(隐藏地鼠)
给所有的地鼠(mole)增加点击事件
3.1 获取所有的地鼠
3.2 给所有的地鼠绑定点击事件
3.3 干掉地鼠对应的洞的类up
3.4 增加分数的数量
3.5 清理地鼠所在洞本身的延时器

最终的效果：

html部分

<h1>Whack-a-mole! <span class="score">0</span></h1><p><button class="start">Start</button></p><div class="game"><div class="hole hole1"><div class="mole"></div></div><div class="hole hole2"><div class="mole"></div></div><div class="hole hole3"><div class="mole"></div></div><div class="hole hole4"><div class="mole"></div></div><div class="hole hole5"><div class="mole"></div></div><div class="hole hole6"><div class="mole"></div></div></div><h2 class="game-status"></h2>//引入js文件<script src="./index.js"></script>

css部分

         html {box-sizing: border-box;font-size: 10px;background: #ffc600;}*,*:before,*:after {box-sizing: inherit;}body {padding: 0;margin: 0;font-family: 'Amatic SC', cursive;}h1,h2 {text-align: center;font-size: 10rem;line-height: 1;margin-bottom: 0;}h2 {font-size: 8rem;}.score {background: rgba(255, 255, 255, 0.2);padding: 0 3rem;line-height: 1;border-radius: 1rem;}p {height: 5rem;text-align: center;}button {margin: 0 auto;width: 10rem;font-size: 3rem;font-family: 'Amatic SC', cursive;-webkit-appearance: none;appearance: none;font-weight: bold;background: rgba(255, 255, 255, 0.2);border: 1px solid black;border-radius: 1rem;}.game {width: 600px;height: 400px;display: flex;flex-wrap: wrap;margin: 0 auto;}.hole {flex: 1 0 33.33%;overflow: hidden;position: relative;}.hole:after {display: block;background: url(dirt.svg) bottom center no-repeat;background-size: contain;content: '';width: 100%;height: 70px;position: absolute;z-index: 2;bottom: -30px;}.mole {background: url('mole.svg') bottom center no-repeat;background-size: 60%;position: absolute;top: 70%;width: 100%;height: 100%;transition: all 0.4s;}.hole.up .mole {top: 0;}

js部分

 window.addEventListener('load', () => {// 获取元素let start = document.querySelector('.start')    // 开始按钮let mole = document.querySelectorAll('.mole')    // 打鼹鼠let score = document.querySelector('.score')    // 数字文本let timerId     // 定时句柄let index       // 随机数索引let num = 0     // 击打次数// 开始添加点击事件start.addEventListener('click', () => {// 重新点击开始，击打次数清零num = 0score.innerHTML = numstart.style.display = 'none'    // 隐藏开始按钮，以防多次点击出现定时器bugtimerId = setInterval(() => {       // 添加打地鼠定时器// 生成随机数index = parseInt(Math.random() * mole.length)mole[index].style.top = '0%'        // 设置地鼠样式从下往上出来time = setTimeout(() => {           // 添加定时器嵌套延时器，延时器只执行一遍mole[index].style.top = '70%'      // 设置地鼠样式钻回地底}, 500)}, 1000)// 添加倒计时10秒后停止打地鼠定时器setInterval(() => {start.style.display = 'block'clearInterval(timerId)}, 10000)})// 点击敲打鼹鼠mole.forEach((value, index) => {value.addEventListener('click', () => {mole[index].style.top = '70%'num++score.innerHTML = num})});

【JavaScript】简易打地鼠游戏相关推荐

android第十二章简易打地鼠游戏,MouseGame
MouseGame android简易打地鼠在布局方面,整体是一个线性布局,最下方是由两个按钮和一个文本组成关于上方的游戏画面,有两种设计思想 1.最外层采用帧布局,设置背景为有9个空洞的那张图片 ...
JavaScript案例——打地鼠游戏及其实现
这是一个打地鼠游戏,废话不多说,直接上代码 <!DOCTYPE html> <html><head><meta charset="UTF-8&quo ...
JavaScript实现“打地鼠”游戏开发（3）——锤子的显示及游戏音效的添加（基于H5+CSS3+JS+jQuery实现）
说明: 上一节我们实现了打地鼠游戏的主体功能,包括:老鼠的随机出现.击中目标后分数增加,倒计时为0时游戏结束等功能.接下来我们将对游戏音效的添加.锤子效果的实现进行具体实现. 这是前两节的地址链接: ...
【JavaScript】- 打地鼠游戏(定时器嵌套延时器)
这里使用了定时器嵌套延时器的方法 js: window.addEventListener('load', () => {// 获取元素let start = document.querySele ...
一个由java实现的打地鼠游戏
注释很明了,直接就上代码的哈! 打地鼠游戏 package test;import java.awt.EventQueue; import java.awt.event.MouseAdapter; i ...
linux打地鼠游戏代码,JavaScript实现打地鼠小游戏
一.实验说明 1. 环境介绍本实验环境采用Ubuntu Linux桌面环境,实验中会用到桌面上的程序: Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令 Fir ...
Javascript开发的金山打字简易小游戏
记得以前读书的时候,由于课前都预习过了,所以听课一般都是为了给老师面子很"耐心"的坐在教室里,发着呆走着神.突然,那天上课讲了几天前预习的课题,采用JS可以识别键盘输入,嘿嘿,好玩 ...
模拟简易的打地鼠游戏
//模拟打地鼠游戏脚本 using UnityEngine; using System.Collections.Generic;public class SctrptTow : MonoBehavio ...
javascript写打地鼠
打地鼠游戏有两个比较重要的js函数:setTimeout()和setInterval(),setTimeout()用于在指定毫秒后调用函数或者计算表达式,但是只执行一次,可通过创建一个函数循环重复调用 ...
linux qt5.7下打地鼠源程序,QT实现简单打地鼠游戏
本文实例为大家分享了QT实现简单打地鼠游戏的具体代码,供大家参考,具体内容如下开发工具:VS2017,qt5.9.8 开发语言:c++ 实现功能: 有若干地鼠洞,每次出现一只地鼠,当击中地鼠后,分数 ...

【JavaScript】简易打地鼠游戏

步骤分析：

最终的效果：

html部分

css部分

js部分

【JavaScript】简易打地鼠游戏相关推荐

最新文章

热门文章