スライドパズルの制作

###スライドパズルの制作
1〜24までの数字と数字の振られていないパネルで、数字の振られていないパネルにパネルを移動させて数字を並べていくゲームです。

```html
<body onload="init()">
  <p>パネル</p>
  <table id="table"></table>
</body>
```

まず、body要素内にtable要素をidを指定して記述します。

```javascript
  <script>
    let tiles = [];
    function init() {
      let table = document.getElementById("table");
      for(let i = 0; i < 5; i++) {
        let tr = document.createElement("tr");
        for(let j = 0; j < 5; j++) {
          let td = document.createElement("td");
          index = i * 5 + j;
          td.index = index;
          td.value = index;
          td.textContent = index == 0?"":index;
          td.className = "tile";
          td.onclick = clicked;
          tr.appendChild(td);
          tiles.push(td);
        }
        table.appendChild(tr);
      }
      for(let i = 0; i < 10000; i++) {
        clicked({target: {index: Math.floor(Math.random() * 25)}});
      }
    }
```
次にscript要素内に配列tilesをグローバル変数で指定して、init関数を作成します。
init関数内では5×5になるようにtable要素内に二次元配列を展開します。(下記の部分)「tiles.push(td)」の部分で作成したtd要素を配列tilesに追加していきます。

```javascript
let table = document.getElementById("table");
    for(let i = 0; i < 5; i++) {
      let tr = document.createElement("tr");
      for(let j = 0; j < 5; j++) {
        let td = document.createElement("td");
        tr.appendChild(td);
        tiles.push(td);
      }
      table.appendChild(tr);
    }
```

td要素にはそれぞれプロパティを作成していきます。
indexには0〜24までの数字を代入していき、tdのindex要素とvalue要素に代入します。textContentには三項演算子でindexの値が0のときは空をそれ以外の値のときはindexを代入します。
クリックしたときに「clicked関数」が発火するようにします。

```javascript
  index = i * 5 + j;
  td.index = index;
  td.value = index;
  td.textContent = index == 0?"":index;
  td.className = "tile";
  td.onclick = clicked;
```
※三項演算子
「index == 0?"":index」であれば、indexの値が0のときは?の後にある""を、それ以外のときは:の後にあるindexを代入する。

```javascript
    function clicked(e) {
      let i = e.target.index;
      if(i % 5 !== 0 && tiles[i - 1].value === 0) {
        swap(i, i - 1);
      }
      if(i > 4 && tiles[i - 5].value === 0) {
        swap(i, i - 5);
      }
      if(i % 5 !== 4 && tiles[i + 1].value === 0) {
        swap(i, i + 1);
      }
      if(i < 20 && tiles[i + 5].value === 0) {
        swap(i, i + 5);
      }
    }
```

clicked関数は引数に「e」を指定します。「let i = e.target.index」でクリックしたtd要素（パネル）のindexの値を取得します。
空のパネルがクリックしたパネルの左、上、右、下、それぞれに配置されているときで処理を変えます。swap関数をそれぞれ行うようにします。(iがクリックしたパネルで「i - 1」がiの左、「i - 5」がiの上、「i + 1」がiの右、「i + 5」がiの下)

```javascript
    function swap(x, y) {
      let i = tiles[x].value;
      tiles[x].value = tiles[y].value;
      tiles[x].textContent = tiles[y].textContent;
      tiles[y].value = i;
      tiles[y].textContent = i;
    }

```

swap関数はクリックしたパネルと空のパネルの配置を変更する関数です。valueプロバティとtextContentの値を交換します。

下記が全体のコードです。ファイルにコピーして実行すれば試せます。

```html
<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>SlidePuzzle</title>
  <style>
    table {
      border-collapse: collapse;
    }
    .tile {
      width: 100px;
      height: 100px;
      font-size: 70px;
      text-align: center;
      border: 1px solid black;
    }
  </style>
  <script>
    let tiles = [];
    function init() {
      let table = document.getElementById("table");
      for(let i = 0; i < 5; i++) {
        let tr = document.createElement("tr");
        for(let j = 0; j < 5; j++) {
          let td = document.createElement("td");
          let index = i * 5 + j;
          td.index = index;
          td.value = index;
          td.textContent = index == 0?"":index;
          td.className = "tile";
          td.onclick = clicked;
          tr.appendChild(td);
          tiles.push(td);
        }
        table.appendChild(tr);
      }
      for(let i = 0; i < 10000; i++) {
        clicked({target: {index: Math.floor(Math.random() * 25)}});
      }
    }

    function clicked(e) {
      let i = e.target.index;
      if(i % 5 !== 0 && tiles[i - 1].value === 0) {
        swap(i, i - 1);
      }
      if(i > 4 && tiles[i - 5].value === 0) {
        swap(i, i - 5);
      }
      if(i % 5 !== 4 && tiles[i + 1].value === 0) {
        swap(i, i + 1);
      }
      if(i < 20 && tiles[i + 5].value === 0) {
        swap(i, i + 5);
      }
    }

    function swap(x, y) {
      let i = tiles[x].value;
      tiles[x].value = tiles[y].value;
      tiles[x].textContent = tiles[y].textContent;
      tiles[y].value = i;
      tiles[y].textContent = i;
    }
  </script>
</head>

<body onload="init()">
  <p>パネル</p>
  <table id="table"></table>
</body>
</html>
```