我之前做过一个算法题，算法的要求是写一个逻辑算法好玩，考虑了一会就做出来了。后来，我想了想。现在核心算法都有了，能不能实现一个好玩的小游戏？所以我花了两天时间做了一个小游戏。

效果演示#

让我们在这里放一个最终的效果，或者一个相对初级的版本。你认为什么是欢迎评论

游戏规则：

一开始会给玩家一个10分的初始分数，每拖一次减一分，每淘汰一个方块加一分，直到最终分数为0。游戏结束了

任何两个方块都可以拖动

界面设计#

页面的布局比较简单，网格数据是二维数组的形式，应该已经知道界面是怎么做的了。

div v-for='(item，index)in square data ' : key=' index ' class=' row ' div v-for='(_ item，index)in item ' : key=' _ index ' class=' square ' :class='_item ' @ mouse down=' drag start(index，index)' @ mouse up=' drag end ' { _ item } }/div/div每个人都要注意： class=' _ item '的写法，动态命名

. square . a { background-color : # 8d 98 ca；} . square . s { background-color : # A9A2F 6；}/*其他操作相同*/同时玩家点击方块时，方块会左右摆动，表示方块被选中，也可以提高游戏的敏捷度。HTML动画的实现方式有很多。这里我们用CSS动画来操作。代码如下：

@关键帧抖动{从，50%到{ transform : rotate(0 deg)}；} 10%，30% { transform:旋转(10度)；} 20% { transform : rotate(20度)；} 60%，80% { transform : rotate(-10 deg)；} 70% { transform : rotate(-20 deg)；}}/*只要用户不点击，动画就不会停止*/。方块：活动{动画-名称：抖动；动画-时长0.5s动画-迭代-count:无限；}核心算法#

消除算法

如上所述，我之前做过一个问题，就是判断二维数组中是否有可擦除的元素，如果有，有多少。

在这里，我们可以这样想：一开始，我们遍历整个二维数组，一次定义一个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:个数=10;while(true){ const del : any[]=[]；用于(设i:数=0;我是；i ) {对于(让j:数=0;j n；j){ if(这个。squaredata[I][j]===' 0 '){继续；}让x0:数=我；设x1:数=我；设y0:数=j；设y1:数=j；而(x0=0x 0 I-3这个。squaredata[x0][j]==这个。square data[I][j]){-x0；} while(x1 m x1 I 3这个。squaredata[x1][j]==这个。square data[I][j]){ x1；} while(y0=0 y0 j-3这个。squaredata[I][y0]==这个。square data[I][j]){-y0；} while(y1 n y1 j 3这个。squaredata[I][y1]==这个。square data[I][j]){ y1；} if(x1-x0 3 | | y1-y0 3){ del。推([I，j])；} } } if(del。长度===0){ break；}这个。分数=del。长度；对于（常数平方的del){ 0这个$ set(这个。squaredata[square[0]]，square[1]，' 0 ')；}对于(让j:的数字=0;j n；j) {让t:数=m-1；用于(设i:数=m-1；I=0；- i) { if (this.squareData[i][j]！=='0') { [this.squareData[t][j]，这个。square data[I][j]]=[这个。这个。square data[t][j]]；t-=1；} } } }},游戏结束#

分数为0 的时候游戏结束，此时在执行一遍初始化函数，重新生成一个开心消消乐格子，将分数初始化为10.

if (this.score=0) { if (confirm('分数用光了哦~ ~ '){这个。init()；} else { this。init()；} }项目源代码#

目前项目是在开源代码库上托管，欢迎公关！点此跳转

总结

以上所述是小编给大家介绍的某视频剪辑软件实现开心消消乐算法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！