15パズルを作ってみよう！ - 2 配置をランダムに。

続いて、ゲームの画面になるような四角の中に数字を入れる仕組みを作っていきます。。

HTML部分、<div id="panel"></div>としています。"id"の名前を"panel"としているのでCSSは#panelについて記述指定いきます。

   #panel {
　　　width: 160px;
　　　height: 160px;
　　　overflow: hidden;
    }

border: 1px solid;

わかりにくいのでを追加して枠線をつけて表示させてみます。

しっかり適応されていることがわかります。

次にfor文でエレメントを追加していきます。

どこに追加するかというと

 for (i = 0; i < 9; i++) {
        var div = document.createElement('div');
      
      // 追加部分　　　　

        div.textContent = arr[i];
        panel.appendChild(div);
      }

追加の内容は

    div.className = 'tile';

変数divにクラスを追加する命令となります。クラス名を'tile'とします。

あとはCSSを指定します。

数字ごとに四角に入れて配置させます。クラス名が 'tile'なので

  .tile {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border: 1px solid silver;
      border-radius: 10px;
      text-align: center;
      font-size: 26px;
      font-weight: bold;
      box-shadow: gray 2px 2px;
      float: left;
      cursor: pointer;
    }

とします。

四角のスタイル部分は

width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid silver;
border-radius: 10px;
text-align: center;
font-size: 26px;
font-weight: bold;
box-shadow: gray 2px 2px;

通常は縦に並ぶのでそれを横向きにする

float: left;

これで四角の枠の中に四角で囲われた数字が配置されます。

数字の上にマウスの矢印がいくとポンタに変化します。

cursor: pointer;

CSSのコード全体です。

  <style>
    #panel {
      width: 160px;
      height: 160px;
      overflow: hidden;
    }

    .tile {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border: 1px solid silver;
      border-radius: 10px;
      text-align: center;
      font-size: 26px;
      font-weight: bold;
      box-shadow: gray 2px 2px;
      float: left;
      cursor: pointer;
    }
  </style>

実行するとfor文が実行され繰り返しでコードが生成されます。

とうまく表示されました。配列の順番どうりに表示されています。

HTMLは

<div id="panel">
<div class="tile">
<div class="tile">1</div>
<div class="tile">2</div>
<div class="tile">3</div>
<div class="tile">4</div>
<div class="tile">5</div>
<div class="tile">6</div>
<div class="tile">7</div>
<div class="tile">8</div>
</div>

とつくられています。
(実行されているページのソースをインスペクタ"検証"などで見ればわかります)

数字の表示のランダム化

ゲームにするために数字の順番をランダムに表示できるようにします。操作としては変数で定義している配列の値をランダムにします。方法は

[JavaScript]配列(Array)をシャッフルするには？

のサイトで紹介されている一番シンプルなやつを使って

 arr.sort((a, b) => 0.5 - Math.random());

としましょう。

配列arrを定義している下にコードを追加して実行してみましょう。

 var arr = ['', '1', '2', '3', '4', '5', '6', '7', '8'];

 arr.sort((a, b) => 0.5 - Math.random());

ランダムに数字が配置されるようになります。