最近同學參加宣講會，說有個公司要求是寫一個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]){
        return false;
}

5.到這裡呢，基本上主要功能就結束啦。還有一點點就是關於結束的判斷。結束就是1沒有盒子是空的，2不能夠移動了。沒有盒子是空的就遍歷陣列看是不是全部都不是0了。不能移動就把前面寫的canMoveDown()函式和上移，左移，右移的函式用上，如果這5個都是真的，就彈出遊戲結束框，然後呼叫新的newGame()函式重新來。

第一次寫部落格，感覺好多東西都講的不太清楚，多多包涵。