之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来。后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来。
<>强效果展示#
先在这里放一个最终实现的效果,还是一个比较初级的版本,大家有什么想法欢迎评论哦
<强>游戏规则:
初始时会给玩家十分的初始分,每拖动一次就减一分,每消除一个方块就加一分,直到最后分数为0游戏结束
任意两个方块都可以拖动
<>强界面设计#
页面的布局比较简单,格子的数据是一个二维数组的形式,说到这里大家应该已经明白界面是怎么做的了。
& lt; div
v代表="(项目,索引)squareData”
:关键="指数”
类="行"比;
& lt; div
v代表=" (_item _index)”项
:关键=" _index "
类=肮愠 ?
:类=" _item "
@mousedown=" dragStart(指数、_index)”
@mouseup=巴隙崾北?
{{_item}}
& lt;/div>
& lt;/div>
大家应该注意到了:<代码> class=" _item>
.square.A {
background - color: # 8 d98ca;
}
.square.S {
background - color: # A9A2F6;
}/*其余操作相同*/
同时在玩家点击方块的时候方块会左右摆动以表示选中了此方块,还可以提升游戏的灵动性。关于HTML动画的实现方式有很多,在这里我们使用CSS动画进行操作,代码如下:
@keyframes抖动{
从50%,{
变换:旋转(0度);
}
10%、30% {
变换:旋转(10度);
}
20% {
变换:旋转(20度);
}
60%、80% {
变换:旋转(-10度);
}
70% {
变换:旋转(-20度);
}
}/*只要是用户点击不动,动画就不会停止*/{.square:活跃
animation-name:抖动;
动画:0.5秒;
animation-iteration-count:无限;
}
<>强消除算法
上面提到我之前是做过一道题是判断一个二维数组中有没有可消的元素,有的话是多少个。
在这里我们可以这样想,最开始遍历一整个二维数组,每次定义一个X0, X1, Y0, Y1,然后每次计算其上下左右连续相同方块的位置,在这个过程中要注意边界问题,然后我们记录下这四个变量,只要| X0-X1 + 1 |祝辞=3或者| Y0-Y1 + 1 |祝辞=3,我们就可以将这个方块的坐标加入到del数组中。
遍历完一整个二维数组之后,我们就可以将del数组中对应坐标位置的方块内容变为“0”,由于我们没有对0定义样式,所以在没有执行下落算法之前变为0的方块为白色。
<强>下落算法
在我们将相应的方块白色之后,其上面的方块应该下,落在这里我的思想是这个样子的。
按照列遍历二维数组,定义一个指针t,指向上次不为0的方块位置,一旦遇到方块不为0的格子就将其与t所指的方块就行交换,一次类推,示意图如下:
这样的话我们就可以把为空的上移到最顶层,并且不打乱顺序,然后我们在随机填充顶部的空方块就可以了。做完填充之后我们要再做一次消除算法,直到del数组的长度为空为止,这个道理大家应该都能想得到。
代码如下
clear():空白{
const m:数量=10;
const n:数量=10;
而(真){
const德尔:任何[]=[];
(让我:数量=0;我& lt;m;我+ +){
(让j:数量=0;j & lt;n;j + +) {
如果这一点。squareData[我][j]===' 0 ') {
继续;
}
让x0:数量=我;
让x1:数量=我;
让y0:数量=j;
让日元:数量=j;
而(x0祝辞=0,,x0祝辞i - 3,,这一点。squareData [x0] [j]===this.squareData[我][j]) {
——x0;
}
而(x1 & lt;米,,x1 & lt;我+ 3,,这一点。squareData (x1) [j]===this.squareData[我][j]) {
x1 + +;
}
而(y0祝辞=0,,y0祝辞j - 3,,这一点。squareData[我][y0]===this.squareData[我][j]) {
——y0;
}
而(y1 & lt;n,,y1 & lt;j + 3,,这一点。squareData[我][y1)===this.squareData[我][j]) {
+ +日元;
}
如果(x1 - x0祝辞3 | | y1 - y0比;3){
德尔。(i, j) push ();
}
}
}
如果(del)。长度===0){
打破;
}
这一点。得分+=del.length;
(const平方的del) {
设置(这美元。squareData[平方[0]],[1],' 0 ');
}
(让j:数量=0;j & lt;n;+ + j) {
让t:数量=m - 1;
(让我:数量=m - 1;我在=0;——我){
如果这一点。squareData[我][j]。==' 0 ') {
(这一点。squareData [t] [j]。squareData[我][j]]=[。squareData[我][j], this.squareData [t] [j]];
t -=1;
}
}
}
}
},
