Day30 - Whack A Mole
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:30天完成30个JS原生开发项目挑战视频教程。JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。
效果如下
第30天挑战主要是通过JS原生实现打地鼠游戏,点击开始按钮,地鼠随机在6个地洞中出现,敲中地鼠得即增加一分。
HTML 代码
1 |
|
- 开始游戏的按钮
1 | <button onClick="startGame()">Start!</button> |
- 展示所得分数
1 | <h1>Whack-a-mole! <span class="score">0</span></h1> |
- 地洞、地鼠
1 | <div class="game"> |
hole
为地洞,地洞中有一个地鼠mole
。
CSS 代码
1 | html { |
dirt.svg
为地洞的图片mole.svg
为地鼠的图片
JS代码
1 | <script> |
- 获取所有的地洞、得分、地鼠标签
1 | const holes = document.querySelectorAll('.hole'); |
- 初始化变量
1 | let lastHole; //用于存储上一次的地洞,主要用于和下一次做对比 |
- 事件监听
1 | <!--敲中地鼠,调用bonk方法--> |
- isTrusted属性
1 | function bonk(e) { |
Event
界面的 isTrusted
只读属性为一个布林值,若事件物件是由使用者操作而产生,則 isTrusted
值为 true。若事件物件是由程式码所建立、修改,或是透过 EventTarget.dispatchEvent()
来触发,则isTrusted
值为 false
。
- 开始游戏
1 | function startGame() { |
- randomTime设置一个
min - max
之间的随机数
1 | Math.round( 20.49); // 20 |
1 | function randomTime(min, max) { |
- randomHole函数
1 | Math.floor( 45.95); // 45 |
1 | //随机选出一个地洞,用于弹出地鼠 |
- peep()函数
1 | // 地鼠、地洞处理函数 |