ASP.NET Core版 デジタルインベーダーをつくる(2)の続きです。今回はクライアントサイドにおける処理を実装します。

HTML部分

HTML部分を示します。

Pages\DigitalInvader\game.cshtml

画像ファイルは以下のようになっています。これをプロジェクトフォルダ内のwwwroot\digital-invaderフォルダに設置します。


number0.png ~ number9.png


life1.png ~ life3.png


ufo.png none.png

音声ファイルも同様にプロジェクトフォルダ内のwwwroot\digital-invaderフォルダに設置します。

hit.mp3
hit-ufo.mp3
clear.mp3
miss.mp3
gameover.mp3

JavaScript部分

グローバル変数と定数

グローバル変数と定数は以下のように宣言されています。

初期化の処理

読み込まれたらcanvasのサイズを変更します。そして文字を描画するのでフォントと色の設定をおこないます。そのあと効果音の調整をおこないます。

それからスマホでプレイする場合、やや大きめのボタンを表示させます。これらの初期化が完了したらサーバーサイドに接続します。

接続が成功時の処理

サーバーサイドへの接続が成功したらIDが返されるので受け取り保存します。そのあと接続が成功した旨を示す文字列とIDを表示します。

ゲーム開始時の処理

プレイヤー名と接続成功時に保存しておいたIDを引数にしてサーバーサイドの”GameStart”を呼び出します。この処理が成功するとサーバーサイドから”EventGameStartToClient”が返されます。

ゲームスタートの処理が正常におこなわれたらゲームをスタートするためのボタンを非表示にします(クリックしても反応しないので非表示にする)。

キー操作時の処理

キーが押下されたときは押しっぱなしの場合、連続して送信されないようにするためにフラグをセットし、そのあいだはなにもしないようにします。また接続されていない場合はなにもしません。

サーバーサイドに”DownKey”をキーと一緒に送信します。またゲーム中であってもプレイヤー名を変更できるようにしたいのでキーが押されたらそのつどプレイヤー名も送信することにします。

ボタンクリック時(スマホの場合)の処理

スマホでプレイする場合、ZボタンとXボタンを表示させます。これらがクリックされたときの処理を示します。

サーバーサイドに”DownKey”をキー、プレイヤー名と一緒に送信します。

インベーダーの状態が変化したときの処理

インベーダーが前進したり撃墜されたりしてその状態が変化したとき、サーバーサイドから”SendEnemiesEventToClient”が送信されます。この場合はDrawDigitalInvaders関数を呼び出して描画処理をおこなわせます。

DrawDigitalInvaders関数における処理を示します。

まず文字列を配列に分解します。そのあとX座標を右へずらしながら数字に対応するイメージを描画します。

引数に対応したイメージを返す関数です。空白部分(”-“または”-“)はnone(全面黒のイメージ)を返します。

ターゲット変更時の処理

Zキーが押下された場合はターゲット変更の処理をおこないます。サーバーサイドから送信された”ChangeTargetEventToClient”を受信したら数字に対応したイメージを取得して、それを描画します。

Lifeが変更時の処理

ミスやステージクリアによってLifeが変更されたときはサーバーサイドから”ChangeLifeEventToClient”が送信されます。これを受信したら引数に対応したイメージを取得して描画処理をおこないます。

DrawLife関数に渡される値は0~3の整数です。GetImageFromLife関数で対応するイメージ(life1かlife2かlife3)を取得してこれを描画します。

DrawLifeText関数はデジタル文字としてLifeの値を描画するためのものです。数字に対応したイメージを取得してインベーダーの半分のサイズで下のほうに描画します。

スコア変更時の処理

追加点が正しく計算されているか確認するために、グローバル変数 oldScoreを宣言しています。スコアが変動したらサーバーサイドから”ChangeScoreEventToClient”が送信されるので、その引数をDrawScoreText関数に渡してスコアの描画処理をしています。

ゲームがおわってもう一度ゲームをするときにスコアが0に戻りますが、このままでは前のゲームのスコアが描画されたままになるので0のあと9桁分を黒で塗りつぶしています。

ステージの番号変更時の処理

ステージクリアによってステージの番号が変更されたときの処理を示します。

DrawStageText関数に引数を渡して描画処理を行なわせます。

DrawStageText関数は”STAGE”と引数の番号に対応するイメージを下部に描画します。

効果音に関する処理

プレイ中で[音を出す]にチェックがつけられているときだけ効果音を鳴らします。

ミス時の処理

ミス時の処理を示します。ミス時はサーバーサイドから”MissEventToClient”が送信されますが、このときは効果音を鳴らすだけでなく、無音のとき視覚的にわかるように数字をすべて8(インベーダーの残りが1個や2個のときも)にします。

ゲームオーバーになったときはサーバーサイドから”GameOverEventToClient”が送信されます。このときは効果音を鳴らすとともに、非表示になっていたゲームスタート用のボタンを再表示させます。