実録！HTML5でモバイルWebアプリ開発 ― 第2回

node.jsとWebSocketで作る野球盤ゲームの裏側

2011年07月04日 10時00分更新

ハン☆スタ制作委員会／マインドフリー株式会社

ツイートする

ゲームの処理

　ゲームのメイン処理はgameServer.jsとgameData.jsです。ゲームの処理もJSON形式で送信しています。ルームでの処理と同様に、typeプロパティでメッセージの種類を判断します。typeは、ボールを投げる「game.throw」や、バットを振る「game.swing」、ストライク「game.strike」などがあります。たとえば、「game.throw」のJSONは以下のようになっています。


{"type":"game.throw","ax":0.03105427974947808,"ay":-0.030000000000000027}

　ax、ayがDeviceMotionで取得したiPhoneの傾きになります。この情報を元にボールのカーブや速度を設定しています。

クライアント／サーバー間の通信

　ゲームの通信とデータの同期にはすべてWebSocketを使用していますが、データをリアルタイムで同期し、クライアントごとに異なる情報を受け渡すため、処理は非常に複雑になります。そのため、どのクライアントに、どういうタイミングで、どういったデータを送るかをきちんと設計しなければなりません。

　ゲーム開始までのクライアント／サーバー間の流れは以下のように進んでいきます。

　まず、クライアントがサイトにアクセスすると、WebSocket通信を開始します。このとき、サーバーは接続したクライアントに対して、同期させるためにアプリの初期化情報を送ります。同時に、すでにWebSocketで接続済みの他のクライアントに対して、クライアントがアプリに接続したという情報を通知してあげます。

　スタジアムへの入出の処理も同様に、入室したクライアントに対してスタジアム／ゲームの状態を送信します。ゲーム内のアクションはスタジアムに入った2人のクライアント間でのみやり取りし、他のクライアントには通知しません。他のクライアントにはスタジアムの特定の状態（得点が入る、チェンジする、ゲームが終わるなど）が変わるたびに通知して同期しています。

　クライアントがブラウザーを閉じた場合などは WebSocket通信も切断するので、サーバー側でクローズ処理をし、各クライアントにユーザーが退出したことを通知します。

ゲーム内のアクション

　ゲーム内での基本的なアクションは、タップしてボールを投げる／バットを振るだけです。「ボールを投げる」という情報は守備側から、「バットを振る」という情報は攻撃側から送信します。ボールを投げるときにはiPhoneの傾きによってカーブやシュートを設定できるので、デバイスの傾きの情報もメッセージに入れて送信します。

　ボールとバットの衝突判定は攻撃側で処理しています。ストライク／ボール／ヒットといった判定をして守備側に送信します。サーバーはクライアントから受けとった結果を元にゲームの状態を更新して、更新データをクライアント（守備側／攻撃側）に渡します。このとき受け取ったデータが不正でないかどうか、正常な処理の結果が送信されているかをチェックしています。

◆

　今回は、WebSocket通信でのクライアント／サーバー間のデータの流れを説明しました。Handy Stadiumでは、WebSocketで送るデータの中にボールの位置情報や、衝突判定など画面を同期する情報が多く含まれています。次回は、クライアントサイドの表示と衝突判定で使っているCanvasの実装と最適化について説明します。

著者：ハン☆スタ制作委員会／マインドフリー株式会社

日々切磋琢磨する大阪のイノベーター集団マインドフリー。先端Techとフリーなマインドを武器に「Fun!」なものづくりを目指してます。今回も新しい技術や開発言語が大好き！なSuperフレッシュエンジニア“やんぎー”（Facebookアプリ「Profile Photo Mosaic」を開発）が「世界を驚かせる!?計画」のひとつとして、Webアプリ開発の極みに迫るため「ハン☆スタ」をつくってみました。Let's play baseball♪
フロントエンドエンジニア 5509のnori も技術協力しています。

■関連サイト

前へ 1 2 3 4 次へ

カテゴリートップへ