5秒当てゲーム ~JavaScript備忘録~

web

HTML

 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>5 seconds!</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>

  <body>
    <div class="container">
      <div id="target">5.000</div>
      <div id="result" class="standby">0.000</div>
      <div class="buttons">
        <div id="start">Start</div>
        <div id="stop">Stop</div>
        
      <script src="js/main.js"></script>
      
  </body>
</html>

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;
}

#result.standby {
  opacity: 0.5;
}

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

#start {
  float: left;
}

#stop {
  float: right;
}

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

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

JavaScript

(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 = 'standby';
  });
  
  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 (Math.abs(diff) < 1.0) {
      result.className = 'perfect';
    }
  });
})();

結果・・・Resultで結果画面が表示されます。

See the Pen ybQaMX by nuto (@exarow) on CodePen.

コメント

タイトルとURLをコピーしました