HTMLとCSSとJavaScriptを使って反応速度テストゲームを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト

このページではソースコードの一部分を簡単な解説をしています。

作成したゲームはコチラから
ソースコードはgithubにあります

概要
ランダムなタイミングで画面の色を変える
タイムを計測する

概要

ゲーム画面をクリックするとゲームがスタートします。ランダムなタイミングで画面の色が黄色に変わるので、色が変わったらクリックします。色が変わってからクリックまでの反応速度を計5回測定して、平均タイムを競うゲームです。

ランキング機能を実装しました。ブログ記事は↓にあります。

PHPとSqliteとJavaScriptを使ってランキング機能を実装してみる１

サンプルのソースコードはgithubにあります。概要過去に制作したゲームの一部に上位3位までを表示するランキング機能を実装してみました。↓のゲームは３秒間にクリックした回数を競うゲームです。３位までに入るとランキングに登録することが出来ま...

ランダムなタイミングで画面の色を変える

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

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