自家製2048のゲーム（2）

先触れMinha：私はレビューのアイデアにある記事を書いて、それを統合し、これは人々の学習に従うことで行います。すべてのすべてで、それはより多くのトスコードよりも、より多くの理解であると考えられます。

エヘンは、我々がゲーム中に含めて、すべて完了ゲームのを初期化する必要が最後の時間が必要`updataBoardView(); generateOneNumber();showNumberWithAnimation()`、この時間は、それは、ゲームの進行のロジックを書き始めると、時間に車をつかむことであるので、また、全体を書かれました- 〜

ゲーム処理のキーボード

キーボード、モニタ機能
このゲームプレイし、操作が上下に移動し、小さなボックスで、マージ操作を完了することであることを知っています。だから我々は、世界的なイベントリスナー関数でキーボードを書きました$(document).keydown()。

私たちは、それを記述する必要がありますか？まず、押されたボタンを判断する必要があるので、間違いなくオブジェクトのイベントを取得する必要があります生成されたこのイベントをトリガ

イベントオブジェクト

イベントオブジェクトは、そのような要素の状態が発生した場合、キーボードのキー、マウスの位置、マウスボタンの状態として、イベントの状態を表します。
イベントは、通常の関数と組み合わせて使用されているイベントが発生する前に、関数が実行されません！
私たちが行くことができる具体的なイベントの説明w3school参照してください。キーコードのプロパティが存在している場合には、仮想キーボードのキーストロークコードを取得することができます

以下のように対応する機能を実行しながら、次のように、押されたキーを判別するために私たちのgetのkeyCode

 $(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;
    }
});

それは左にいない場合でも、これは二つの問題が含まれ、←無効であるべきであり、デジタルの新しい世代ではありませんを押し、例えば、左または右1あなたが実行を許可するゲームの現在の状態です。一つは、すぐに4つの方向が移動することができない場合は、ゲームがアップゲームオーバーする必要があり、ゲームが終了していない検出すべき動きです。最初の問題を解決するために、我々はテストを行う必要があり、決めるか、新しい番号を生成する必要性に値を返します。第二の問題を解決するために、我々は記述する必要がありますisgameover()。

私たちは、次のようにキーボードが読むためのコードを監視し、moveleftリターン内検出機能を記述します

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

左機能moveLeft（）
我々は2つのことを行うことには、1が移動することはできません最初の判決で、それが直接、falseを返します動作しません。あなたが移動することができれば、我々は次の可動部分を実行します。I最初のコードステッカー

完全なコード：

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){
                //有数字则遍历左边
                for(var k=0;k<j;k++){
                    //看落点是否为空且路上有无障碍
                    if(board[i][k]==0&&noBlockHorizontal(i,k,j,board)){
                        //move
                        showMoveAnimation(i,j,i,k);
                        //更新
                        board[i][k]=board[i][j];
                        board[i][j]=0;
                        continue;
                    }else if(board[i][k]==board[i][j]&&noBlockHorizontal(i,k,j,board)&&!hasConflicted[i][k]){
                        //move
                        showMoveAnimation(i,j,i,k);
                        //更新
                        board[i][k]+=board[i][j];
                        board[i][j]=0;
                        //分数增加
                        score += board[i][k];
                        updateScore(score);

                        hasConflicted[i][k]=true;
                        
                        continue;
                    }
                }
            }
        }
    }
    //遍历完后更新格子显示状态,慢一点才能显示动画
    setTimeout("updateBoardView()",200);
    return true;
}

我々はsupport.jsでこの関数を記述します、我々はデータのグリッドアレイボードストレージを使用する必要があり、ゲームの現在の状態がままにすることはできないかを決定するためにcanMoveLeft

//检测能否左移
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の右を通過することのみが必要であることが明らかであるだろう、その後、ゲームの状態を直接ままにするreturn true;には。
検出機能を読んだ後、私たちは、可動部品の後ろを見てみましょう。

//遍历右边12个格子
    for(var i=0;i<4;i++){
        for(var j=1;j<4;j++){
            if(board[i][j]!=0){
                //有数字则遍历左边
                for(var k=0;k<j;k++){
                    //看落点是否为空且路上有无障碍
                    if(board[i][k]==0&&noBlockHorizontal(i,k,j,board)){
                        //move
                        showMoveAnimation(i,j,i,k);
                        //更新
                        board[i][k]=board[i][j];
                        board[i][j]=0;
                        continue;
                    }else if(board[i][k]==board[i][j]&&noBlockHorizontal(i,k,j,board)&&!hasConflicted[i][k]){
                        //move
                        showMoveAnimation(i,j,i,k);
                        //更新
                        board[i][k]+=board[i][j];
                        board[i][j]=0;
                        //分数增加
                        score += board[i][k];
                        updateScore(score);

                        hasConflicted[i][k]=true;
                        
                        continue;
                    }
                }
            }
        }
    }
    //遍历完后更新格子显示状态,慢一点才能显示动画
    setTimeout("updateBoardView()",200);
    return true;

同様に、最初のグリッドの値を決定するために右に12グリッド、トラバースを横断する必要があること、次に、そこその左側にすべてのグリッドを介して何もありません。ここでは、二つのケースに分けられる
1目標空格子、及び無閉塞に、次いで過去に移動することができる
ターゲット2と格子自体の値が等しい、ない障害物と、それが組み込まれていてもよい
2例に加えてあなたは、操作を行う必要はありません。
我々はsupport.jsに2つ（同じ行）との間にグリッドで検出された記述する必要がこれを行うには邪魔されない機能を持ってい
noBlockHorizontal：

//检测行上有无阻碍
function noBlockHorizontal(row,col1,col2,board){
    for(var i=col1+1;i<col2;i++){
        if(board[row][i]!=0)
            return false;
    }
    return true;
}

私たちはすべてが理解できると信じてこれは、私が説明しません。
最初のケースでは、当社の事業は以下のとおりです。

コールアニメーション機能
アップデートボードアレイは、ターゲットグリッドへの独自の値は、それ自体は0に設定します

後者の場合については、当社事業は以下のとおりです。

コールアニメーション機能
アップデートボード配列、プラス0にターゲット格子自身の値を、独自のセットの値

アニメーション関数showMoveAnimationを移動（fromx、fromy、TOX、おもちゃ）

//移动动画
function showMoveAnimation(fromx,fromy,tox,toy){
    var numberCell=$("#number-cell-"+fromx+"-"+fromy);
    numberCell.animate({
        left:getPosLeft(tox,toy),
        top:getPosTop(tox,toy)
    },200);
}

私たちは、アニメーションに追加し、このデジタルボックス自体を取っています。その得られたターゲットのグリッド座標により得られる目標質量アニメーション左格子と上部値です。

エンディングmoveLeft（）関数
の修正の直列に我々はグリッドビューをレンダリングするために、現在のボードの下に必要な、完全です

だから、最終的には、キーボードとモニタ機能を追加、真の使用を返します。

//遍历完后更新格子显示状态,慢一点才能显示动画
    setTimeout("updateBoardView()",200);
    return true;

最後に、最後の
他方向への移動機能は、同じ理由で、私は、コードを入れていないだろう、ほとんど同じ、細部の数字の一部が異なります。すべてが完了すると、我々はすでに私たちのゲームの楽しいそれを再生を開始することができます！！

ゲーム画面

修理といくつかの小さなバグ、スコアの統計情報、判決を超えるゲームがあるが、それは次の記事を置く、ありがとうございました！！

：この記事はで再現されたAPE→2048 https://www.mk2048.com/blog/blog.php?id=hhibcikk0jb

ゲーム処理のキーボード

イベントオブジェクト

修理といくつかの小さなバグ、スコアの統計情報、判決を超えるゲームがあるが、それは次の記事を置く、ありがとうございました！！

おすすめ