山傘のプログラミング勉強日記

プログラミングに関する日記とどうでもよい雑記からなるブログです。

[JavaScript] 15パズルゲーム

15パズルゲーム

ja.wikipedia.org

元の配置に戻すパズルゲームを JavaScript で作成します。

表の作成

JavaScript で表を作成し、スクリプトで制御します。

  const table = document.getElementById('table');
  const tiles = [];
  for (let i = 0; i < 4; i++) {
    const tr = document.createElement('tr');
    for (let j = 0; j < 4; j++) {
      let td = document.createElement('td');
      td.className = "tile";
      td.index = 4 * i + j;
      td.value = 4 * i + j;
      if (4 * i + j == 0) {
        // 1マスだけ空白となる
        td.textContent = "";
      } else {
        td.textContent = 4 * i + j;
      }
      td.tiles = tiles;
      td.onclick = click;
      tr.appendChild(td);
      tiles.push(td);
    }
    table.appendChild(tr);
  }

tiles という変数をグローバル変数としていないので、

td.tiles = tiles

というコードで参照?を持たせています。あまりいい書き方ではないと思いますが、仕方ありません。

クリック機能

クリックしたマスが空白マスト隣接している場合、入れ替えます。

td.onclick = click

で表のセルにクリックイベントを持たせているんでしょyか?

// クリックされたマスと隣接する空白のマスと入れ替える
function click(e) {
  const idx = e.srcElement.index;
  const tiles = e.srcElement.tiles;
  if (idx - 4 >= 0 && tiles[idx - 4].value == 0) {
    swap(idx, idx - 4, tiles);
  } else if (idx + 4 < 16 && tiles[idx + 4].value == 0) {
    swap(idx, idx + 4, tiles);
  } else if (idx - 1 >= 0 && tiles[idx - 1].value == 0) {
    swap(idx, idx - 1, tiles);
  } else if (idx + 1 < 16 && tiles[idx + 1].value == 0) {
    swap(idx, idx + 1, tiles);
  }
}

// マスの入れ替え
function swap(i, j, tiles) {
  const tmp = tiles[i].value;
  tiles[i].textContent = tiles[j].textContent;
  tiles[i].value = tiles[j].value;
  tiles[j].textContent = tmp;
  tiles[j].value = tmp;
}

5章の内容です。