一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第7天,点击查看活动详情。
效果图
分析
首先是分析打地鼠中涉及到的方法、变量以及逻辑。
变量
变量名称 | 标识符 | 备注 |
---|---|---|
score | 得分 | 每成功击中一只地鼠得一分,初始为0分 |
times | 剩余次数 | 每次点击,若未击中地鼠,则扣除1次次数,扣至0时本轮游戏结束,默认为3次 |
speed | 速度 | 地鼠出现的速度,值会随着分数的增加而阶段式的减少,单位毫秒,初始值为1000 |
state | 游戏状态 | 游戏处于进行中是值为 true ,处于暂停中则为 false |
holeActive | 地鼠所在的洞 | 当前是哪个洞出现地鼠,其值在定时器中改变 |
timer | 定时器 | 定时器是游戏的核心 |
HEAD | 第一个洞的编号 | HEAD和END弄成变量,增加了游戏的自定义性 |
END | 最后一个洞的编号 | END的值要和页面上的洞的数量保持一致 |
方法
方法名 | 标识符 | 备注 |
---|---|---|
初始化 | init | 将一些与游戏相关的参数重新赋值,像剩余次数,得分,速度等等 |
开始游戏 | startGame | 设定定时器 |
暂停游戏 | stopGame | 把定时器清除,以达到暂停游戏的目的 |
改变游戏状态 | changeState | 把游戏在开始和暂停直接切换 |
设置游戏速度 | setSpeed | 用于当分数达到某个目标后改变游戏的速度 |
获取指定区间的随机数 | randomFrom | 获取[m,n] 区间的整数 |
打地鼠 | hitIt | 判断是否击打中地鼠,未中则扣除次数 |
逻辑
- 在
created
周期中执行init
方法对游戏参数进行初始化; - 在
watch
中监控times
和score
的值的变化,当times
值变为0时,游戏结束,执行init
进行初始化;当score
的值变化至某个区间时,速度speed
会改变成对应的值。 - 游戏是通过定时器动起来的,通过清除定时器来停止的;
实现
为了减少代码的占比,这里就把代码部分用图片贴上来啦
HTML
JavaScript
methods
击打地鼠方法
/**
* 击打方法
*/
hitIt(number) {
// 暂停不能继续
if (!this.state) return;
if (number === this.holeActive) {
this.score++;
this.holeActive = null; // 以免两次随机到同一个值,造成页面卡顿的假象
} else {
// 打不中的话
this.times.pop(); // 剩余次数减1
}
}
这个方法里面之所以要把 holeActive
的值设为 null
,是为了防止当前后两次都随机到同一个数字的时候,地鼠长时间停留在一个洞里,设为 null
则可以造成老师被击打中后消失不见的现象。