Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
JavaScriptでタッチナンバーゲームを作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

JavaScriptでタッチナンバーゲームを作ってみる

このページではソースコードの一部分を簡単な解説をしています。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります

スポンサーリンク

概要

数字を1から順に20までをタッチをしてタイムを競うゲームです。

数字がタッチされた時の処理

数字部分はdiv要素で作成し、イベントリスナーを設定しています。タッチされるとclickNumber関数が実行されます。
※以下からのコードは直接的に関係ない属性・変数名は省略しています。コード全体はgithubにあります。

タッチされたdiv要素のtextContentプロパティとcount変数の値が同じだった場合は正解と判定をし、クラス属性を付け替えCSSで青丸に塗りつぶしています。count変数が20になるとend関数が実行されゲーム終了となります。

タイムを測定する

ゲームがスタートするとtimer関数が実行されタイムの計測が始まります。

startTime変数にはスタートボタンが押されたタイミングの時間をDate.now()メソッドで取得し保持しています。timer関数はsetTimeoutを使い10ミリ秒おきにDate.now()メソッドで時間を取得してstartTime変数の時間との差分を経過時間として表示させています。ゲームが終了するとend関数が実行されclearTimeoutを使いsetTimeoutを終了してタイマーを止めています。

最後までお読みいただきありがとうございました。

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