DMV2开发记录（三）我写了个打月饼的小游戏~

前情提要 中秋节那会就想做个小游戏玩玩 突然想到以前4399那些做饭系列小游戏 稍加思索 冻手！

效果图↓↓↓

游戏规则

1、游戏时间120秒 在时间内尽可能做多的月饼

2、开始后每5秒会随机出现一位客人 并告诉你他想要的月饼 （速速给我现做）

3、每完成一个月饼获得对应分数 材料越多的月饼分数越高

4、做错了 可以倒掉 不会扣分 但是就浪费时间了

5、来客人时如果排长龙了 就会跑客

6、如果做了个月饼 没有客人想要的 会扣分

玩法

首先介绍一下材料先

然后按照客人的要求 比如

那就需要点击一个 豆沙馅然后点一个 玉兔兽饼皮 然后点一下锤子敲一下， 就会交货了

玩法很简单 没啦

然后说说怎么进入吧

首先点这个 → http://106.55.53.206/digivice/index.html#/

进去小游戏之后就可以看见了 (plus是变态版 比较恐怖)

然后来说说实现吧

实现起来其实挺简单的

1、 定义顾客列表

2、 定义月饼种类

3、 定时器固定周期去 随机抓一个顾客 和 一个月饼搭配起来 把这个结果push到一个队伍列表中

完事

获取随机月饼 顾客同理

const cakeList = [{}, {}, {}, {}]
// x >= min && x < max
const getRandomNum = (min, max) => {
  return Math.floor(Math.random() * (min - max) + max)
}

// 获得一个随机月饼配置
const getRandomCake = () => {
    return cakeList[getRandomNum(0, 4)]
}

结果匹配

怎么才能知道这个月饼做的对不对呢

首先用户选择的馅料是乱序的 先选啥都行 这样就想到要先排序了

const moonCake = {
    label: '玉兔兽-双黄豆沙月饼',
    needItems: ['I1', 'I4', 'I4', 'L3'],
    score: 90
}

const data = "用户提交的答案 也是数组来着"
// 将所需的道具列表 先排序后拼接为字符串 进行对比
if (moonCake.needItems.sort().join('') === data.sort().join('')) {
    // 这样子就是答对啦
} else {
    // 那这样子就没匹配到
}

其他小细节

界面适配问题

有一些长宽比比较尬的手机 就比较长的那种 会导致 操作台向上偏移了

因为懒得动态算 所以做了一个缩小ui的功能

给容器加个动态style就行

<span class="zoom-ui" @click="zoomSize -= 0.05, zoomBottom -= 2.5">缩小UI</span>

:style="{transform: `scale(${zoomSize})`, bottom: `${zoomBottom}%`}"

数据统计

这个没啥说的 就做对 做错 重做 跑客的时候加一下就行

statisData: {
    totalScore: 0, // 总分数
    successTimes: 0, // 成功次数
    failTimes: 0, // 失败次数
    throwTimes: 0, // 重做次数
    lostCustomerTimes: 0 // 跑客次数
}

顾客移除

做对月饼之后 需要展示一下下爱心 然后把顾客移除队列

我用一个success字段标识顾客是否完成

this.$set(this.currentCustomerList[customerIndex], 'success', true)

setTimeout(() => {
    this.currentCustomerList.splice(顾客的索引, 1)
}, 500)

移除定时器

大家日常开发的时候也要记得 使用了定时器及时移除

用户手机卡了 我就赖手机配置跟不上

beforeDestroy() {
    if (this.timer || this.lostTimeTimer) {
      this.clearAllTimer()
    }
},
methods: {
    clearAllTimer() {
      clearInterval(this.timer)
      clearInterval(this.lostTimeTimer)
      this.timer = null
      this.lostTimeTimer = null
    }
}

其他注意的

比如 动画使用 transform 尽量不涉及 dom 重排的动画

比如 ...... 我也记不住了 像width height 这些 就会导致重排

大家有兴趣去了解一下吧 我就不展开说了

最后最后

没啦 小游戏里面还有个翻卡牌 和 拼图小游戏 有机会再写一写

有兴趣的朋友可以加群一起玩？(没什么人就是了) 在游戏主页的左下角

蟹蟹大家 你又浪费了10分钟 看这篇文章