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



プレーヤーの操作で移動するタンクを追加します。

デモ

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

解説

プレーヤーの操作で移動するタンクを追加するための、変更は以下です。

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

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

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

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

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

(クライアント側)クライアント側開始処理の変更

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

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

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

準備

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

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

ゲームオブジェクトクラスの追加

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


コード解説

タンククラスの追加

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


コード解説

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

ワールドクラスの変更

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


コード解説

ゲームクラスの変更

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


コード解説

ゲーム設定クラスの変更

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


コード解説

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

クライアント側開始処理の変更

「public/js/client.js」 の末尾に、以下を追加します


コード解説

スクリーンクラスの変更

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


コード解説

アセットクラスの変更

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


コード解説

共有設定クラスの変更

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


コード解説

アイテム画像ファイルの配置

画像ファイル用フォルダにアイテム画像ファイルを配置します。
「public/images」フォルダに、「items.png」という画像ファイルを配置します。

「items.png」画像の内容は以下です。


タンク画像は、フリーゲームやオープンソースゲーム用のメディア倉庫である「OpanGameArt.org」から、「Zironid」さんが公開している「Tanks」より借用しました。

動作確認

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


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

背景画像の上に、タンクが表示されます。
矢印キー(「↑」「↓」「←」「→」キー)で、タンクが移動します。

ブラウザをもう一つ立ち上げ、「localhost:1337」にアクセスすると、別のタンクが表示されます。
ブラウザごとに、それぞれ別々のタンクを矢印キーで移動できます。


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

ダウンロード

サンプルプログラム

デモ

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

関連ページ

前項目:01.ゲームの骨格を作る

次項目:03.タンクの移動を妨げる壁の追加