jsでシンプルなパズルゲームを実現する

この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

ゲームは非常にシンプルで、パズルを組み立てて、マウスでピースをドラッグして別のピースと交換するだけです。言語はHTML+jsです。コメントが分からない場合はメッセージを残して質問してください。

スクリーンショット

コードエリア

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
 </head>
 <スタイル タイプ="text/css">
  div{
   幅: 200ピクセル;
   高さ: 200px;
   
  }
  .tu{
   背景画像:url(anni.jpg);
   }
  //background-position を使用して各 div に異なる画像を追加します。つまり、9 つの div で完全な画像が形成されます。
  #z-1{
   背景位置: 0px 0px;
  }
  #z-2{
   背景位置:-200px 0px;
  }
  #z-3{
   背景位置:-400px 0px;
  }
  #z-4{
   背景位置:0 -200px;
  }
  #z-5{
   背景位置: -200px -200px;
  }
  #z-6{
   背景位置: -400px -200px;
  }
  #z-7{
   背景位置: 0px -400px;
  }
  #z-8{
   背景位置: -200px -400px;
  }
  #z-9{
   背景位置: -400px -400px;
  }
 </スタイル>
 <スクリプト>
 //ドラッグ後に 2 つの画像の交換を完了します。
  関数オーバー(e){
   e.preventDefault(); //デフォルトを防止}
  // グラブ関数drag(e){
   var id = e.target.id;
   // コンソールログ(e.target.id);
   e.dataTransfer.setData("id",id);//送信するキャプチャされた ID を設定します。
  }
  //関数drop(e)の後{
   var beizhuaId=e.dataTransfer.getData("id");// キャプチャした ID を受け入れます。
   // console.log(beizhuaId); // 逮捕された人物のID
   var fangID=e.target.id;//場所のID;
   var beizhua=document.getElementById(beizhuaId);//キャプチャしたオブジェクトを取得します。
   var fang=document.getElementById(fangID);//解放するオブジェクトを取得します。
   var f_beizhua=beizhua.parentNode;//対応する親ノードを検索します var f_fang=fang.parentNode;
   //sonsf_beizhua.appendChild(fang) を交換する。
   f_fang.appendChild(beizhua);
   勝つ（）;
   }
   // 勝敗判定方法。親と子の ID 名に同じシリアル番号が付けられ、ループしてカウントを累積します。
   関数win(){
    var tus = document.getElementsByClassName('tu');
    var count=0;
    for(var i=0;i<tus.length;i++){
     var tu = tus[i];
     var fu = tu.parentNode;
     var tu_id=tu.getAttribute("id");
     var fu_id=fu.getAttribute("id");
     if(tu_id.replace("z-","")==fu_id.replace("f-","")){
      カウント++;
      console.log(カウント);
     }それ以外{
      戻る;
     }
    }
    
    if(count==9){
     alert("あなたの勝ちです!");
    }
    
   }
   // ボタンをスクランブルします。乱数を生成します。appenChild メソッドを使用して複数回スワップします。これがスクランブルです。
   関数 daluan(){
    (var i=0;i<100;i++){
    var tus = document.getElementsByClassName('tu');
    var m = parseInt (Math.random() * 9);
    var n = parseInt(Math.random() * 9);
    var tusmp=tus[m].parentNode;
    var tusnp=tus[n].parentNode;
    tusmp.appendChild(tus[n]);
    tusnp.appendChild(tus[m]);
    }
   }
 </スクリプト>
 <本文>
  <表の境界線="1">
   <tr>
    <td>
     <div id="f-1" ondragover="over(イベント)" ondrop="drop(イベント)">
      <div id="z-1" class="tu" draggable="true" ondragstart="ドラッグ(イベント)"></div>
     </div>
    </td>
    <td>
     <div id="f-2" ondragover="over(イベント)" ondrop="drop(イベント)">
      <div id="z-2" class="tu" draggable="true" ondragstart="ドラッグ(イベント)"></div>
     </div>
    </td>
    <td>
     <div id="f-3" ondragover="オーバー(イベント)" ondrop="ドロップ(イベント)">
      <div id="z-3" class="tu" draggable="true" ondragstart="ドラッグ(イベント)"></div>
     </div>
    </td>
   </tr>
   <tr>
    <td>
     <div id="f-4" ondragover="オーバー(イベント)" ondrop="ドロップ(イベント)">
      <div id="z-4" class="tu" draggable="true" ondragstart="ドラッグ(イベント)"></div>
     </div>
    </td>
    <td>
     <div id="f-5" ondragover="オーバー(イベント)" ondrop="ドロップ(イベント)">
      <div id="z-5" class="tu" draggable="true" ondragstart="ドラッグ(イベント)"></div>
     </div>
    </td>
    <td>
     <div id="f-6" ondragover="オーバー(イベント)" ondrop="ドロップ(イベント)">
      <div id="z-6" class="tu" draggable="true" ondragstart="ドラッグ(イベント)"></div>
     </div>
    </td>
   </tr>
   <tr>
    <td>
     <div id="f-7" ondragover="over(イベント)" ondrop="drop(イベント)">
      <div id="z-7" class="tu" draggable="true" ondragstart="ドラッグ(イベント)"></div>
     </div>
    </td>
    <td>
     <div id="f-8" ondragover="over(イベント)" ondrop="drop(イベント)">
      <div id="z-8" class="tu" draggable="true" ondragstart="ドラッグ(イベント)"></div>
     </div>
    </td>
    <td>
     <div id="f-9" ondragover="over(イベント)" ondrop="drop(イベント)">
      <div id="z-9" class="tu" draggable="true" ondragstart="ドラッグ(イベント)"></div>
     </div>
    </td>
   </tr>

  </テーブル>
  <input type="button" value="シャッフル" onclick="daluan()" />
 </本文>
</html>