15 puzzle - TSUTAYA

<!DOCTYPE html>
<html>
<head>
    <title>15 puzzle</title>
    <meta charset="UTF-8">
    <style>
          .tile {
            width: 70px;
            height: 70px;
            border: 1px solid rgb(105, 255, 0);
            border-radius: 10px;
            text-align: center;
            font-size: 30px;
            color: rgb(210, 40, 40);
            background-color: rgb(0, 0, 0);
            box-shadow: rgb(201, 11, 255) 10px 10px;
            text-shadow: 1px 1px 3px rgb(66, 255, 0);
          }
          h1{
            color: rgb(255, 0, 0);
          }

    </style>
    <script type="text/javascript">

        "use strict";

        // 広域変数
        var tiles = [];


        // 初期化関数
        function init() {
          var table = document.getElementById("table");

        for (var i = 0 ; i < 4 ; i++) {
            var tr = document.createElement("tr");
            for (var j = 0 ; j < 4 ; j++) {
              var td = document.createElement("td");
              var index = i * 4 + j;
              td.className = "tile";
              td.index = index;
              td.value = index;
              td.textContent = index == 0 ? "" : index;
              td.onclick = click;
              tr.appendChild(td);
              tiles.push(td);
                }
                table.appendChild(tr);
                //timer = setInterval(tick,1000);
              }
              for (var i = 0; i < 1000 ; i++) {
                click({ srcElement: {index: Math.floor(Math.random() * 16)}})
              }
            }

            function click(e) {
              var i = e.srcElement.index;

              if (i - 4 >= 0 && tiles[i - 4].value == 0) {
                swap(i, i - 4); //上
            } else if (i + 4 < 16 && tiles[i + 4].value == 0) {
                swap(i, i + 4);　//下
            } else if (i % 4 != 0 && tiles[i - 1].value == 0) {
                swap(i, i - 1);　//左
            } else if (i %  4!= 3 && tiles[i + 1].value == 0) {
                swap(i, i + 1);　//右
            }
          }

          function tick() {
            var now = new Dete();
            var elapsed = Math.floor((now.getTime() - startTime.getTime()) /1000);
            document.getElementById("time").textContent = elapsed;
          }

          function swap(i, j) {
            var tmp = tiles[i].value;
            tiles[i].textContent = tiles[j].textContent;
            tiles[i].value = tiles[j].value;
            tiles[j].textContent = tmp;
            tiles[j].value = tmp;
          }
    </script>
  </head>
<body onload="init()">
    <h1>15 puzzle</h1>
      <table id="table"></table>
</body>
</html>