2048 ゲームを実装するためのネイティブ js

2048ミニゲーム、参考までに具体的な内容は以下のとおりです

まず、2048ゲームは16のグリッドから切り離すことはできません。HTMLとCSSで対応するタグとスタイルを作成し、JSロジックを開始します。

<div id="box">//ボックス内の 16 個の小さな div
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
 <div id="son"></div>
</div>

対応するスタイルを設定します: (参考のみ)

＃箱{
 幅: 450ピクセル;
 高さ: 450px;
 背景色: 茶色;
 ディスプレイ: フレックス;
 flex-wrap: ラップ;
 コンテンツの均等配置: スペースを均等に;
 境界線: 1px実線 #000;
 マージン: 100px 自動;
 境界線の半径: 10px;
 }
 div>div{
 上マージン: 5px;
 幅: 100ピクセル;
 高さ: 100px;
 境界線の半径: 5px;
 背景色: ビスク;
 テキスト配置: 中央;
 行の高さ: 100px;
 フォントサイズ: 40px;
 }

効果は以下のとおりです。

その後、実際の js 部分が始まります。まず、CSS セレクターを使用して、すべての小さなグリッド div を取得します。

var divs = document.querySelectorAll('[id == son]');

次に、これらの16個の小さなグリッドdivのDOMオブジェクトを受け取るための2次元配列を作成します。

var arr = [[],[],[],[]];
var a = 0;
(var i=0;i < 4; i++){
 (var j=0; j < 4; j++){
 arr[i][j] = divs[a];
 ++ ;
 }
}

これにより、i 軸と j 軸が形成されます。

これにより、その後のモバイル操作が容易になります

ここで、16 個のセルからランダムな数字 2 と 4 をランダムに生成し、空のセルに入力するプログラムを作成します。このプログラムは後で呼び出します。

function sj(){ //乱数を生成 var a = Math.floor(Math.random() * 4);
 var b = Math.floor(Math.random() * 4);
 if(arr[a][b].innerHTML == ""){
 もし(Math.random()>0.5){
 arr[a][b].innerHTML = 2;
 }それ以外{
 arr[a][b].innerHTML = 4;
 }
 
 }else{ //グリッドが空でない場合は、関数 sj() を実行します。
 }
}

2 つ目は、ゲームが終了したかどうかを判断する関数です。グリッドのすべての値が空でなくなるとゲームが終了します。（後日連絡）

function js(){ //ゲームオーバーですか? var bool = true;
 (var i=0;i < 4; i++){
 (var j=0; j < 4; j++){
 if(arr[i][j].innerHTML == ""){
  ブール値 = false;
 }それ以外{
  
 }
 }
 } 
 if(ブール){
 alert("ゲームオーバー");
 (var i=0;i < 4; i++){
 (var j=0; j < 4; j++){
 arr[i][j] = null;
 }
 }
 
 }
}

次に、上、下、左、右のキーをそれぞれ押して実行される関数を記述します。

上キーを押す場合を例に挙げます。

①上の数字が空で下の数字が空でない場合は、上の値と下の値が入れ替わります。
②上の数値が下の数値と等しい場合、上の数値×2となり下の値は空になります。その他の条件は変更ありません。

function downtop(){ //上を押すと実行される関数 for(var i=0;i < 4; i++){
 (var j=0; j < 4; j++){
 if(arr[i][j].innerHTML == "" && i<3 &&arr[i+1][j].innerHTML != ""){
 arr[i][j].innerHTML = arr[i+1][j].innerHTML;
 arr[i+1][j].innerHTML = "";
 downtop(); // 条件が満たされた場合に実行 // 条件が満たされない場合は、if 文には入りません }else if(i<3&&arr[i][j].innerHTML !="" && arr[i+1][j].innerHTML !="" &&arr[i][j].innerHTML == arr[i+1][j].innerHTML){
 arr[i][j].innerHTML = 2*arr[i+1][j].innerHTML;
 arr[i+1][j].innerHTML = "";
 }それ以外{
 
 }
 }
 }

}

同様に、他の 3 つのキーのロジックを完了するには、(いくつかのパラメータを) 変更するだけです。

関数 downbottom(){
 for(var i=3;i > 0;i--){
 (var j=0; j < 4; j++){
 if(arr[i-1][j].innerHTML != "" && i>0 &&arr[i][j].innerHTML == "" ){ 
 arr[i][j].innerHTML = arr[i-1][j].innerHTML;
 arr[i-1][j].innerHTML = "";
 下端();
 }
 そうでない場合、arr[i-1][j].innerHTML !=""&& arr[i][j].innerHTML !="" && i>0 &&arr[i-1][j].innerHTML == arr[i][j].innerHTML){
 arr[i][j].innerHTML = 2*arr[i-1][j].innerHTML;
 arr[i-1][j].innerHTML = "";
 }
 }
 }
}

関数 downleft(){
 (var i=0;i < 4; i++){
 (var j=0; j < 4; j++){
 if(arr[i][j].innerHTML == "" && j<3 &&arr[i][j+1].innerHTML != ""){
 arr[i][j].innerHTML = arr[i][j+1].innerHTML;
 arr[i][j+1].innerHTML = "";
 左下();
 }そうでない場合(j<3&& arr[i][j].innerHTML !=""&& arr[i][j+1].innerHTML !="" &&arr[i][j].innerHTML == arr[i][j+1].innerHTML){
 arr[i][j].innerHTML = 2*arr[i][j+1].innerHTML;
 arr[i][j+1].innerHTML = "";
 }
 }
 }

}


関数 downright(){
 
 (var i=0;i < 4; i++){
 (var j = 3;j > 0;j--){
 if(j > 0 && arr[i][j].innerHTML == ""&&arr[i][j-1].innerHTML != ""){
 arr[i][j].innerHTML = arr[i][j-1].innerHTML;
 arr[i][j-1].innerHTML = "";
 まさに();
 }そうでない場合、j>0 && arr[i][j].innerHTML !=""&& arr[i][j-1].innerHTML !="" &&arr[i][j].innerHTML == arr[i][j-1].innerHTML){
 arr[i][j].innerHTML = 2*arr[i][j-1].innerHTML;
 arr[i][j-1].innerHTML = "";
 }
 }
 }

 }

異なる値に異なる背景色を追加します: (オプション)

関数 color(){

(var i=0;i < 4; i++){
 (var j=0; j < 4; j++){
 スイッチ(arr[i][j].innerHTML){
 case "": arr[i][j].style.backgroundColor = "bisque";break; 
 ケース "2": arr[i][j].style.backgroundColor = "red";break; 
 ケース "4": arr[i][j].style.backgroundColor = "orange";break; 
 ケース "8": arr[i][j].style.backgroundColor = "yellow";break; 
 ケース "16": arr[i][j].style.backgroundColor = "green";break; 
 ケース "32": arr[i][j].style.backgroundColor = "blue";break; 
 ケース "64": arr[i][j].style.backgroundColor = "#000";break; 
 ケース "128": arr[i][j].style.backgroundColor = "aqua";break; 
 ケース "256": arr[i][j].style.backgroundColor = "pink";break; 
 }
 
 
 }
}

}

次に、ウィンドウ全体のキーボード監視イベントを設定します。

キーコード: 38
キーコードは40です
左キーコード: 37
右キーコード: 39
ボタンを押すたびに、①対応する方向の関数を呼び出す ②ランダムなパラメータで関数を呼び出す ③ゲームオーバーかどうかを判定する関数を呼び出す ④異なる値と異なる要素で関数を呼び出す ⑤ゲーム開始時に2回呼び出す（デフォルトでは2回）

window.onkeydown = 関数(e){
 スイッチ(e.keyCode){
 case 37: downleft(); sj(); color(); js(); break; //左 case 38: downtop(); sj(); color(); js(); break; //大文字 case 39: downright(); sj(); color(); js(); break; //右 case 40: downbottom(); sj(); color(); js(); break; //下文字}

}
sj(); //ゲームは 2 つのデフォルトの数字で始まります sj();

シンプルな2048ゲームが完成しました！

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: