JavaScript

【ドットインストール】JavaScriptでタイピングゲームを作ろうを受講した感想

JavaScriptで大ポイングゲームを作ろうの受講が完了しました。

学習内容

以下の仕様のタイピングゲームを全15回の動画を通して作り上げることになります。

タイピングゲームの仕様
  • 画面をクリックするとゲームスタート
  • 問題の文字列がランダムに表示される
  • タイピングが成功したら該当文字を「_」に置き換える
  • 表示された文字列を全てタイピングしたら次の文字列が表示される
  • 成功タイプ数、失敗タイプ数、残り時間がリアルタイムに表示される
  • タイプアップしたら結果をポップアップで表示する
  • アラームを閉じると、ゲームスタート前に戻る

今回も最初の完成サイトのWebページを見てから、まずは自分で実装してみました。




つまずいたポイントなど

以下つまいずいたポイントや、動画のほうが良いなと思った点です。

Keydownイベント

自分はKeydownイベントは以下のように実装しました。

これだと押されたキーが「KeyA」などの余分のようなものがついた状態で取得できるので、比較対象の「A」を取得するのに4文字目を取るとかしないといけないのでめんどうです。

それが動画だと。

というふうにしています。

これだと押されたキーが「a」などのように取得できるので、比較がするのが楽なのでこちらのほうがよかったですね。

自分の記述と動画の記述で何故このような違いができるかの説明ができないのはまだ勉強不足です。

タイムアップ時のタイマー表示

タイムアップ時にタイマーの表示を「0.00」にクリアしているはずなのにうまくいきませんでした。

これはアラームが表示されている間はブラウザの描写が中断されるためらしいです。

なのでいくらアラームの前にタイマーの表示を「0.00」のクリア処理を書いたとしても、実際に描写される前にアラームが表示されてしまうため、このような問題が発生してしまうとのこと。

解決方法としてはアラームの前にスリープを入れるという単純なもの。

しかし、JavaScriptは単純なSleep機能はないので以下のような実装を行う必要があります。

setTimeout()は指定した時間(ミリ秒)後に処理を実行する機能になるので、それを利用した形になります。

setTimeout()は指定した時間経過後に処理を行うsetInterval()と合わせてきちんとおさえて置く必要がありますね。

ちなみにタイムアップのカウントダウンは動画ではDate関数を使って実現しましたが、僕はsetInterval()を使用してカウンタで実現してます。




感想

前回の「JavaScriptでストップウォッチを作ろう」で日付の計算を学習しましたが、結局タイマーは得意のカウンタで実装していました。

でも実装できたからOKです。

最初完成ページを見た時はいきなり難易度上がったなぁと思いましたが、冷静になったらなんとかなりましたね。

ググって試して解決する。

これたまんなく上がります。

この調子も次にいきます。

ABOUT ME
Jyu2
ソフトウェア会社(SIer)で10年以上勤務のシステムエンジニア|ポケットWiFi使用歴2年以上|ポケットWiFi+αで快適でお得なインターネット環境を構築するための情報を発信|その他、IT情報やWebサービス、アプリ、ガジェットなどの情報を発信|自分と他の人のカバンの中身を紹介するメディア「カバンの中身ラボ(https://kaban-no-nakami-labo.com/)」も運営しています。 ポケットWiFi選びに迷ったらTwitter、お問合せフォームからご連絡ください。