「1から25まで順番にタップする」のコード - 日々是好日～every day is a good day～

前にアップした『WebVRで「1から25まで順番にタップする」ゲーム』のコードです
そんなに難しいことはしていません
もっと効率的なやり方があるかもしれませんがちょっとずつ勉強した成果です

<html>
  <head>
    <meta charset="utf-8" />
    <title>Tach the number for web VR</title>
    <meta name="description" content="Tach the number for web VR" />
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
    <script>
      var num = [];
      var count = 5; //縦・横の数
      var clickCount = 0;
      var startTime;
      var timerFlag = false;
      const beep = new Audio( "エラー音のURL" );
      //数字Boxをタップしたとき
      AFRAME.registerComponent("clickbox", {
        init: function () {
          this.el.addEventListener("click", function (evt) {
            if (timerFlag) {
              let click = document.getElementById(this.id);
              if (click.getAttribute("id") == "box" + (clickCount + 1)) {
                const scene = document.querySelector("a-scene");
                scene.removeChild(click);
                clickCount++;
                if (clickCount == 25) {
                  const timer = document.getElementById("timer");
                  timer.setAttribute("color", "red");
                  timerFlag = false;
                  clearInterval(showClock);

                  let retry = document.createElement("a-box");
                  retry.setAttribute("clickretry", "");
                  retry.setAttribute("id", "retry");
                  retry.setAttribute("position", "1.7 2 -3");
                  retry.setAttribute("scale", "1.5 0.7 0.5");
                  retry.setAttribute("color", "blue");
                  retry.setAttribute("class", "collidable");
                  scene.appendChild(retry);
                  let retrytext = document.createElement("a-text");
                  retrytext.setAttribute("position", "-0.32 0 0.5");
                  retrytext.setAttribute("color", "white");
                  retrytext.setAttribute("value", "RETRY");
                  retry.appendChild(retrytext);
                }
              } else {
                beep.play();
              }
            }
          });
        },
      });
      
      //STARTボタンをタップしたとき
      AFRAME.registerComponent("clickstart", {
        init: function () {
          this.el.addEventListener("click", function (evt) {
            const scene = document.querySelector("a-scene");
            const start = document.getElementById(this.id);
            scene.removeChild(start);

            const timer = document.getElementById("timer");
            timer.setAttribute("visible", "true");

            if (!timerFlag) {
              timerFlag = true;
              shuffleDisp();
              startTime = new Date().getTime();
            }
          });
        },
      });
      
      //RETRYボタンをタップしたとき
      AFRAME.registerComponent("clickretry", {
        init: function () {
          this.el.addEventListener("click", function (evt) {
            const scene = document.querySelector("a-scene");
            const retry = document.getElementById("retry");
            scene.removeChild(retry);
            location.reload();
          });
        },
      });
    </script>
    <script>
      //配列要素のシャッフル
      function arrayShuffle(array) {
        for (let i = array.length - 1; 0 < i; i--) {
          let r = Math.floor(Math.random() * (i + 1));
          let tmp = array[i];
          array[i] = array[r];
          array[r] = tmp;
        }
        return array;
      }

      //数字Boxをシャッフルして表示
      function shuffleDisp() {
        arrayShuffle(num);
        for (let j = 0; j < count; j++) {
          for (let i = 0; i < count; i++) {
            let box = document.getElementById("box" + num[i + j * 5]);
            box.setAttribute("position", { x: i * 0.8, y: j * 0.8, z: -2 });
          }
        }
      }

      //タイマー表示
      var showClock = function () {
        if (timerFlag) {
          let nowTime = new Date().getTime();
          let time = nowTime - startTime;
          const timer = document.getElementById("timer");
          timer.setAttribute("color", "black");
          timer.setAttribute("value", (time / 1000).toFixed(2));
        }
      };
      setInterval(showClock, 100);
    </script>
  </head>

  <body>
    <a-scene vr-mode-ui="enabled:false">
      <a-sky
        id="sky"
        src="背景画像のURL"
        radius="20"
      ></a-sky>

      <a-entity
        id="start"
        clickstart
        geometry="primitive: ring; radiusInner: 0; radiusOuter: 0.35"
        material="color: red; side: double;"
        position="1.7 0 0"
        class="collidable"
      >
        <a-text position="-0.35 0 0" value="START" color="white"></a-text>
      </a-entity>
      <a-text
        id="timer"
        position="1.5 0 0"
        value="00.00"
        color="black"
        visible="false"
      >
      </a-text>

      <a-entity>
        <a-camera position="2 1.8 3">
          <a-cursor
            cursor="rayOrigin: mouse"
            visible="false"
            raycaster="objects: .collidable"
          ></a-cursor>
        </a-camera>
      </a-entity>
    </a-scene>

    <script>
      window.onload = function () {
        const scene = document.querySelector("a-scene");
        let x;
        let y;
        for (y = 0; y < count; y++) {
          for (x = 0; x < count; x++) {
            num.push(x + y * 5 + 1);
          }
        }
        for (y = 0; y < count; y++) {
          for (x = 0; x < count; x++) {
            let box = document.createElement("a-box");
            box.setAttribute("clickbox", "");
            box.setAttribute("id", "box" + num[x + y * 5]);
            box.setAttribute("position", { x: x * 0.8, y: y * 0.8, z: -2 });
            box.setAttribute("scale", "0.6 0.6 0.4");
            box.setAttribute("color", "yellow");
            box.setAttribute("class", "collidable");
            scene.appendChild(box);
            let text = document.createElement("a-text");
            text.setAttribute("position", "-0.5 0 0.5");
            text.setAttribute("color", "blue");
            text.setAttribute("value", num[x + y * 5]);
            text.setAttribute("width", "15");
            box.appendChild(text);
          }
        }
      };
    </script>
  </body>
</html>