网络新闻专题做的最好的网站,响应式外贸网站建设,可以进入外国网站的浏览器,营销型网站建设文章摘要#xff1a;这篇Vue栏目下的“Vue实现开心消消乐游戏算法”#xff0c;介绍的技术点是“开心消消乐、Vue、开心、游戏、算法、实现”#xff0c;希望对大家开发技术学习和问题解决有帮助。之前做过一个算法题#xff0c;算法要求就是写一个开心消消乐的逻辑算法#x…摘要这篇Vue栏目下的“Vue实现开心消消乐游戏算法”介绍的技术点是“开心消消乐、Vue、开心、游戏、算法、实现”希望对大家开发技术学习和问题解决有帮助。之前做过一个算法题算法要求就是写一个开心消消乐的逻辑算法当时也是考虑了一段时间才做出来。后来想了想既然核心算法都有了能不能实现一个开心消消乐的小游戏呢于是花了两天时间做了一个小游戏出来。效果展示#先在这里放一个最终实现的效果还是一个比较初级的版本大家有什么想法欢迎评论哦游戏规则初始时会给玩家十分的初始分每拖动一次就减一分每消除一个方块就加一分直到最后分数为0游戏结束任意两个方块都可以拖动界面设计#页面的布局比较简单格子的数据是一个二维数组的形式说到这里大家应该已经明白界面是怎么做的了。v-for(item, index) in squareData:keyindexclassrowv-for(_item, _index) in item:key_indexclasssquare:class_itemmousedowndragStart(index, _index)mouseupdragEnd{{_item}}大家应该注意到了 :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-X11|3 或者 |Y0-Y11|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();}}项目源代码#目前项目是在github上托管欢迎PR点此跳转总结以上所述是小编给大家介绍的Vue实现开心消消乐算法,希望对大家有所帮助如果大家有任何疑问请给我留言小编会及时回复大家的。在此也非常感谢大家对Java大数据社区网站的支持如果你觉得本文对你有帮助欢迎转载烦请注明出处谢谢
