如何用js實作2048小遊戲

最近同學參加宣講會，說有個公司要求是寫一個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中文網其他相關文章！