当前位置:Gxlcms > JavaScript > 如何用js实现2048小游戏

如何用js实现2048小游戏

时间:2021-07-01 10:21:17 帮助过:31人阅读

最近同学参加宣讲会,说有个公司要求是写一个2048小游戏,参考了一点网上的代码以后,自己写了一个。

游戏进行时游戏结束

写的思路如下:
1.设置好HTML布局。大盒子嵌套小盒子,这块没什么可说的。
2.实现游戏初始化,生成一开始的两个小块。这里就要实现生成随机2或4,还要放入随机位置。其实从布局好了之后差不多就能想到用数组来存储数字了。这块主要用了Math.random()来生成随机数和随机X,Y来插入到数组中。然后写一个更新页面的函数,利用JS来更新小盒子的内容和CSS样式。这里把这一块,初始化数组和生成两个随机盒子的函数写成了一个newGame()函数,这样重新开始游戏可以直接调用。
3.最重要的来了,移动。我自己写的时候我是先按照先能然他们移动,在来考虑合并的思路来的。要留一个能记录下来为0的位置的变量,比如向下移动的时候,代码如下。

for(var i = 0;i<4;i++){    
    var n=3;    
    for(var j = 3;j>=0;j--){        
    if(board[j][i] == 0){            
    continue;
        }else{            
        if(board[n][i]==0){
                board[n][i] = board[j][i];
                board[j][i] = 0;
            }
            n--;
        }
    }
}

我是把继续生成随机盒子的函数放在了移动函数的结尾调用的,在这个时候就要考虑一个问题了,怎么让在其实没有移动动作的时候不在继续增加盒子。我还是用了一个循环遍历来完成这个问题。遍历循环数组,如果在移动方向上不为0的前面存在0就可以继续移动。比如判断是否能够下移:

function canMoveDown(){
    for(var i = 0;i<4;i++){        
    for(var j = 3;j>=0;j--){            
    if(board[j][i]!=0&&j!=3){                
    if(board[j+1][i]==0){                    return false;
                }
            }
        }
    }    return true;
}

然后改写了前面的移动函数,前面判断了这个,如果返回为真直接return false,不执行之后的移动函数体。
4.当移动都完成好了之后,就要考虑合并的问题了。我的思路是这样的,在移动之后,就移动后移动方向的前一个盒子(如果存在)和移动后的这个盒子来比较值,如果比较相等,就把前一个盒子置为本身2倍,移动后的盒子置为0。比如向下移动,修改代码如下:

for(var i = 0;i<4;i++){    
    var n=3;    
    for(var j = 3;j>=0;j--){        
    if(board[j][i] == 0){            
    continue;
        }else{            
        if(board[n][i]==0){
                board[n][i] = board[j][i];
                board[j][i] = 0;
            }            if(n<3){                
            if(board[n][i] == board[n+1][i]){
                    board[n+1][i] = board[n][i]*2;
                    board[n][i] = 0;                    
                    continue;
                }
            }
            n--;
        }
    }
}

此处只有当n<3的时候才能进入,排除了他是最下面盒子的情况,因为他没有盒子可以合并嘛。这里要注意当合并之后,当前盒子变为0,前面说了n是为了帮助记录为0盒子的位置的,那么在这里就要注意,n值不用改变,因为当前盒子为0,如果还有值要下移应该移动到这里,否则你会发现上面的盒子会和下面的合并之后的盒子空一格,和想的不太一样。这里也要修改前面的canMoveDown()函数的判断条件,如果可以合并也要判断为能够移动,修改if条件为:

if(board[j+1][i]==0||board[j+1][i]==board[j][i]){        
eturn false;}

5.到这里呢,基本上主要功能就结束啦。还有一点点就是关于结束的判断。结束就是1没有盒子是空的,2不能够移动了。没有盒子是空的就遍历数组看是不是全部都不是0了。不能移动就把前面写的canMoveDown()函数和上移,左移,右移的函数用上,如果这5个都是真的,就弹出游戏结束框,然后调用新的newGame()函数重新来。

以上就是如何用js实现2048小游戏 的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行