15パズルを作ってみよう！ - 3 移動。

配置もランダムにできるようになったので次はクリックして番号を移動させるようにしていきます。

移動できるように新しい配列

 const tiles = [];

for文の中で配列tilesに値を追加します。

インデックスの追加

div.index = i;

配列に追加

tiles.push(div);

そして移動するタイミング。数字をクリックした時に移動させる関数が動くようにします。

div.onclick = click;

これで数字をクリックしたタイミングで関数"click"が動きます。

全体は

   for (i = 0; i < 9; i++) {
        const div = document.createElement('div');
        div.className = 'tile';
        div.index = i;
        div.textContent = arr[i];
        div.onclick = click;
        panel.appendChild(div);
        tiles.push(div);
      }

となります。

"click"関数は

function click(e) {

JavaScriptの引数「e」とは？ 〜イベントオブジェクトについて。

 const i = e.target.index;

で押した数字のindexを取得します。その"i"を利用して空欄があるかないかを判定してあれば空欄と入れ替えをします。

下に空欄がある場合

if (i <= 5 && tiles[i + 3].textContent == '') {
        swapContent(i, i + 3);
}

"i <= 5"というのは"i"が6,7,8の場合では下には空欄ができないので除外。
"i+3"することで選んだ数字の上が指定できます。

この条件で空欄"textContent == '')"があれば

swapContent(i, i + 3);

交換します。

上に空欄がある場合

else if (i >= 3 && tiles[i - 3].textContent == '') {
        swapContent(i, i - 3);
}

下に空欄がある時の逆の考え方で該当があれば入れ替えます。

右に空欄がある場合

else if (i % 3 !== 2 && tiles[i + 1].textContent == '') {
swapContent(i, i + 1);
}

"i % 3"で右端かどうかを判定。右端であれば選んだ右側に空欄はできないので除外。
選んだものに"+1"してやれば右側が取得できるので、"i + 1"が空欄どうかを判定。

空欄であれば

swapContent(i, i + 1);

左に空欄がある場合

 else if (i % 3 !== 0 && tiles[i - 1].textContent == '') {
        // 左と入れ替え
        swapContent(i, i - 1);
}

右の逆の考え方です。

数字の入れ替えの関数

  function swapContent(i, k) {

      const temp = tiles[i].textContent;
      tiles[i].textContent = tiles[k].textContent;
      tiles[k].textContent = temp;

    }

を使って実現します。新しい変数を用意して入れ替えるものを待避させる操作をして対象を入れ替え、待避したものをもとのものに戻す。文にするとややこしいです。

全体のコードです。クリックしたものを判定して入れ替えます。

    function click(e) {

      const i = e.target.index;

      if (i <= 5 && tiles[i + 3].textContent == '') {
        swapContent(i, i + 3);

      } else if (i >= 3 && tiles[i - 3].textContent == '') {
        swapContent(i, i - 3);

      } else if (i % 3 !== 2 && tiles[i + 1].textContent == '') {
        swapContent(i, i + 1);

      } else if (i % 3 !== 0 && tiles[i - 1].textContent == '') {
        swapContent(i, i - 1);
      }
    }

これで一通りゲームができる状態となります。以下参考にさせていただいたサイトです。

JavaScript: スライドパズルの作り方