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

// パソコンかスマートフォンか判定

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コンストラクターで時間を取得し、画面の色が変わったときに取得した時間との差分でタイムを計測しています。

作成したゲームはコチラから
ソースコードはgithubにあります
最後までお読みいただきありがとうございました。