このページではソースコードの一部分を簡単な解説をしています。
作成したゲームはコチラから
ソースコードはgithubにあります
概要
ゲーム画面をクリックするとゲームがスタートします。ランダムなタイミングで画面の色が黄色に変わるので、色が変わったらクリックします。色が変わってからクリックまでの反応速度を計5回測定して、平均タイムを競うゲームです。
ランキング機能を実装しました。ブログ記事は↓にあります。
ランダムなタイミングで画面の色を変える
const div = document.querySelector("div");
// ランダム秒後にパネルの色を変える
function changeColor() {
let time = Math.floor(Math.random() * 3000) + 2000;
setTimeout(() => {
div.style.background = "#FFFF77";
const startTime = new Date();
timer(startTime);
}, time);
}今回はMath.random関数を使い0～3000ミリ秒の間のランダムな秒数を作成して、Math.floor関数で整数にし、ゲームの間の時間を作るために2000ミリ秒をプラスしています。setTimeout関数に先ほど作成したランダムな秒数をセットをして、その時間が経過したら画面の色が変わるようにしました。色が変わると同時にDateコンストラクターで時間を取得しています。
タイムを計測する
// パソコンかスマートフォンか判定
const eventType = ((window.ontouchstart !== null) ? 'click' : 'touchstart');
// タイム計測
function timer(startTime) {
div.addEventListener(eventType, stop);
function stop() {
const stopTime = new Date();
const time = (stopTime.getTime() - startTime.getTime()) / 1000;
}
}addEventListenerメソッドを使用して画面がクリックかタップされたらDateコンストラクターで時間を取得し、画面の色が変わったときに取得した時間との差分でタイムを計測しています。
