很多朋友对于使用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(); } }
用户评论
哇呜!用Vue开发的消消乐游戏,太酷了!期待体验一下。
有6位网友表示赞同!
终于等到把轻松愉快的消消乐搬到网页上来了!
有12位网友表示赞同!
Vue这个框架真不错,能做游戏也是相当厉害的。
有13位网友表示赞同!
简单开心消消乐,正好适合碎片时间玩!
有7位网友表示赞同!
画面风格简约清新吗?挺符合我喜欢的风格的。
有17位网友表示赞同!
希望游戏难度适中,能够一直保持畅快的感觉。
有6位网友表示赞同!
有没有排行榜可以比拼一比成绩?
有18位网友表示赞同!
希望能加入更多新元素,比如道具或者主题关卡!
有10位网友表示赞同!
简单易上手玩起来应该很有乐趣。
有10位网友表示赞同!
游戏逻辑很简单,但是要注意重复性和可玩性,不要太容易腻了。
有8位网友表示赞同!
如果有各种可爱的特效和音效,那感觉会更棒!
有7位网友表示赞同!
这应该是个很休闲的解压游戏吧?期待放松一下自己。
有7位网友表示赞同!
用Vue写出来的游戏应该能很好的与用户交互吧?
有14位网友表示赞同!
希望体验感能跟传统的消消乐游戏类似,那样就更完美了。
有7位网友表示赞同!
试想一下一边玩游戏一边学习Vue基础知识,岂不是两全其美
有18位网友表示赞同!
期待这款小游戏的上线!
有18位网友表示赞同!
这也太有趣了吧!我一定会尝试一下的!
有7位网友表示赞同!
用Vue开发的游戏听起来很有特点!可以期待新的玩法了。
有10位网友表示赞同!
如果有多人的合作模式,那会更加好玩!
有15位网友表示赞同!