JavaScriptで5秒当てゲーム

See the Pen JavaScriptで5秒当てゲーム by takapen (@takapen) on CodePen.

html

start

JavaScript

(function(){//即時関数で囲うと他に影響を与えない
  "use strict";//厳密なエラーチェック
  
  //スタートボタンを押した後なのかそうでないのかを知りたいので、この変数を宣言する
  var isStarted = false;//最初はスタートしてないのでfalseにしておく
  var startTime;//スタートボタンを押した時に現在の時間を保持しておきたい
  var diff;//押された時からスタートタイムを引く。その差を保持しておく変数
  var msg = "5秒で止めろ！";
  
  var result = document.getElementById("js-result");
  var btn = document.getElementById("js-btn");
  
  result.innerHTML = msg;
  
  btn.addEventListener("click", function(){
    if(!isStarted){//isStartedがfalseだったら
      isStarted = true;
      this.innerHTML = "stop";
      startTime = Date.now();
      result.innerHTML = msg;//スタートボタンを押したら最初のメッセージを表示。
    } else {
      isStarted = false;
      this.innerHTML = "start";
      diff = (Date.now() - startTime) / 1000 - 5;//今の時間からスタートタイムを引く。ミリ秒を1000で割って秒にする。5秒との差のためさらに5を引く。
      //console.log(diff);
      if ( diff >= -0.1 && diff <= 0.1) {//5秒の前後0.1秒を許容範囲にする
        result.innerHTML = "パーフェクト";
      } else if ( diff > 0) {
        result.innerHTML = "あなたは"  + diff.toFixed(2) + "秒遅かった"//小数点2桁まで表示
      } else {
        result.innerHTML = "あなたは"  + Math.abs(diff).toFixed(2) + "秒速かった"//マイナスなので絶対値を表示するabsをつかう。小数点2桁まで表示
      }
    }
  });
  
})();

参照 ： ドットインストール