摘要：所以我們在全局寫一個鍵盤的事件監(jiān)聽函數(shù)。一個是移動后應該立馬檢測游戲有沒有結(jié)束，如果四個方向都不能移動的話，游戲就應該了。

先聲明哈：我做的這個也是跟著被人學習的，寫文章是為了復習思路，還有鞏固一下。總而言之呢，就是為了多理解思路，多折騰代碼。

咳咳，上次我們已經(jīng)將游戲的初始化全部完成了，包括游戲過程中需要的updataBoardView(); generateOneNumber();showNumberWithAnimation()也都全寫好了，所以這次呢就是來寫游戲過程中的邏輯了，發(fā)車了，抓緊時間上車~~

鍵盤監(jiān)聽函數(shù)
玩過這款游戲的人都知道，操作就是通過上下左右來移動小方塊，完成合并操作。所以我們在全局寫一個鍵盤的事件監(jiān)聽函數(shù)$(document).keydown()。

我們需要在其中寫入什么呢？首先需要判斷是哪個按鍵被按下，所以肯定需要獲取event這個事件觸發(fā)式生成的對象

Event 對象

Event 對象代表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠的位置、鼠標按鈕的狀態(tài)。
事件通常與函數(shù)結(jié)合使用，函數(shù)不會在事件發(fā)生前被執(zhí)行！
具體的event的解釋大家可以去w3school看看。其中event有一個keyCode屬性能夠獲取到敲擊鍵盤的虛擬鍵盤碼

我們通過拿到的keyCode來判斷哪個鍵被按下，同時執(zhí)行相應的函數(shù)就好了，代碼如下

 $(document).keydown(function (event){
    switch(event.keyCode){
        case 37: //left
            moveLeft();
            generateOneNumber();
            break;
        case 38: //up
            
            break;
        case 39: //right
            
            break;
        case 40: //down
            
            break;
    }
});

但這牽扯到的兩個問題，一個是當前的游戲狀態(tài)允不允許執(zhí)行左移或者右移，比如如果是不能左移的話，那按下←應該是無效的，同時就不應該新生成一個數(shù)字。一個是移動后應該立馬檢測游戲有沒有結(jié)束，如果四個方向都不能移動的話，游戲就應該GameOver了。為解決第一個問題，我們需要做一個檢測，返回一個值來決定需不需要新生成一個數(shù)字。為解決第二個問題，我們需要寫一個isgameover().

我們將檢測函數(shù)寫在moveleft內(nèi)部返回，將鍵盤監(jiān)聽代碼改為如下

case 37://left
        if(moveLeft()){
            generateOneNumber();
            isgameover();
        }

左移函數(shù)moveLeft()
在這里面我們做兩件事，一個是先判斷能不能移動，不行的話直接返回false。如果能移動的話，我們再執(zhí)行接下來的移動部分。我先把代碼貼出來

完整代碼：

function moveLeft(){
    if(!canMoveLeft(board)){
        return false;
    }

    //遍歷右邊12個格子
    for(var i=0;i<4;i++){
        for(var j=1;j<4;j++){
            if(board[i][j]!=0){
                //有數(shù)字則遍歷左邊
                for(var k=0;k
我們通過canMoveLeft來判斷當前游戲狀態(tài)能不能左移，我們要用到的是存儲格子數(shù)據(jù)的數(shù)組board，我們將這個函數(shù)寫在support.js中
//檢測能否左移
function canMoveLeft(board){
    for(var i=0;i<4;i++){
        for(var j=1;j<4;j++){
            if(board[i][j]!= 0){
                if(board[i][j-1]==0||board[i][j-1]==board[i][j])
                    return true;
            }
        }
    }
    return false;
}
這里面顯而易見的是左邊第一列的4個格子是不能移動的，所以只需要遍歷右邊的12個格子，只要有一個有數(shù)字的格子的自身左邊的一個格子為空，或者說值和它相等，那么游戲狀態(tài)就是可以左移的，直接return true;即可。
看完檢測函數(shù)后我們來看看后面的移動的部分。
//遍歷右邊12個格子
    for(var i=0;i<4;i++){
        for(var j=1;j<4;j++){
            if(board[i][j]!=0){
                //有數(shù)字則遍歷左邊
                for(var k=0;k
同理，也是只需要遍歷右邊的12個格子，先判斷遍歷到的這個格子是不是有值，有的話則遍歷其左邊的所有格子。這里就分成兩種情況
1.目標格子是空的，且中間沒有阻礙，于是可以移動過去
2.目標格子的值和自身是相等的，而且中間沒有阻礙，那么就可以合并
除了這兩種情況以外的都不需要做什么操作。
為此我們需要在support.js中寫一個檢測兩個格子間(同一行)有沒有阻礙的函數(shù)
noBlockHorizontal:
//檢測行上有無阻礙
function noBlockHorizontal(row,col1,col2,board){
    for(var i=col1+1;i
這個我相信大家都看得懂，我就不解釋了。
對于第一種情況我們的操作是：

調(diào)用移動動畫函數(shù)

更新board數(shù)組，將自身的值傳給目標格子，自身設為0


對于第二種情況我們的操作是：

調(diào)用移動動畫函數(shù)

更新board數(shù)組，目標格子的值加上自身的值，自身設為0


移動動畫函數(shù)showMoveAnimation(fromx,fromy,tox,toy)

//移動動畫
function showMoveAnimation(fromx,fromy,tox,toy){
    var numberCell=$("#number-cell-"+fromx+"-"+fromy);
    numberCell.animate({
        left:getPosLeft(tox,toy),
        top:getPosTop(tox,toy)
    },200);
}
我們是取自身這個數(shù)字方塊，給它加個animate。animate里面?zhèn)鞯氖悄繕烁褡拥膌eft和top值，這個值是通過目標格子的坐標得到的。
moveLeft()函數(shù)收尾
在一系列的修改都完成后，我們就需要根據(jù)現(xiàn)在的board來渲染格子視圖

所以最后添加,并返回true給鍵盤監(jiān)聽函數(shù)使用。
//遍歷完后更新格子顯示狀態(tài),慢一點才能顯示動畫
    setTimeout("updateBoardView()",200);
    return true;
最后的最后
其他方向的移動函數(shù)也是同理，我就不貼代碼了，幾乎一模一樣，細節(jié)上的一些數(shù)字不同罷了。當一切都完成后，我們就已經(jīng)可以開始愉快的玩耍我們的游戲啦！！


后面還有一些小bug的修復，得分的統(tǒng)計，游戲結(jié)束的判斷等，就放到下一篇文章吧，謝謝！！