摘要：所以我們?cè)谌謱懸粋€(gè)鍵盤的事件監(jiān)聽函數(shù)。一個(gè)是移動(dòng)后應(yīng)該立馬檢測(cè)游戲有沒有結(jié)束，如果四個(gè)方向都不能移動(dòng)的話，游戲就應(yīng)該了。

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

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

鍵盤監(jiān)聽函數(shù)
玩過這款游戲的人都知道，操作就是通過上下左右來移動(dòng)小方塊，完成合并操作。所以我們?cè)谌謱懸粋€(gè)鍵盤的事件監(jiān)聽函數(shù)$(document).keydown()。

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

Event 對(duì)象

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

我們通過拿到的keyCode來判斷哪個(gè)鍵被按下，同時(shí)執(zhí)行相應(yīng)的函數(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;
    }
});

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

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

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

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

完整代碼：

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

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

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

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


對(duì)于第二種情況我們的操作是：

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

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


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

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

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


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