如何用js实现2048小游戏

一个新手

发布： 2017-09-26 09:45:22

原创

3556人浏览过

最近同学参加宣讲会，说有个公司要求是写一个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

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

登录后复制

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

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