JavaScriptで大ポイングゲームを作ろうの受講が完了しました。
#ドットインストール
「JavaScriptでタイピングゲームを作ろう」完了。
実装方法は動画のほうが良かったけど、機能を満たせたことが大事。
ただ一つゲーム終了時のタイマーの誤差の解決方法を自分で見つけられなかったのが心残り。#プログラミング学習 #駆け出しエンジニアと繋がりたい— じゅに💻脱サラに命かける人 (@Jyu210) December 30, 2019
学習内容
以下の仕様のタイピングゲームを全15回の動画を通して作り上げることになります。
- 画面をクリックするとゲームスタート
- 問題の文字列がランダムに表示される
- タイピングが成功したら該当文字を「_」に置き換える
- 表示された文字列を全てタイピングしたら次の文字列が表示される
- 成功タイプ数、失敗タイプ数、残り時間がリアルタイムに表示される
- タイプアップしたら結果をポップアップで表示する
- アラームを閉じると、ゲームスタート前に戻る
今回も最初の完成サイトのWebページを見てから、まずは自分で実装してみました。
つまずいたポイントなど
以下つまいずいたポイントや、動画のほうが良いなと思った点です。
Keydownイベント
自分はKeydownイベントは以下のように実装しました。
|
1 2 3 4 5 |
document.addEventListener('keydown', keydown) function keydown() { pushKey = event.code; } |
これだと押されたキーが「KeyA」などの余分のようなものがついた状態で取得できるので、比較対象の「A」を取得するのに4文字目を取るとかしないといけないのでめんどうです。
それが動画だと。
|
1 2 3 |
window.addEventListener('keydown', e => { pushKey = e.key; } |
というふうにしています。
これだと押されたキーが「a」などのように取得できるので、比較がするのが楽なのでこちらのほうがよかったですね。
自分の記述と動画の記述で何故このような違いができるかの説明ができないのはまだ勉強不足です。
タイムアップ時のタイマー表示
タイムアップ時にタイマーの表示を「0.00」にクリアしているはずなのにうまくいきませんでした。

これはアラームが表示されている間はブラウザの描写が中断されるためらしいです。
なのでいくらアラームの前にタイマーの表示を「0.00」のクリア処理を書いたとしても、実際に描写される前にアラームが表示されてしまうため、このような問題が発生してしまうとのこと。
解決方法としてはアラームの前にスリープを入れるという単純なもの。
しかし、JavaScriptは単純なSleep機能はないので以下のような実装を行う必要があります。
|
1 2 3 |
setTimeout(() => { // アラーム処理 }, 100); |
setTimeout()は指定した時間（ミリ秒）後に処理を実行する機能になるので、それを利用した形になります。
setTimeout()は指定した時間経過後に処理を行うsetInterval()と合わせてきちんとおさえて置く必要がありますね。
ちなみにタイムアップのカウントダウンは動画ではDate関数を使って実現しましたが、僕はsetInterval()を使用してカウンタで実現してます。
感想
前回の「JavaScriptでストップウォッチを作ろう」で日付の計算を学習しましたが、結局タイマーは得意のカウンタで実装していました。
でも実装できたからOKです。
最初完成ページを見た時はいきなり難易度上がったなぁと思いましたが、冷静になったらなんとかなりましたね。
ググって試して解決する。
これたまんなく上がります。
この調子も次にいきます。
