ASP.NET Core版 タイピングゲームをつくる(2)の続きです。クライアントサイドにおける処理を実装します。

HTML部分

Pages\Typing\game.cshtml

JavaScript部分

wwwroot\typingフォルダのなかにtyping.jsという名前でjsファイルを作成します。

初期化の処理

ここではレイアウトの調整、Canvasの初期化(後述)、BGMがゲーム中はエンドレスで再生されるように設定(後述)し、効果音のボリューム調整(後述)をおこないます。そのあとAspNetCore.SignalRで接続を試みます。

wwwroot\typing\typing.js

キャンバスの初期化の処理を示します。Canvasの大きさの設定をおこない、そのあと全体を黒で塗りつぶします。そしてゲームが開始される前はCanvasに「タイピングゲーム」と表示させます。それからそれだけではさみしい(?)のでスコアと残機を0の状態で表示させます。

効果音の初期化

ここでは効果音のボリュームの設定をおこなっています。あとタイピングゲームなのであまりBGMが大きすぎるのはどうかと思ったので小さめの値(効果音の半分)を設定しています。

ゲーム中はBGMをエンドレスで再生したいので0.5秒おきに一定の部分まで再生されたかどうかを調べて、その場合は最初から再生しなおしています。最後まで再生した段階で最初から再生するという方法もあるのですが、素材として使っているBGMが変なところで切れているので適切な場所(このBGMなら79秒がよさそう)で最初から再生しなおしています。

接続成功時の処理

AspNetCore.SignalRで接続しようとして正常に処理が完了したときは、サーバーサイドから”SuccessfulConnectionToClient”が送信されます。クライアントサイドでこれを受信したらグローバル変数connectionIDにIDを保存しておきます。またページの下部にIDを表示させます。

ゲーム開始時の処理

ゲーム開始のときはテキストボックスに入力されたプレイヤー名とconnectionIDに保存されている文字列をサーバーサイドに送信します。

この処理がうまくいったらサーバーサイドから”EventGameStartToClient”が送信されます。これを受信したらスタートボタンを非表示にします。またプレイが開始されたのでisPlayingフラグをtrueに変更し、ミスによる中断はしていないのでisStopingフラグをfalseに変更します。

キー操作時の処理

キーが押下されたときの処理を示します。

通常のタイピングゲームではアルファベットを入力するので、お題が「ふじさん」だと「huzisann」になり「fujisann」では間違いと判定されるという問題があります。また人によっては普段はローマ字入力ではなく「カナ入力」をする場合もあるかもしれません。

どれであっても最終的に「ふじさん」と表示されている状態でEnterキーまたはSpaceキーを押した段階で正誤判定ができるようにしたいので、技を使います。

EnterキーまたはSpaceキーが押された段階でテキストボックスの文字列を取得してサーバーサイドに送信したいのですが、IMEが起動しているときはe.keyCodeは229にしかなりません。ただしキーが離されたときはEnterキーなら13、Spaceキーなら32になります。

そこでキーが押下された段階でテキストボックスの文字列を取得し、グローバル変数に格納します。キーが離されたときのe.keyCodeが13または32ならこのときグローバル変数に格納されている文字列をサーバーサイドに送ることにします。

引数として渡された文字列をサーバーサイドに送る処理を示します。

プレイされる前であったりゲームが中断されているときは、テキストボックスをクリアするだけでなにもしません。そうでないときはプレイヤー名と引数をサーバーサイドに送信します。

Canvasへの描画

プレイ中はお題とスコアと残機を描画させます。また残り時間が少なくなるにつれてミサイルを右から左に移動させます。

ミス時はしばらくの間、背景を赤と黒でチカチカさせます。グローバル変数 drawCountOnMissでミス時の更新回数を数えて2の倍数で10未満のときだけ背景を赤にしてそれ以外の時は黒にします。ミス時以外のときはdrawCountOnMissは強制的に0にします。

ミス時はお題は消去します。またゲームオーバー時には’GAME OVER’と描画させます。

新しいお題がサーバーサイドから送られてきたときの処理を示します。

ミス時はテキストボックスに文字列が入力されている場合があるので、これをクリアします。あとは上記のDrawToCanvas関数を呼び出すだけです。

残り時間が変動したらサーバーサイドから”UpdateEventToClient”が送られてきます。このときも上記のDrawToCanvas関数を呼び出して適切な描画処理をおこないます。

正誤判定の処理

お題に対する入力が正しいか間違っているかの判定結果をサーバーサイドから受け取ったときの処理を示します。

どちらも効果音を鳴らすだけです。スコアの計算等はサーバーサイドでおこなわれます。

ミス時の処理

ミスをするとサーバーサイドから”MissEventToClient”が送信されます。

テキストボックスの文字列をクリアします。そのあとisStopingフラグをセットし効果音を鳴らします。

ミスから復帰したときには”ResumeEventToClient”が送られてきます。この場合はミス時にセットされたフラグをクリアします。

ゲームオーバー時の処理

ゲームオーバーになったらサーバーサイドから”GameOverEventToClient”が送信されます。

この場合はisPlayingフラグをクリアしてBGMを止め、ます。そして非表示になっていたゲーム開始用のボタンを再表示させます。