JavaScriptで数字タッチゲームを作ろう（ドットインストールから引用）

ドットインストールを参考にしてます。
https://dotinstall.com/
※プレミアム会員のみ閲覧可能

完成イメージ

　　　　　　　　↓

　　　　　　　　↓

実装したい要件の整理

• 初期画面:
  • UI設定。
    
  • 画面をクリックするとタイマー起動＋数字が出現
• ゲーム画面：
  • タイマー稼働。
    
  • 順番に数字を押していくと、色が変わる
  • ランダムにクイズを出題。
  • RESTARTのボタンが出現
• 結果画面
  
  • タイマーが止まる

ソースコード(body要素のみ表示/CSSは省略)

<div id="container">
  <div id="score">0.00</div>
  <div id="board">
    <!-- <div class="panel">0</div>
    <div class="panel">1</div>
    <div class="panel">2</div>
    <div class="panel">3</div>
    <div class="panel">4</div>
    <div class="panel">5</div>
    <div class="panel">6</div>
    <div class="panel">7</div>
    <div class="panel">8</div> -->
  </div>
  <div id="btn">START</div>
</div>


<script type="text/javascript">
  'user strict'
  // jsでUI生成
  // let panel;
  // panel = document.createElement('div');
  // panel.className = "panel";
  // panel.textContent = 0;
  // board.appendChild(panel);

  const SIZE = 3;
  const PANEL_WIDTH = 50;
  const BOARD_PADDING = 10;
  let startTime;
  let timerId;

  // 今押すべき数値
  let currentNum = 0;

  function createPanel(num){
    let panel = document.createElement("div");
    panel.className = "panel hidden";
    panel.textContent = num;
    // 先に、パネルにイベントを設定
    panel.addEventListener("click", function(){
    // 文字列を数値に変えている。 * 1でも良い
    // thisは今、イベントと定義しているpanelを差している
      if ((this.textContent - 0) === currentNum){
        this.className = "panel flipped"
        currentNum++;
      }
      if (currentNum === SIZE * SIZE){
        clearTimeout(timerId);
      }
    });
    return panel;
  }

  function initBoard(){
    let board = document.getElementById("board");
    let i;
    var panels = [];
    let panel;

    // CSSを修正
    document.getElementById('container').style.width = PANEL_WIDTH * SIZE + BOARD_PADDING * 2 + 'px';

    // boardの最初の子要素がある限り、子要素を削除する
    // よく使われるテクニック
    while(board.firstChild){
      board.removeChild(board.firstChild)
    }

    for (i = 0; i < SIZE * SIZE; i++){
      // board.appendChild(createPanel(i));
      // 配列に数字と格納する
      panels.push(createPanel(i));
    }

    // spliceメソッドを使用し、ランダムに配置する
    // ランダムな数値の生成は、決まったコードを記載
    // panelsの要素数だけ、処理をループするのでwhileを使用
    while(panels.length){
      panel = panels.splice(Math.floor(Math.random() * panels.length), 1);
      board.appendChild(panel[0]);
    }
  }

  function runTimer(){
    // 単位がミリ秒なので、1000で割って秒に直す
    document.getElementById("score").textContent = ((Date.now() - startTime) / 1000).toFixed(2);
    // 再帰的に呼び出す
    timerId = setTimeout(function(){
      runTimer();
    }, 10)
  }

  initBoard();


  // hiddenクラスを外してあげる
  document.getElementById("btn").addEventListener("click",  function(){
    // 配列で要素を取得
    let panels = document.getElementsByClassName("panel");
    var i;

    // もしタイマーが走っているときは、タイマーを止める
    if(typeof timerId !== "undefined"){
      clearTimeout(timerId);
    }

    initBoard();
    for(let i = 0; i < panels.length; i++){
      panels[i].className = "panel";
    }
    this.textContent = "RESTART?";
    this.className = "restart";
    startTime = Date.now();
    runTimer();
  });
</script>