原生jsが2048のミニゲームを実現しました。

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>

対応するスタイルを設定します。

#box{
 width: 450px;
 height: 450px;
 background-color: brown;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-evenly;
 border: 1px solid #000;
 margin: 100px auto;
 border-radius: 10px;
 }
 div>div{
 margin-top: 5px;
 width: 100px;
 height: 100px;
 border-radius: 5px;
 background-color: bisque;
 text-align: center;
 line-height: 100px;
 font-size: 40px;
 }

効果は以下の通りです

そして本当のjsパートが本格的に始まりました。
まずcssセレクタを使って、すべての小さい格子のdivを取得します。

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

次に、この16個の小さな格子divのdomオブジェクトを受信するための二次元配列を作成する。

var arr = [[],[],[],[]];
var a = 0;
for(var i=0 ;i < 4; i ++){
 for(var j=0 ;j < 4; j++){
 arr[i][j] = divs[a];
 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 == ""){
 if(Math.random()>0.5){
 arr[a][b].innerHTML = 2;
 }else{
 arr[a][b].innerHTML = 4;
 }
 
 }else{ //               
 sj();
 }
}

二つ目はゲームが終わったかどうかを判断する関数です。チェックの値が全部空でない時にゲームを終了します。後は呼び出し中）

function js(){ //      
 var bool = true;
 for(var i=0 ;i < 4; i ++){
 for(var j=0 ;j < 4; j++){
 if(arr[i][j].innerHTML == ""){
  bool = false;
 }else{
  
 }
 }
 } 
 if(bool){
 alert("    ");
 for(var i=0 ;i < 4; i ++){
 for(var j=0 ;j < 4; j++){
 arr[i][j] = null;
 }
 }
 
 }
}

そして、上下左右のキーを押して実行する関数をそれぞれ書きます。
上キーを押すと例として：
①上の数が空の場合、下の一つは空の上下の値と交換しない。
②上の一つが数字で下と等しい場合、上の数＊2の下の改値は空となります。他の状況は変わりません。

function downtop(){ //        
 for(var i=0 ;i < 4; i ++){
 for(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 = "";
 }else{
 
 }
 }
 }

}

同じ理屈では、他の3つのキーのロジックが変更されるだけで完了します。

function downbottom(){
 for(var i=3 ;i > 0 ; i--){
 for(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 = "";
 downbottom();
 }
 else if(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 = "";
 }
 }
 }
}

function downleft(){
 for(var i=0 ;i < 4; i ++){
 for(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 = "";
 downleft();
 }else if( 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 = "";
 }
 }
 }

}


function downright(){
 
 for(var i=0 ;i < 4; i ++){
 for(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 = "";
 downright();
 }else if( 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 = "";
 }
 }
 }

 }

異なる値の背景色を追加します。

function color(){

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

}

そしてウィンドウ全体にキーボードの待ち受けイベントを設定します。
上のkeyCode:38
下のkeyCode:40
左のkeyCode:37
右のkeyCode:39
一回も押さなかったです
①対応方向の関数を呼び出します。
②ランダムパラメータの1つの数の関数を呼び出します。
③ゲームが終了したかどうかを判断する関数を呼び出します。
④異なる値の異なる要素の関数を呼び出します。
⑤ゲーム開始2回（デフォルトは2つ）

window.onkeydown = function(e){
 switch(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ゲームが完成しました。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。