ASP.NET Core版 対戦型Pengoをつくる(3)の続きです。

cshtmlファイル

ここではPages\Pengoフォルダ内にgame.cshtmlファイルを作成します。そしてgame.cshtmlには以下のように記述します。

Pages\Pengo\game.cshtml

またwwwroot\pengoフォルダ内には以下のファイルを置きます。

player1.png
player2.png
player3.png
player4.png
wall1.png
wall2.png
fire1.png
fire2.png
fire3.png
fire4.png
fire5.png
fire6.png

それから音声ファイルとして以下を準備しました。

kick.mp3
explotion.mp3
dead.mp3
gameover.mp3
notification.mp3

JavaScript部分

次にJavaScriptですが、wwwroot\pengoフォルダ内にapp.jsを作成します。

グローバル変数

wwwroot\pengo\app.js

初期化

Canvasのサイズを設定して効果音のボリュームを最適化します。また一部のHTMLタグにスタイルを適用します。

AspNetCore.SignalRで接続する

ページが読み込まれたらすぐにAspNetCore.SignalRで接続を試みます。そして成功した場合はReceiveConnectedを受信します。そのときの処理を示します。やっていることは接続したときに与えられたconnectionIDを表示させているだけです。

ゲームに参加する

AspNetCore.SignalRで接続されている状態で「ゲームスタート」のボタンを押したらゲームに参加します。ユーザーによってプレイヤー名が設定されていないときはプレイヤーネームは「名無しさん」になります。

キー操作への対応

キーが押されたときはサーバーサイドにそれを送信します。

キーが離されたときもサーバーサイドにこれを送信します。

更新処理

更新処理を開始するときはサーバーサイドからReceiveStartUpdateが送られてきます。このときは配列に保存されている更新用のデータを初期化します。

ReceiveUpdateBlocksを受信したらブロックの座標と状態を更新します。サーバーサイドから送られてきたデータを配列に格納します。

ReceiveBeforeAddBlocksを受信したら、これから新しいブロックが追加されることを意味しています。このブロックは点滅表示させたいので別の配列に格納します。

ReceiveAfterAddBlocksを受信したらサーバーサイドでは新しいブロックの追加が完了しています。ブロックを点滅表示させる必要はないので配列をクリアします。

ReceiveUpdatePlayerを受信したらプレイヤーの座標と状態を更新します。この場合も配列にデータを格納します。また自機に関する情報としてプレイ中であることと、スコア、残機を保存しておきます。

ReceiveUpdateSparksを受信したら火花の座標と状態が更新されたことを意味しています。この場合も配列にデータを保存します。

ゲームステータスの表示

ReceiveUpdateGameStatusを受信したらゲームステータス(ゲームに参加中か?参加できる状態か?)が更新されたことを意味しています。

プレイ中はプレイヤーのイメージとともに「現在(名前)で参戦中!」と表示させます。参加していない場合は参加可能である場合は「参加可能です!」、定員オーバーで参加できないときは「現在満員です。空きが出るまでお待ちください」と表示させます。

またプレイに参加しているときと参加できない場合は「ゲームスタート」ボタンは非表示にして押すことができないようにしています。

テキストボックスに入力されているプレイヤー名のなかに <や>があるとそのままHTMLのなかに入れてしまうと不都合がおきるのでエスケープ処理が必要です。ここでは <と>だけエスケープしています。

描画処理

ReceiveEndUpdateを受信したらサーバーサイドから更新用のデータがすべて送られたことを意味しています。この場合は更新用のデータをつかって描画処理をおこないます。

ブロックを描画する処理を示します。時間の経過でブロックの卵がだんだん明るくなったり暗くなったりさせています。また壊されたブロックはアニメーションさせています。

追加されようとしているブロックを描画する処理を示します。追加されようとしているブロックがそれとわかるように点滅させています。

火花を描画する処理を示します。

プレイヤーを描画する処理を示します。無敵状態のキャラクタは点滅させています。

右サイドにプレイヤーの状態を表示させる処理を示します。NPCの場合、スコアと残機という概念はないのでscoreが空文字列の場合は表示させません。プレイヤーの場合は名前だけでなくスコアと残機も表示させます。

新たに参戦するプレイヤーが現れたりゲームオーバーになった場合は全ユーザーに通知されます。それを表示する処理を示します。いつまでも同じ事を表示させたくないので3秒で消去しています。

効果音を鳴らす

プレイヤーがブロックを飛ばしたり壊したとき、プレイヤーが撃破されたとき、ゲームオーバーになったときには効果音を鳴らします。