JavaScript ジグソーパズルゲーム

<div id="コンテナ">
 <!-- 最も外側の DIV は内部の構造を格納するために使用されます -->
 <div id="ゲーム">
  <!--ゲーム領域、大きな DIV ブロック-->
  <div id="d1" onclick="move(1)">1</div>
  <!-- 小さな DIV、つまり 8 つの小さな四角形。クリックすると、move() 関数が実行され、パラメータは表示された数字なので、どのマスがクリックされたかがわかります -->
  <div id="d2" onclick="move(2)">2</div>
  <div id="d3" onclick="move(3)">3</div>
  <div id="d4" onclick="move(4)">4</div>
  <div id="d5" onclick="move(5)">5</div>
  <div id="d6" onclick="move(6)">6</div>
  <div id="d7" onclick="move(7)">7</div>
  <div id="d8" onclick="move(8)">8</div>
 </div>
 <div id="コントロール">
  <!--ゲームコントロールエリア-->
  <p>
   <rowspan id="timeText">合計時間</rowspan>
   <rowspan id="タイマー"></rowspan>
  </p>
  <!--ゲーム時間領域を表示-->
  <p>
   <rowspan id="start" onclick="start()">開始</rowspan>
   <rowspan id="reset" onclick="reset()">再起動</rowspan>
  </p>
  <!--コントロール ボタン領域を表示-->
 </div>
</div>

 *{
   パディング: 0;
   マージン: 0;
   境界線: 0;
  }
  /* * はワイルドカードで、すべての要素からデフォルトのスタイルを削除します。一部のブラウザではデフォルトでスタイルが追加され、レイアウトに問題が発生する可能性があるためです。*/
  体{
   幅: 100%;
   高さ: 100%;
  }
  /* ブラウザの画面サイズに自動的に適応するように、本文の高さと幅を 100% に設定します */
  ＃容器{
   位置: 相対的;
   幅: 620ピクセル;
   高さ: 450px;
   マージン: 0 自動;
   上マージン: 100px;
   境界線の半径: 1px;
  }
  /* これはすべての要素を囲む DIV です。幅 620 ピクセル、高さ 450 ピクセルに設定します。このサイズは大きく設定できますが、小さく設定することはできません。少なくともすべての要素を内部に収めることができる必要があります。*/
  ＃ゲーム{
   位置: 絶対;
   幅: 450ピクセル;
   高さ: 450px;
   境界線の半径: 5px;
   表示: インラインブロック;
   背景色: #ffe171;
   ボックスシャドウ: 0 0 10px #ffe171;
  }
  /* これはゲーム領域の DIV です。サイズは計算され、小さな四角形のサイズに応じて異なります。ここでは、小さな正方形のサイズを 150px 150px に設定しているので、サイズは 150px*3、つまり 450px になります */
  #ゲーム div{
   位置: 絶対;
   幅: 149ピクセル;
   高さ: 149px;
   ボックスの影: 1px 1px 2px #777;
   背景色: #20a6fa;
   色: 白;
   テキスト配置: 中央;
   フォントサイズ: 150px;
   行の高さ: 150px;
   カーソル: ポインタ;
   -webkit-transition: 0.3s;/*ブラウザプレフィックス、他のブラウザ chrome と互換性あり*/
   -moz-transition: 0.3秒;/*firefox*/
   -ms-transition: 0.3s;/*つまり*/
   -o-トランジション: 0.3s;/*オペラ*/
   遷移: 0.3秒;
  }
  /* これは小さな四角形のサイズです。位置を変更しても他の要素の位置に影響が及ばないように絶対的に配置されます。幅と高さはどちらも149pxです。 box-shadow: 1px 1px 2px #777; も設定していることに注意してください。
  境界線の影もあるので、149px に境界線の 1px を加えて、合計幅は 150px になります。下のトランジション: 0.3s はトランジション時間を設定します。これは CSS3 プロパティで、プロパティを変更してトランジション アニメーションを表示します。そのため、四角形の位置を変更するとアニメーションが表示されます。アニメーション関数を自分で記述する必要はありません。これは面倒な作業です */
  #ゲーム div:hover{
   色: #ffe171;
  }
  /*四角形のマウスホバーアニメーションを設定します。マウスが要素の上に移動すると、ここでの属性が上記の属性に置き換わります。マウスを離すと、元の状態に戻ります。ここではフォントの色を変更します*/
  ＃コントロール{
   幅: 150ピクセル;
   高さ: 450px;
   表示: インラインブロック;
   フロート: 右;
  }
  /*コントロール領域、display:inline-block は要素にブロック要素の特性を持たせ、サイズを変更できるようにします。また、インライン要素の特性も持つため、行のスペースを占有しません。float:right は要素を右にフロートさせます*/
  #制御行スパン{
   高さ: 25px;
   フォントサイズ: 20px;
   色: #222;
   上マージン: 10px;
  }
  /*コントロールエリアのボタンの共通スタイルを設定します*/
  ＃始める{
   表示: インラインブロック;
   フォントサイズ: 28px;
   幅: 100ピクセル;
   高さ: 28px;
   背景色: #20a6fa;
   色: #ffe171;
   テキストシャドウ: 1px 1px 2px #ffe171;
   境界線の半径: 5px;
   ボックスの影: 2px 2px 5px #4c98f5;
   テキスト配置: 中央;
   カーソル: ポインタ;
  }
  /*スタートボタンのプロパティを設定します。カーソル: ポインター属性は、マウスが要素上を移動したときにマウスの形状を変えます。ポインターは手の形です*/
  #リセット{
   表示: インラインブロック;
   フォントサイズ: 28px;
   幅: 100ピクセル;
   高さ: 28px;
   背景色: #20a6fa;
   色: #ffe171;
   テキストシャドウ: 1px 1px 2px #ffe171;/*フォントシャドウ*/
   border-radius: 5px;/*角丸属性*/
   box-shadow: 2px 2px 5px #4c98f5;/*ボックスシャドウ*/
   text-align: center;/*テキストを中央揃え*/
   カーソル: ポインタ;
  }
  /*リセットボタンのプロパティを設定する*/
  #d1{
   左: 0px;
  }
  #d2{
   左: 150px;
  }
  #d3{
   左: 300ピクセル;
  }
  #d4{
   上: 150px;
  }
  #d5{
   上: 150px;
   左: 150px;
  }
  #d6{
   上: 150px;
   左: 300ピクセル;
  }
  #d7{
   上: 300px;
  }
  #d8{
   左: 150px;
   上: 300px;
 }
/*これは、各小マスの位置をあらかじめ順番に並べておくためです*/

var time=0; //タイミング時間を保存します var pause=true; //一時停止フラグを設定します。trueは一時停止を意味します var set_timer; //タイミング関数を設定します var d=new Array(10); //現在大きなDIVにインストールされている小さなDIVの数を保存します var d_direct=new Array(
  [0], //ロジックをシンプルにするため、最初の要素は使用しません。インデックス 1 から開始します [2,4], //大きな DIV 番号 1 の DIV が配置できる位置。たとえば、最初のブロックは位置 2,4 に移動できます [1,3,5],
  [2,6]、
  [1,5,7],
  [2,4,6,8],
  [3,5,9],
  [4,8]、
  [5,7,9],
  [6,8]
 ); // 大きなDIV番号の移動可能な位置番号を保存します var d_posXY=new Array(
  [0], // 同様に、最初の要素 [0,0] は使用しません。 // 最初の要素は左を表し、2 番目の要素は上を表します。たとえば、最初のブロックの位置は let: 0px、top: 0px です。
  [150,0],
  [300,0],
  [0,150],
  [150,150],
  [300,150],
  [0,300],
  [150,300],
  [300,300]
 ); // 大きな DIV 番号の位置 d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; // デフォルトの順序はソートされています。9 番目のブロックには大きな DIV がないので、0 です。0 は空白ブロックを表すために使用します。 function move(id){
  // 移動関数についてはすでに説明しました var i=1;
  (i=1; i<10; ++i)の場合{
   if(d[i] == id)
    壊す;
  }
  // この for ループは、大きな DIV 内の小さな DIV の位置を見つけるためのものです。var target_d=0;
  // 小さな DIV が配置できる場所の番号を保存します。0 は移動できないことを意味します。target_d=whereCanTo(i);
  // 小さな DIV がどこに移動できるかを調べるために使用されます。0 を返す場合は、移動できないことを意味します。移動できる場合は、移動できる位置番号を返します if( target_d != 0){
   d[i] = 0;
   // 現在の小さな DIV が移動されたため、現在の大きな DIV には小さな DIV がないため、現在の大きな DIV 番号を 0 に設定します。d[target_d]=id;
   // クリックされた小さな DIV の番号をターゲットの大きな DIV に設定します。 document.getElementById("d"+id).style.left=d_posXY[target_d][0]+"px";
   document.getElementById("d"+id).style.top=d_posXY[target_d][1]+"px";
   //最後にクリックした小さな DIV の位置を設定し、対象の大きな DIV の位置に移動します}
  //target_d が 0 でない場合は移動可能であることを意味し、target_d は小さな DIV が移動する大きな DIV の位置番号です。var Finish_flag=true;
  //ゲーム完了フラグを設定します。true は完了を意味します for(var k=1; k<9; ++k){
   d[k] != kの場合{
    終了フラグ=false;
    壊す;
    // 大きな DIV に保存された数字が自身の数字と異なる場合は、すべてが順番に並んでいないことを意味するため、これを false に設定してループから抜け出し、後で再度判断する必要はありません。1 つでも一致しない限り、ゲームは完了しません。}
  }
  // 1 から始めて、各大きな DIV に保存されている数値を走査し、完了したかどうかを判断します。if (finish_flag==true) {
   if(!一時停止)
    始める（）;
   alert("おめでとうございます");
  }
  // true の場合、ゲームが終了したことを意味します。現在一時停止されていない場合は、一時停止メソッドが呼び出され、ゲームを終了するためのプロンプト ボックスがポップアップ表示されます。
  //start() は開始と一時停止を同時に行う関数です。一時停止中の場合は呼び出し後に開始します。開始済みの場合は呼び出し後に一時停止します。}
 関数 whereCanTo(cur_div){
  // 移動可能かどうかを判断する関数。パラメータは、小さい DIV の番号ではなく、大きい DIV の番号です。小さい DIV の番号は、移動できる場所とは関係がないためです。小さい DIV は移動できます。var j=0;
  var move_flag = false;
  j=0; j<d_direct[cur_div].length; ++j){
   //すべての可能な場所をループします if( d[ d_direct[cur_div][j] ] == 0 ){
    移動フラグ=true;
    壊す;
   }
   // ターゲット値が 0 の場合、ターゲット位置に小さな DIV が存在しないことを意味します。その場合は移動でき、ループは終了します}
  移動フラグが true の場合
   d_direct[cur_div][j]を返します。
  }それ以外{
   0を返します。
  }
  // 移動できる場合は、ターゲット位置の番号を返し、そうでない場合は、移動できないことを示す 0 を返します}
 // タイミング関数、1秒ごとに実行される function timer(){
  time+=1;//1秒プラス1、単位は秒です。var min=parseInt(time/60);//秒を分に変換します。1分は60秒なので、商は分です。var sec=time%60;//余りは秒です。document.getElementById("timer").innerHTML=min+"分"+sec+"秒";//次に時間を更新して表示します。}
 //一時停止機能を開始する function start(){
  if(一時停止){
   document.getElementById("start").innerHTML="Pause"; //ボタンのテキストを一時停止に設定します pause=false; //一時停止はfalseに設定することを意味します
   set_timer=setInterval(timer,1000);// 計時を開始// 現在一時停止中の場合は開始}else{
   ドキュメントの要素を取得します。
   一時停止=true;
   間隔をクリアします(set_timer);
  }
 }
 //リセット関数 function reset(){
  time=0; // 時間を0に設定する
  random_d(); //ブロックをランダムにシャッフルします if(pause) //一時停止の場合は、タイミングを開始します start();
 }
 //ブロックをランダムにシャッフルします。9 番目のブロックから始めて、ランダムに数字を生成し、2 つのブロックを入れ替えるというアイデアです。function random_d(){
  for(var i=9; i>1; --i){
   var to=parseInt(Math.random()*(i-1)+1); // 1 から i までの範囲の乱数を生成します。この ID の DIV がないため、範囲を超えることはできません。
   d[i]!=0の場合{
    document.getElementById("d"+d[i]).style.left=d_posXY[to][0]+"px";
    document.getElementById("d"+d[i]).style.top=d_posXY[to][1]+"px";
   }
   //現在のDIV位置をランダムに生成されたDIV位置に設定するif(d[to]!=0){
    document.getElementById("d"+d[to]).style.left=d_posXY[i][0]+"px";
    document.getElementById("d"+d[to]).style.top=d_posXY[i][1]+"px";
   }
   //ランダムに生成された DIV の位置を現在の DIV の位置に設定します var tem = d[to];
   d[to]=d[i];
   d[i] = 要素;
   //次に、2 つの DIV に保存された数値を交換します}
 }
 // 初期化関数。ページが読み込まれたときにリセット関数を呼び出して最初からやり直します。window.onload=function(){
  リセット();
 }