Help us understand the problem. What is going on with this article?

JavaScriptで5秒当てゲームを作る

More than 1 year has passed since last update.

目的

ゴール

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

制作物

5seconds.gif

完成版の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

shogotgm
型安全なフロントエンジニア
atrae
People Techカンパニーとして、転職サイトGreen, ビジネスマッチングアプリyenta, 組織改善プラットフォームwevoxなどのサービスを運営。全ての社員が誇りを持てる組織と事業の創造にこだわり、関わる人々がファンとして応援したくなるような魅力ある会社であり続けることを目指しています。
https://atrae.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away