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」というスクリプトファイルを追加し、内容を以下のようにします。
// ゲームオブジェクトクラス // ・タンク、壁、弾丸の親クラス module.exports = class GameObject { // コンストラクタ constructor( fWidth, fHeight, fX, fY, fAngle ) { this.fWidth = fWidth; // 幅 this.fHeight = fHeight; // 高さ this.fX = fX; // 位置(X) this.fY = fY; // 位置(Y) this.fAngle = fAngle; // 向き（+x軸の方向が0。+y軸の方向がPI/2） this.fX = fX; this.fY = fY; } toJSON() { return { fX: this.fX, fY: this.fY, fAngle: this.fAngle }; } };

コード解説

ゲームオブジェクトクラスは、オブジェクトの大きさ、位置、角度を保持するオブジェクトのクラスです。（コンストラクタ）
Socket.ioによるデータ送信は、JSON形式データで送信されます。送信するデータをtoJSON関数で指定します（ toJSON関数）

タンククラスの追加

サーバー側スクリプトフォルダにタンククラス定義ファイルを追加します。
「libs」フォルダに、「Tank.js」というスクリプトファイルを追加し、内容を以下のようにします。
// モジュール const GameObject = require( './GameObject.js' ); // 設定 const SharedSettings = require( '../public/js/SharedSettings.js' ); const GameSettings = require( './GameSettings.js' ); // タンククラス module.exports = class Tank extends GameObject { // コンストラクタ constructor() { // 親クラスのコンストラクタ呼び出し super( SharedSettings.TANK_WIDTH, SharedSettings.TANK_HEIGHT, 0.0, 0.0, Math.random() * 2 * Math.PI ); this.objMovement = {}; // 動作 this.fSpeed = GameSettings.TANK_SPEED; // 速度[m/s]。1frameあたり5進む => 1/30[s] で5進む => 1[s]で150進む。 this.fRotationSpeed = GameSettings.TANK_ROTATION_SPEED; // 回転速度[rad/s]。1frameあたり0.1進む => 1/30[s] で0.1進む => 1[s]で3[rad]進む。 // 初期位置 this.fX = Math.random() * ( SharedSettings.FIELD_WIDTH - SharedSettings.TANK_WIDTH ); this.fY = Math.random() * ( SharedSettings.FIELD_HEIGHT - SharedSettings.TANK_HEIGHT ); } // 更新 update( fDeltaTime ) { // 動作に従って、タンクの状態を更新 if( this.objMovement['forward'] ) { // 前進 const fDistance = this.fSpeed * fDeltaTime; //console.log( 'forward' ); this.fX += fDistance * Math.cos( this.fAngle ); this.fY += fDistance * Math.sin( this.fAngle ); } if( this.objMovement['back'] ) { // 後進 const fDistance = this.fSpeed * fDeltaTime; //console.log( 'back' ); this.fX -= fDistance * Math.cos( this.fAngle ); this.fY -= fDistance * Math.sin( this.fAngle ); } if( this.objMovement['left'] ) { // 左転回 //console.log( 'left' ); // X軸が右向き、Y軸が「上」向きの世界では、左回転は、角度が増える方向 // X軸が右向き、Y軸が「下」向きの世界では、左回転は、角度が減る方向 //this.fAngle += this.fRotationSpeed * fDeltaTime; // Y軸が「上」向き用（WebGLキャンバスへの描画用） this.fAngle -= this.fRotationSpeed * fDeltaTime; // Y軸が「下」向き用（2Dキャンバスへの描画用） } if( this.objMovement['right'] ) { // 右転回 //console.log( 'right' ); // X軸が右向き、Y軸が「上」向きの世界では、右回転は、角度が減る方向 // X軸が右向き、Y軸が「下」向きの世界では、右回転は、角度が増える方向 //this.fAngle -= this.fRotationSpeed * fDeltaTime; // Y軸が「上」向き用（WebGLキャンバスへの描画用） this.fAngle += this.fRotationSpeed * fDeltaTime; // Y軸が「下」向き用（2Dキャンバスへの描画用） } } }

コード解説

タンククラスは、プレーヤーの操作で移動するタンクのクラスです。
タンククラスは、ゲームオブジェクトクラスを継承します。（ extends GameObject ）
どんな動作をしているかを保持します。（ this.objMovement = {}; ）
移動スピード、回転スピードを保持します。（ this.fSpeed = GameSettings.TANK_SPEED; this.fRotationSpeed = GameSettings.TANK_ROTATION_SPEED; ）
動作に従ってタンクの状態を更新します。（ update関数）

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

ワールドクラスの変更

「libs/World.js」の内容を以下のようにします。
// モジュール const Tank = require( './Tank.js' ); （・・・略・・・） module.exports = class World { // コンストラクタ constructor( io ) { this.io = io; // socketIO this.setTank = new Set(); // タンクリスト } （・・・略・・・） // オブジェクトの座標値の更新 updateObjects( fDeltaTime ) { // タンクごとの処理 this.setTank.forEach( ( tank ) => { tank.update( fDeltaTime ); } ); } （・・・略・・・） // タンクの生成 createTank() { // タンクの生成 const tank = new Tank(); // タンクリストへの登録 this.setTank.add( tank ); return tank; } // タンクの破棄 destroyTank( tank ) { // タンクリストリストからの削除 this.setTank.delete( tank ); } }

コード解説

メンバー変数に、タンクリストを追加します。（コンストラクタの this.setTank = new Set(); ）
メンバー関数の更新関数に、タンクの更新処理呼び出しを追加します。（ updateObjects関数）
メンバー関数に、タンクの生成関数を追加します。（ createTank関数）
メンバー関数に、タンクの破棄関数を追加します。（ destroyTank関数）

ゲームクラスの変更

「libs/Game.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class Game { // 始動 start( io ) { （・・・略・・・） io.on( 'connection', ( socket ) => { console.log( 'connection : socket.id = %s', socket.id ); let tank = null; // コネクションごとのタンクオブジェクト。イベントをまたいで使用される。 // ゲーム開始時の処理の指定 // ・クライアント側の接続確立時の「socket.emit( 'enter-the-game' );」に対する処理 socket.on( 'enter-the-game', () => { // 自タンクの作成 console.log( 'enter-the-game : socket.id = %s', socket.id ); tank = world.createTank(); } ); // 移動コマンドの処理の指定 // ・クライアント側のキー入力時の「socket.emit( 'change-my-movement', objMovement );」に対する処理 socket.on( 'change-my-movement', ( objMovement ) => { //console.log( 'change-my-movement : socket.id = %s', socket.id ); if( !tank ) { return; } tank.objMovement = objMovement; // 動作 } ); // 切断時の処理の指定 // ・クライアントが切断したら、サーバー側では'disconnect'イベントが発生する socket.on( 'disconnect', () => { console.log( 'disconnect : socket.id = %s', socket.id ); if( !tank ) { return; } world.destroyTank( tank ); tank = null; // 自タンクの解放 } ); } ); // 周期的処理（1秒間にFRAMERATE回の場合、delayは、1000[ms]/FRAMERATE[回]） setInterval( () => { （・・・略・・・） // 最新状況をクライアントに送信 io.emit( 'update', Array.from( world.setTank ), // Setオブジェクトは送受信不可（SetにJSON変換が未定義だから？）。配列にして送信する。 iNanosecDiff ); // 送信 }, 1000 / GameSettings.FRAMERATE ); // 単位は[ms]。1000[ms] / FRAMERATE[回] } }

コード解説

「クライアントからの『ゲーム開始』の指示を待ち受け、『ゲーム開始』の指示の際には、タンクを生成する」処理を追加します。（ socket.on( 'enter-the-game', ・・・略・・・ ); ）
「クライアントからの『タンク動作変更』の指示を待ち受け、『タンク動作変更』の指示の際には、タンクの動作を変更する」処理を追加します。（ socket.on( 'change-my-movement', ・・・略・・・ ); ）
「クライアントとサーバーの切断時の処理」に、タンクの削除処理を追加します。（ socket.on( 'disconnect', ・・・略・・・ ); ）
周期処理でクライアントへ送信するデータに、タンクリストを追加します。（ io.emit( 'update', ・・・略・・・ ); ）

ゲーム設定クラスの変更

「libs/GameSettings.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class GameSettings { （・・・略・・・） // タンク static get TANK_SPEED() { return 150.0; } // 速度[m/s]。1frameあたり5進む => 1/30[s] で5進む => 1[s]で150進む。 static get TANK_ROTATION_SPEED() { return 3.0; }// 回転速度[rad/s]。1frameあたり0.1進む => 1/30[s] で0.1進む => 1[s]で3[rad]進む。 }

コード解説

タンクに関する設定を追加します。

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

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

「public/js/client.js」の末尾に、以下を追加します
// キーの入力（キーダウン、キーアップ）の処理 let objMovement = {}; // 動作 $( document ).on( 'keydown keyup', ( event ) => { const KeyToCommand = { 'ArrowUp': 'forward', 'ArrowDown': 'back', 'ArrowLeft': 'left', 'ArrowRight': 'right', }; const command = KeyToCommand[event.key]; if( command ) { if( event.type === 'keydown' ) { objMovement[command] = true; } else // if( event.type === 'keyup' ) { objMovement[command] = false; } // サーバーにイベント名'change-my-movement'と、objMovementオブジェクトを送信 socket.emit( 'change-my-movement', objMovement ); } } );

コード解説

矢印キー（上下左右キー）の入力を、「タンクの動作変更」データに変換し、サーバーに送信する処理を追加します。

スクリーンクラスの変更

「public/js/Screen.js」の内容を以下のようにします。
// スクリーンクラス class Screen { // コンストラクタ constructor( socket, canvas ) { （・・・略・・・） this.iProcessingTimeNanoSec = 0; this.aTank = null; // キャンバスの初期化（・・・略・・・） } // ソケットの初期化 initSocket() { （・・・略・・・） // サーバーからの状態通知に対する処理 // ・サーバー側の周期的処理の「io.sockets.emit( 'update', ・・・ );」に対する処理 this.socket.on( 'update', ( aTank, iProcessingTimeNanoSec ) => { this.aTank = aTank; this.iProcessingTimeNanoSec = iProcessingTimeNanoSec; } ); } （・・・略・・・） // 描画。animateから無限に呼び出される render( iTimeCurrent ) { （・・・略・・・） // キャンバスの塗りつぶし this.renderField(); // タンクの描画 if( null !== this.aTank ) { const fTimeCurrentSec = iTimeCurrent * 0.001; // iTimeCurrentは、ミリ秒。秒に変換。 const iIndexFrame = parseInt( fTimeCurrentSec / 0.2 ) % 2; // フレーム番号 this.aTank.forEach( ( tank ) => { this.renderTank( tank, iIndexFrame ); } ); } // キャンバスの枠の描画（・・・略・・・） } （・・・略・・・） renderTank( tank, iIndexFrame ) { this.context.save(); // タンクの座標値に移動 this.context.translate( tank.fX, tank.fY ); // 画像描画 this.context.save(); this.context.rotate( tank.fAngle ); this.context.drawImage( this.assets.imageItems, this.assets.arectTankInItemsImage[iIndexFrame].sx, this.assets.arectTankInItemsImage[iIndexFrame].sy, // 描画元画像の右上座標 this.assets.arectTankInItemsImage[iIndexFrame].sw, this.assets.arectTankInItemsImage[iIndexFrame].sh, // 描画元画像の大きさ -SharedSettings.TANK_WIDTH * 0.5, // 画像先領域の右上座標（領域中心が、原点になるように指定する） -SharedSettings.TANK_HEIGHT * 0.5, // 画像先領域の右上座標（領域中心が、原点になるように指定する） SharedSettings.TANK_WIDTH, // 描画先領域の大きさ SharedSettings.TANK_HEIGHT ); // 描画先領域の大きさ this.context.restore(); this.context.restore(); } }

コード解説

メンバー変数に、タンクリストを追加します。（ this.aTank = null; ）
「ゲーム内に存在しているものの最新状況のデータ受信時の処理」に、タンクリストの受け取り処理を追加します。（ this.socket.on('update', ・・・略・・・ ); ）
ブラウザへの描画処理にタンクの描画処理を追加します。（ render関数、renderTank関数）

アセットクラスの変更

「public/js/Assets.js」の内容を以下のようにします。
// アセット群クラス class Assets { // コンストラクタ constructor() { （・・・略・・・） // アイテム画像 this.imageItems = new Image(); this.imageItems.src = '../images/items.png' this.arectTankInItemsImage = [ { sx: 2, sy: 2, sw: 16, sh: 16 }, { sx: 20, sy: 2, sw: 16, sh: 16 },]; } }

コード解説

アイテム画像を読み込みます。（ this.imageItems.src = '../images/items.png' ）
アイテム画像におけるタンク画像として使用する領域を指定ます。（ this.arectTankInItemsImage = [・・・略・・・]; ）

共有設定クラスの変更

「public/js/SharedSettings.js」の内容を以下のようにします。
// サーバースクリプトとクライアントで共通の設定クラス class SharedSettings { （・・・略・・・） // タンク static get TANK_WIDTH() { return 80.0; } static get TANK_HEIGHT() { return 80.0; } } （・・・略・・・）

コード解説

タンクに関する設定を追加します。

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

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

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

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

動作確認

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

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

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

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

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

ダウンロード

サンプルプログラム

デモ