Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
HTMLとCSSとJavaScriptを使って反応速度テストゲームを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

HTMLとCSSとJavaScriptを使って反応速度テストゲームを作ってみる

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

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

スポンサーリンク

概要

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

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

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

今回はMath.random関数を使い0~3000ミリ秒の間のランダムな秒数を作成して、Math.floor関数で整数にし、ゲームの間の時間を作るために2000ミリ秒をプラスしています。setTimeout関数に先ほど作成したランダムな秒数をセットをして、その時間が経過したら画面の色が変わるようにしました。色が変わると同時にDateコンストラクターで時間を取得しています。

タイムを計測する

addEventListenerメソッドを使用して画面がクリックかタップされたらDateコンストラクターで時間を取得し、画面の色が変わったときに取得した時間との差分でタイムを計測しています。

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

モバイルバージョンを終了