使用Vue写一个简单的欢乐消除游戏

很多朋友对于使用Vue写一个简单的欢乐消除游戏和不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！

效果展示#

我这里放一下最终的效果，这还是一个比较简陋的版本。如果您有什么想法，请评论。

游戏规则：

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

任意两个方块都可以拖动

界面设计#

页面的布局比较简单。网格数据采用二维数组的形式。到这里，大家应该已经明白界面是如何制作的了。

大家应该都注意到了：class='_item'的写法。该类是动态命名的，因此每种类型的块的颜色都不同。最终可以按照同色消除玩法进行操作。

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

同时，当玩家点击方块时，方块会左右摆动，表示方块被选中，这也可以提高游戏的灵活性。实现HTML 动画的方法有很多种。这里我们使用CSS动画来操作。代码如下：

复制@关键帧抖动{从50到{transform:旋转(0deg); } 10%, 30% { 变换： 旋转(10deg); } 20% { 变换： 旋转(20deg); } 60%, 80% { 变换： 旋转(-10 度); } 70% { 变换： 旋转(-20deg); }}/*只要用户不点击，动画就不会停止*/.square:active{animation-name: jitter;动画持续时间： 0.5s；动画-迭代计数：无限；}

核心算法#

消除算法

上面说过，我之前做过一道题，就是判断一个二维数组中是否存在可消除的元素，如果有的话有多少。

这里我们可以这样想。首先我们遍历整个二维数组，定义一个X0，然后我们记录这四个变量。只要|X0-X1+1|=3或者|Y0-Y1+1|=3，我们就可以将这个正方形的坐标添加到del数组中。

遍历完整个二维数组后，我们可以将del数组中坐标位置对应的方格内容改为‘0’。由于我们没有为0 定义样式，因此在执行下降算法之前变为0 的方块是白色的。

坠落算法

当我们将相应的块变成白色后，它上面的块应该掉落，这就是我的想法。

按列遍历二维数组，定义一个指针t，指向上次不为0的方格位置。一旦遇到方格不为0的方格，就会与t指向的方格交换，以此类推。示意图如下：

这样我们就可以在不打乱顺序的情况下将空的方格移到顶部，然后我们就可以随机填充顶部的空方格了。填充完毕后，我们需要再次执行消除算法，直到del数组的长度为空。这个大家应该都能想象得到。

代码如下

Copyclear(): void { const m: 数字=10;常量n: 数字=10; while (true) { const del: any[]=[]; for (let i: number=0; i m; i++) { for (let j: number=0; j n; j++) { if (this.squareData[i][j]==='0') { continue; } } } 让x0: 数字=i;让x1: 数字=i;让y0: 数字=j;让y1: 数字=j; while (x0=0 x0 i - 3 this.squareData[x0][j]===this.squareData[i][j]) { --x0; while (x1 m x1 i + 3 this .squareData[x1][j]===this.squareData[i][j]) { ++x1; while (y0=0 y0 j - 3 this.squareData[i][y0]===this.squareData[i][j]) { --y0; while (y1 n y1 j + 3 this.squareData[i][y1]===this.squareData[i][j]) { ++y1; } if (x1 - x0 3 || y1 - y0 3) { del.push([i, j]); } } } if (del.length===0) { 中断； } this.score +=del.length ; for (del 的const square) { this.$set(this.squareData[square[0]], square[1], '0'); } for (让j: 数字=0; j n; ++j) { 让t: 数字=m - 1; for (let i: number=m - 1; i=0; --i) { if (this.squareData[i][j] !=='0') { [this.squareData [t][j], this .squareData[i][j]]=[this.squareData[i][j], this.squareData[t][j]]; t-=1； } } } }} ,

游戏结束

当分数为0时游戏结束，此时执行初始化函数，重新生成欢乐淘汰格，并将分数初始化为10。

Copyif (this.score=0) { if (confirm('分数用完~~')) { this.init(); } } else { this.init(); } }