ASP.NET Core版 対コンピュータ対戦できるぷよぷよをつくる(3)の続きです。今回はクライアントサイドにおける処理です。

HTML部分

Pages\Puyo内にgame.cshtmlファイルを作成して以下のように記述します。

wwwrootディレクトリのなかにpuyoディレクトリを作成し、そのなかにpuyo-imagesディレクトリを作成して以下の画像を配置します。ぴよぴよの素材。BGMと効果音につかう音声ファイルは適当なところからダウンロードしてください。鳩でもわかるC#管理人は魔王魂からダウンロードしました。使えそうなmp3ファイルをダウンロードしたらwwwroot\puyoディレクトリ内に配置してください。

JavaScript部分

wwwroot\puyo\puyo.js

主なグローバル変数を示します。

ページが読み込まれたときの処理

ページが読み込まれたときの処理を示します。適当にレイアウトを調整し、canvasのサイズを変更します。

BGMと効果音のボリュームを調整する処理を示します。

チェックボックスがオンでプレイ中のときだけ音を鳴らします。

BGMをエンドレスで鳴らす処理を示します。BGMに使うmp3ファイルによっては単純にエンドレスで再生すると違和感がある場合があります。以下は設定の例です。

BGMを停止する処理を示します。bgm.currentTime = 0とすることでプレイ中にチェックボックスがオンにされると0.5秒後に先頭から再生されます。

接続成功時

接続に成功したときの処理を示します。”SuccessfulConnectionToClient”とともにconnectionIDとぷよのカラムと行の最大値がサーバーサイドから送られてくるので、これを保存しておきます。

ゲーム開始の処理

ゲーム開始のボタンが押されたらサーバーサイドに”GameStart”とともにプレイヤー名と接続成功時にconnectionIDに保存しておいた文字列を送信します。

ゲーム開始の処理が正常におこなわれたときはサーバーサイドから”EventGameStartToClient”が送信されます。このときはゲームオーバーになるまでボタンを非表示にします。またプレイ中であることを示すisPlayingフラグをセットします。

キー操作時の処理

サーバーサイドにキーが押下されたことを知らせるために”SendKey”を送信するのですが、キーを押しっぱなしにすると短時間で連続して送信されてしまいます。そこでキーをいったん離してからでないとキー操作に応答しないようにフラグで管理します。

またゲーム中でもプレイヤー名は変更可能です。なのでキーが押されたらそのつどプレイヤー名も送信します。connectionIDが空文字のときは接続されていない状態なのでなにもしません。またゲーム中にDownキーを押下したらスクロールが発生するのでそれを抑止するためにfalseを返しています。

キーが離されたときの処理を示します。ここでやっているのはキーが押下されたときにセットされたフラグをクリアしているだけです。

データの更新処理

サーバーサイドから描画用のデータが送信された場合はこれをグローバル変数に保存しておきます。

サーバーサイドからはカンマ区切りの整数が文字列として送られてくるので、配列に変換してグローバル変数に保存します。

サーバーサイドから”EndUpdatedToClient”が送信されたら保存しておいたグローバル変数を利用して描画処理をおこないます。Update関数については後述します。

描画処理

GetImageFromPuyo関数はぷよの種類と連鎖数から適切なイメージを取得するためのものです。

落下中のぷよや固定されたぷよ、ネクストぷよ、スコアなどを描画する処理を示します。

Update関数は上記の関数を呼び出して描画処理をおこないます。

ゲームオーバー時の処理

ゲームオーバーになったらサーバーサイドから”GameOveredToClient”が送信されます。このときは非表示にしていたゲーム開始のためのボタンを再表示させるとともに、BGMを停止してゲームオーバー時の効果音を鳴らします。

効果音を鳴らす処理

その他の効果音を鳴らす処理を示します。