03.タンクの移動を妨げる壁の追加



タンクの移動を妨げる壁を追加します。また、タンクがフィールドの外へ移動できないようにもします。

デモ

デモ(Google App Engine):https://online-battle-tanks.an.r.appspot.com/index03.html
デモ(Heroku):https://online-battle-tanks-22-cf6589d25849.herokuapp.com/index03.html

解説

タンクの移動を妨げる壁を追加する、および、タンクがフィールドの外へ移動できないようにする、ための、変更は以下です。

(サーバー側)壁クラスの追加

(サーバー側)干渉判定関数群クラスの追加

(サーバー側)ゲームオブジェクトクラスの変更

(サーバー側)タンククラスの変更

(サーバー側)ワールドクラスの変更

(サーバー側)ゲームクラスの変更

(サーバー側)ゲーム設定クラスの変更

(クライアント側)スクリーンクラス

(クライアント側)アセットクラスの変更

(クライアント側)共有設定クラスの変更

準備

02.を実施していない場合は、まず、02.を実施します。

サーバー側スクリプトファイル追加

壁クラスの追加

サーバー側スクリプトフォルダに壁クラス定義ファイルを追加します。
「libs」フォルダに、「Wall.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

干渉判定関数群クラスの追加

サーバー側スクリプトフォルダに干渉判定関数群クラス定義ファイルを追加します。
「libs」フォルダに、「OverlapTester.js」というスクリプトファイルを追加し、内容を以下のようにします。


コード解説

サーバー側スクリプトの変更

ゲームオブジェクトクラスの変更

「libs/GameObject.js」 の内容を以下のようにします。


コード解説

タンククラスの変更

「libs/Tank.js」 の内容を以下のようにします。


コード解説

ワールドクラスの変更

「libs/World.js」 の内容を以下のようにします。


コード解説

ゲームクラスの変更

「libs/Game.js」 の内容を以下のようにします。


コード解説

ゲーム設定クラスの変更

「libs/GameSettings.html」 の内容を以下のようにします。


コード解説

クライアント側スクリプトの変更

スクリーンクラスの変更

「public/js/Screen.js」 の内容を以下のようにします。


コード解説

アセットクラスの変更

「public/js/Assets.js」 の内容を以下のようにします。


コード解説

共有設定クラスの変更

「public/js/SharedSettings.js」 の内容を以下のようにします。


コード解説

動作確認

サーバーを起動します。
「OnlineBattleTanks」フォルダで、以下のコマンドを実行します。


ブラウザから、「localhost:1337」にアクセスします。

背景画像の上に、タンクと壁が表示されます。

起動したサーバーは、「Ctrl + C」で終了します。

ダウンロード

サンプルプログラム

デモ

デモ(Google App Engine):https://online-battle-tanks.an.r.appspot.com/index03.html
デモ(Heroku):https://online-battle-tanks-22-cf6589d25849.herokuapp.com/index03.html

関連ページ

前項目:02.プレーヤの操作で移動するタンクの追加

次項目:04.プレーヤーの操作でタンクから発射される弾丸の追加