介绍

笔者在浏览Github时发现一个有趣的项目，因为最近在学习Vue，在Vue板块中发现了这样的一个项目，觉得比较还比较有意思，因此在本文中分享给大家，共同学习和进步！本文内容来源于Github！

Github

https://github.com/lcs1998/HappyEliminate

效果展示

• 游戏规则：

1. 初始时会给玩家十分的初始分，每拖动一次就减一分，每消除一个方块就加一分，直到最后分数为0游戏结束
2. 任意两个方块都可以拖动

界面设计

页面的布局比较简单，格子的数据是一个二维数组的形式。

<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数组中。遍历完一整个二维数组之后，我们就可以将 del数组中对应坐标位置的方块内容变为 '0', 由于我们没有对 0 定义样式，所以在没有执行下落算法之前变为 0 的方块为白色。

• 下落算法

在我们将相应的方块白色之后，其上面的方块应该下落，在这里我的思想是这个样子的。按照列遍历二维数组，定义一个指针 t，指向上次不为 0 的方块位置，一旦遇到方块不为 0 的格子就将其与t所指的方块就行交换，一次类推，示意图如下：

这样的话我们就可以把为空的上移到最顶层，并且不打乱顺序，然后我们在随机填充顶部的空方块就可以了。做完填充之后我们要再做一次消除算法，直到del数组的长度为空为止，这个道理大家应该都能想得到。

• 代码如下

clear(): void {
 const m: number = 10;
 const n: number = 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;
 }
 let x0: number = i;
 let x1: number = i;
 let y0: number = j;
 let y1: number = 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) {
 break;
 }
 this.score += del.length;
 for (const square of del) {
 this.$set(this.squareData[square[0]], square[1], '0');
 }
 for (let j: number = 0; j < n; ++j) {
 let t: number = 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.

if (this.score <= 0) {
 if (confirm('分数用光了哦~~')) {
 this.init();
 } else {
 this.init();
 }
 }

构建

克隆项目后依次如下（可以选择自己喜欢的构建工具）：

# 安装依赖
yarn install
//or yarn or npm install
# 启动编译热更新服务器
yarn serve
# 发布生产环境版本
yarn build
# 修复代码
yarn lint

总结

在文中最后啰嗦一句，目前Vue3.0版本的源代码已经开源，预计在不久的将来就会发布第一版，不知小伙伴们的typescript学习的如何了，对于Vue的3.0版本，你有什么想法？