目的
ゴール
・JavaScriptで5秒当てゲームを作って、チートする
制作物
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