ASP.NET Core版 マッピー(MAPPY)をつくる(4)の続きです。

クライアントサイドでの処理を考えます。

cshtmlファイル

Pages内にMappyフォルダを作り、このなかにgame.cshtmlというファイル名でcshtmlファイルをつくり、以下のように記述します。

Pages\Mappy\game.cshtml

画像ファイルは以下のようになっています。

player-l.png
player-r.png

enemy-l.png
enemy-r.png
down-enemy-l.png
down-enemy-r.png

bullet.png

door.png
door-left.png
door-right.png
power-door-left.png
power-door-right.png

floor.png
floor-over-left-open-door.png
floor-over-right-open-door.png

wall-l.png
wall-r.png

item1.png
item2.png
item3.png
item4.png
item5.png

spark1.png
spark2.png
spark3.png
spark4.png
spark5.png
spark6.png

trampoline1.png
trampoline2.png
trampoline3.png
trampoline4.png

mp3ファイルは以下のようになっています。

bgm.mp3
jump.mp3
door.mp3
get.mp3
enemy-down.mp3
bullet.mp3
explotion.mp3
clear.mp3
dead.mp3
gameover.mp3

グローバル変数と定数

次にJavaScriptですが、まずグローバル変数と定数の宣言部分を示します。

wwwroot\mappy\mappy.js

ページ読み込み完了時の処理

ページの読み込みが完了したときの処理を示します。canvasのサイズ設定と効果音のボリュームの設定、BGMをエンドレスで鳴らすための設定をおこなっています。

wwwroot\mappy\mappy.js

接続成功時の処理

Init関数の最後にconnection.start()を実行してサーバーサイドに接続しようとしていますが、接続に成功したときの処理を示します。

接続成功時にはサーバーサイドからSuccessfulConnectionToClientが送られてきます。これを受信したらページ下部にconnectionIDを表示させます。

接続成功時にはサーバーサイドからSendFloorPositionsToClientも送られてきます。これを受信したら床と壁を描画するために必要なデータを配列内に保存します。

ゲーム開始時の処理

ゲーム開始ボタンを押したときの処理を示します。

この場合はサーバーサイドにGameStartを送信します。このときサーバーサイドでこれに対する処理が正常におこなわれた場合はEventGameStartToClientが送られてくるので、これを受信したらisPlayingフラグをセットして、ゲーム開始ボタンとランキングを見るボタンを非表示にします。

キー操作時の処理

ゲーム中は方向キーを押したときのデフォルトの動作を抑制してキャラクターの移動しかできないようにします。そしてサーバーサイドにキーを送信します。

更新処理

サーバーサイドで更新処理がおこなわれたらUpdate…ToClientが送られてきます。これを受信したら配列または変数に更新処理用のデータを保存しておきます。

それから追加点が入ったときはサーバーサイドからPlayerAddScoreEvent1ToClientとPlayerAddScoreEvent2ToClientが送られてきます。前者の場合はこのデータを配列に格納しますが、一定期間が経過したらこれを削除します。これによってしばらくのあいだ追加点が画面に表示されるようになります。

PlayerAddScoreEvent2ToClientが送られてきたら、このデータを配列に格納しますが、33ミリ秒ごとにこれを左右に移動させます。これによって追加点が水平方向にながれるように表示されるようになります。追加点を表示する座標が画面の端にきた場合や追加点が0の場合はなにもせず表示もさせません。

描画処理

サーバーサイドからEndUpdateToClientが送られてきたら描画処理を開始します。

プレイヤーのX座標によってスクロール処理をさせたいので、最初にGetShiftX関数でどれだけX方向に平行移動させた状態で描画するかを決めます。そのあとshiftX分ズラして描画処理をおこないます。

床と外壁、トランポリンを描画する関数を示します。

パワードアから放たれた弾丸を描画する関数を示します。

未回収のアイテムを描画する関数を示します。アイテムの種類によって描画するイメージを変更します。

ドアを描画します。配列のデータを参照して開いているドアなのか閉まっているドアなのか?閉まっている場合どちら向きに開くドアなのか?それはパワードアなのかを調べて適切なイメージを使って描画しています。

プレイヤーの描画とスコア、残機、追加点を描画する関数を示します。

敵の描画をおこなう関数を示します。

火花の描画をおこなう関数を示します。

効果音の再生

サーバーサイドでイベントが発生したら適切な効果音を鳴らします。

ゲームオーバー時は効果音を鳴らすまえにBGMを停止してゲーム開始用のボタンとスコアランキングに移動するボタンを再表示させます。そのあとプレイ中であることを示すisPlayingフラグをクリアします。