[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

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

// クリックされたマスと隣接する空白のマスと入れ替える
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章の内容です。

ゲームで学ぶJavaScript入門 HTML5&CSSも身につく！