我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

月饼配对消消乐

引言

问为什么想起来弄个这？

因为在地铁上，看到有人玩 消消乐😂！

这还犹豫什么，中秋的 月饼 有辣么多种类，这灵感创意不就来了么，必须搞一个 月饼配对消消乐

项目截图

技术栈

看到 码上掘金 上面出了 vue3，不多说直接用 vue3 来实现。

但是后面出问题了：

• 不知道为什么，码上掘金 上面 vue3 的代码，无法执行，一直报错😭

有人知道为什么吗？ 评论区告诉我下吧🙆！

• 不行联系 掘金大大们 解决下！

无奈，这里目前先只能打个包，将 vue3 代码放上去

月饼配对消消乐 的 码上掘金 体验地址：

code.juejin.cn/pen/7140180…

下面是 月饼配对消消乐 完整的 vue3 代码地址：

https://code.juejin.cn/pen/7140889597847797790

实现

使用到的知识点：

• vue3 控制 css样式，并且动态处理

• 数组操作

• 计时器

• 防抖

页面搭建

先在页面上弄个 6*6 大小的网格，这看似很简单，来通过对一个 二维矩阵 直接两次 for 循环 遍历即可

但是在造数据方面，就用到了数组的知识点，还是挺重要的

首先是创建 6*6 的数据，先设置里面都为空

const moons = Array.from(new Array(6), () => new Array(6).fill('')) // 二维数组

结果如下：

• Array.from

  这里用到了 Array.from，它拥有有三个参数 (object,mapFunction,thisValue), 会返回一个数组

  object 是 必传 的，是一个可迭代对象即可

  mapFunction 是 可选 的，使用：(item,index){return } 里面 return 返回的值， 将会插入到数组中

  thisValue 是 可选 的，这个值没怎么用过。执行回调函数 mapFunction 时 this 对象

  详情可看 官方文档

• new Array(6)

  • 可以传入 单个 数字类型的 参数，也可以

  • 多个参数

    则会创建一个包含 所有传入参数 的新数组

  详情可看 官方文档

  

月饼类型

这里选择了 6种 常见的月饼味道，看看你熟悉不：

玫瑰花，枣泥，流心奶黄，五仁，椰蓉，鲜肉

以 玫瑰花月饼 举🌰，顺便设置下所需的参数：

key: 'MGH', // 月饼唯一标识
name: '玫瑰花', // 月饼名
color: '#ffc0cb', // 该月饼的颜色

defaultColor: '#fff', // 月饼背面 的颜色
show: false, // false 则标识 背面 ，true 则代表月饼正面
hidden: false, // 月饼是否显示

通过上面的 🌰子，我们来通过概率，随机创建月饼数据

  const num = getRandom(0, 10)

  const number = 1.66 // 10/6
  const obj = {
    defaultColor: '#fff',
    show: false,
    hidden: false
  }
  if (num <= number * 1) {
    return {
      key: 'MGH',
      name: '玫瑰花',
      color: '#ffc0cb',
      ...obj
    }
  }

  if (num > number * 1 && num <= number * 2) {
    return {
      key: 'ZN',
      name: '枣泥',
      color: '#452333',
      ...obj
    }
  }

  if (num > number * 2 && num <= number * 3) {
    return {
      key: 'LXNH',
      name: '流心奶黄',
      color: '#fbff27',
      ...obj
    }
  }

  if (num > number * 3 && num <= number * 4) {
    return {
      key: 'WR',
      name: '五仁',
      color: '#923a36',
      ...obj
    }
  }

  if (num > number * 4 && num <= number * 5) {
    return {
      key: 'YR',
      name: '椰蓉',
      color: '#8ce600',
      ...obj
    }
  }

  if (num > number * 5) {
    return {
      key: 'XR',
      name: '鲜肉',
      color: '#f3ab85',
      ...obj
    }
  }

项目难点

难点来了，我们如何保证页面上的月饼，是 两两成对 呢？

步骤

可能一拍脑瓜子，这简单啊，分三步

• 按顺序位置，先随机生成一个 月 饼后

• 之后将这个 月饼 的属性保存下来

• 最后再随机找一个位置 深拷贝copy 过去不就行了

但是此时你就会发现，在第三步 随机位置 时，如果该位置已经存在月饼的话，则需要你再次随机找，就很消耗性能。

优化

所以，这里为了优化，重新理一下思路

• 首先生成一个 list 数组，里面存放这下表位置，即 [0,1,2,3,...35]

• 按顺序位置，先随机生成一个月饼后

• 之后将这个月饼的属性保存下来，获取到该月饼的位置，删除该月饼的位置 所对应的 list 值

• 从剩余 list 列表中，来随机一个位置，将月饼 深拷贝copy 过去。最后 再次删除该位置 所对应的 list 值

• 循环，直到 list 为空

代码比较多，这里放到 码上掘金 了

计时

为了让用户知道自己使用了多长时间，这里用到了计时操作！

并且保证 1分钟 后，游戏结束！

核心代码如下

const count = new Date().getTime() - date
state.date.minutes = handTimeMinutes('minutes', parseInt(count / 1000 / 60))
state.date.seconds = handTimeMinutes('seconds', parseInt((count / 1000) % 60))
state.date.millisecond = handTimeMillisecond(count % 1000)

const handTimeMinutes = (name, num) => {
  if (num < 10) {
    return '0' + num
  }
  return num
}

const handTimeMillisecond = (num) => {
  if (num < 10) {
    return '00' + num
  } else if (num < 100) {
    return '0' + num
  }
  return num
}

防抖

因为在点击两个 月饼 后，需要进行对比，展示一小会后，才能重新点击。

为了防止点击过快，这里添加了 防抖 的操作

防抖 代码如下：

function debounce(fn, delay) {
  let timer

  return function () {
    if (timer) clearInterval(timer)

    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}

总结

此次 月饼配对消消乐 项目

本以为很简单，但是发现用到的 知识点 是真的多！好在项目玩起来还挺有意思！

可以上手玩玩哟！

1分钟挑战！

想看到评论区用时最快的 掘友 ！