【Vue】用Vue2写个低配打地鼠

360 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第7天,点击查看活动详情

效果图

Vizard_20220416_003315.gif

分析

首先是分析打地鼠中涉及到的方法、变量以及逻辑。

变量

变量名称标识符备注
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判断是否击打中地鼠,未中则扣除次数

逻辑

  1. created 周期中执行 init 方法对游戏参数进行初始化;
  2. watch 中监控 timesscore 的值的变化,当 times 值变为0时,游戏结束,执行 init 进行初始化;当 score 的值变化至某个区间时,速度 speed 会改变成对应的值。
  3. 游戏是通过定时器动起来的,通过清除定时器来停止的;

实现

为了减少代码的占比,这里就把代码部分用图片贴上来啦

HTML

image.png

JavaScript

image.png

methods

image.png

image.png

击打地鼠方法

/**
 * 击打方法
 */
hitIt(number) {
    // 暂停不能继续
    if (!this.state) return;
    if (number === this.holeActive) {
        this.score++;
        this.holeActive = null; // 以免两次随机到同一个值,造成页面卡顿的假象
    } else {
        // 打不中的话
        this.times.pop(); // 剩余次数减1
    }
}

这个方法里面之所以要把 holeActive 的值设为 null,是为了防止当前后两次都随机到同一个数字的时候,地鼠长时间停留在一个洞里,设为 null 则可以造成老师被击打中后消失不见的现象。