2048年のミニゲームをjsで実装する方法

最近、クラスメートがセミナーに参加し、企業から 2048 年のミニゲームを書くように頼まれ、インターネット上のいくつかのコードを参照した後、自分でミニゲームを作成したと言いました。

書き方のアイデアは次のとおりです:
1. HTML レイアウトを設定します。小さな箱の中に大きな箱が入っていることについては、特に言うことはありません。
2. ゲームの初期化を実装し、最初の 2 つの小さなブロックを生成します。ここでは、ランダムな 2 または 4 を生成し、ランダムな位置に配置する必要があります。実際、レイアウトが完成したら、配列を使用して数値を格納することをほぼ考えることができます。このブロックは主に Math.random() を使用して乱数とランダムな X および Y を生成し、配列に挿入します。次に、JS を使用して小さなボックスのコンテンツと CSS スタイルを更新し、ページを更新する関数を作成します。ここで、このブロックでは、配列を初期化し、ランダムなボックスを2つ生成する関数を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;
}

すると、前の移動関数が書き換えられました。戻り値が true の場合は、直接 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

以上が2048年のミニゲームをjsで実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。