目的

ゴール

・JavaScriptで5秒当てゲームを作って、チートする

制作物

完成版のGithubはコチラ

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>5 seconds!</title>
  <link rel="stylesheet" href=style.css>
</head>
<body>
  <div class="container">
    <div id="target">5.000</div>
    <div id="result" class="standby">0.000</div>
    <div id="buttons">
      <div id="start">Start</div>
      <div id="stop">Stop</div>
    </div>
  </div>
  <script src=main.js></script>
</body>
</html>

style.css

.container {
  font-family: 'Courier New', sans-serif;
  width: 300px;
  margin: 30px auto 0;
  text-align: center;
  font-weight: bold;
}

# target,#result{
  font-size:32px;
  margin-bottom:15px;
  background:#ccc;
  height:60px;
  line-height: 60px;
}

# start{
  float:left;
}

# stop{
  float:right;
}

# start, #stop{
  cursor:pointer;
  font-size:18px;
  width:145px;
  background:#eee;
  height:40px;
  line-height: 40px;
  box-shadow:0 6px #ccc;
}

# result.standby{
  opacity:0.5;
}

# result.perfect{
  background:#FA5858;
  color:#fff;
}

# start.pushed, #stop.pushed{
  margin-top:3px;
  box-shadow:0 3px 0 #ccc;
}

main.js

(function(){
  'use strict';

  var start = document.getElementById('start');
  var stop = document.getElementById('stop');
  var result = document.getElementById('result');
  var startTime;
  var isStarted = false;

  start.addEventListener('click', function(){
    if(isStarted === true){
      return;
    }
    isStarted = true;
    startTime = Date.now();
    this.className = 'pushed';
    stop.className = '';
    result.textContent = '0.000';
    result.className = 'stanby';
  });

  stop.addEventListener('click', function(){
    var elapsedTime;
    var diff;
    if(isStarted === false){
      return;
    }
    isStarted = false;
    elapsedTime = (Date.now() - startTime) / 1000;
    result.textContent = elapsedTime.toFixed(3);
    this.className = 'pushed';
    start.className = '';
    result.className = '';
    diff = elapsedTime - 5.0;
    if(diff > -1.0 && diff < 1.0){
      result.className = "perfect";
    }
  });
})();

作り方

・index.htmlで以下のdivを用意する
　- "target" : 目標となる秒数
　- "result" : START→STOPの結果秒数
　- "start" : スタートボタン
　- "stop" : ストップボタン

・以下のようにスタート、ストップボタンを押した時の挙動を記述して行く

main.js

  start.addEventListener('click', function(){
   // スタートボタンを押した時の挙動
  }

  stop.addEventListener('click', function(){
   // ストップボタンを押した時の挙動
  }

・まずスタート、ストップの基本的な動作について

main.js

var startTime;
  start.addEventListener('click', function(){
   startTime = Date.now(); // (1)startTime変数にstartを押した「今の時間を入れる」
  }

  stop.addEventListener('click', function(){
   var startTime;
   elapsedTime = (Date.now()-startTime) / 1000; // (2)stopを押した「今の時間」から、startを押した時間を引く。秒→ミリ秒に直す。
  }
   result.textContent = elapsedTime.toFixed(3); //(3)ぴったりの"n秒"の時に小数点第三位まで表示する。"n.000秒"

ちょいメモ

.textContent = "挿入したい文字列"
(説明)変数に対して挿入したい文字列を指定する
http://js.studio-kingdom.com/javascript/node/text_content

.toFixed(3)
(説明)小数点第三位までを表示できるようにする
http://js.studio-kingdom.com/javascript/number/to_fixed

・さらに、ゲームの状況(=5秒カウントが始まっているかどうか)をboolean型で持たせるようにする

main.js

  var isStarted = false; // (1)始まっているかどうかの状況。初期値はfalse

  start.addEventListener('click', function(){
    if(isStarted === true){ // (2)すでに始まっていた場合はreturnで処理を抜けるようにする
      return;
    }
    isStarted = true; //(3)初期値falseに対してtrueを入れる
    // 後続の処理を記述
  }

  stop.addEventListener('click', function(){
    if(isStarted === false){ // (1)まだ始まっていない場合は処理を抜ける
      return;
    }
    isStarted = false; //(2)startでtrueが入っていたらfalseを入れて始まっていない状態(=終わった状態)にする

  }

・ボタンが押された後になんども押せないように、ボタンが押された状態であることを定義し、それに応じてstyle.cssも変える

main.js

  start.addEventListener('click', function(){
    this.className = 'pushed'; //startが押された時に'pushed'クラスをつける
    stop.className = ''; //同時にstopに対しては空のクラスをつける
  }

  stop.addEventListener('click', function(){
    this.className = 'pushed'; //stopが押された時に'pushed'クラスをつける
    start.className = '' // 同時にstartに対しては空のクラスをつける
  }

style.css

# start.pushed, #stop.pushed{
  margin-top:3px;
  box-shadow:0 3px 0 #ccc;
}

ちょいメモ

.className = '' ：
(説明) .の前に記述する要素に対してclassを付与する
https://developer.mozilla.org/ja/docs/Web/API/Element/className