Vue实现开心消消乐游戏算法

之前做过一个算法题，算法要求就是写一个开心消消乐的逻辑算法，当时也是考虑了一段时间才做出来。后来想了想，既然核心算法都有了，能不能实现一个开心消消乐的小游戏呢，于是花了两天时间做了一个小游戏出来。

效果展示#

先在这里放一个最终实现的效果，还是一个比较初级的版本，大家有什么想法欢迎评论哦

游戏规则：

初始时会给玩家十分的初始分，每拖动一次就减一分，每消除一个方块就加一分，直到最后分数为0游戏结束

任意两个方块都可以拖动

界面设计#

页面的布局比较简单，格子的数据是一个二维数组的形式，说到这里大家应该已经明白界面是怎么做的了。

<div
 v-for="(item, index) in squareData"
 :key="index"
 class="row">
 <div
  v-for="(_item, _index) in item"
  :key="_index"
  class="square"
  :class="_item"
  @mousedown="dragStart(index, _index)"
  @mouseup="dragEnd">
  {{_item}}
 </div>
</div>

大家应该注意到了 :

class="_item"

的写法，动态命名class，使得其每个种类的方块的颜色都不同，最后可以按照同色消除的玩法就行操作。

.square.A{
 background-color: #8D98CA;
}
.square.S{
 background-color: #A9A2F6;
}
/*其余操作相同*/

同时在玩家点击方块的时候方块会左右摆动以表示选中了此方块，还可以提升游戏的灵动性。关于HTML动画的实现方式有很多，在这里我们使用CSS animation进行操作，代码如下：

@keyframes jitter {
 from, 50%, to {
  transform: rotate(0deg);
 }
 10%, 30% {
  transform: rotate(10deg);
 }
 20% {
  transform: rotate(20deg);
 }
 60%, 80% {
  transform: rotate(-10deg);
 }
 70% {
  transform: rotate(-20deg);
 }
}
/* 只要是用户点击不动，动画就不会停止 */
.square:active{
 animation-name: jitter;
 animation-duration: 0.5s;
 animation-iteration-count: infinite;
}

核心算法#

消除算法

上面提到我之前是做过一道题是判断一个二维数组中有没有可消的元素，有的话是多少个。

在这里我们可以这样想，最开始遍历一整个二维数组，每次定义一个 X0 , X1 , Y0, Y1, 然后每次计算其上下左右连续相同方块的位置，在这个过程中要注意边界问题，然后我们记录下这四个变量，只要 |X0-X1+1|>=3 或者 |Y0-Y1+1|>=3，我们就可以将这个方块的坐标加入到 del数组中。