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」というスクリプトファイルを追加し、内容を以下のようにします。
// モジュール const GameObject = require( './GameObject.js' ); // 設定 const SharedSettings = require( '../public/js/SharedSettings.js' ); // 壁クラス module.exports = class Wall extends GameObject { // コンストラクタ constructor( fX, fY ) { // 親クラスのコンストラクタ呼び出し super( SharedSettings.WALL_WIDTH, SharedSettings.WALL_HEIGHT, fX, fY, 0 ); } }

コード解説

壁クラスは、タンクの移動を妨げる壁のクラスです。
壁クラスは、ゲームオブジェクトクラスを継承します。（ extends GameObject ）

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

サーバー側スクリプトフォルダに干渉判定関数群クラス定義ファイルを追加します。
「libs」フォルダに、「OverlapTester.js」というスクリプトファイルを追加し、内容を以下のようにします。
// 干渉するかテストする静的関数群クラス module.exports = class OverlapTester { static overlapRects( rect1, rect2 ) { // 矩形１の左端と矩形２の右端を比べて、矩形１の左端の方が右にあるなら、重ならない。 if( rect1.fLeft > rect2.fRight ) { return false; } // 矩形１の右端と矩形２の左端を比べて、矩形１の右端の方が左にあるなら、重ならない。 if( rect1.fRight < rect2.fLeft ) { return false; } // 矩形１の下端と矩形２の上端を比べて、矩形１の下端の方が上にあるなら、重ならない。 if( rect1.fBottom > rect2.fTop ) { return false; } // 矩形１の上端と矩形２の下端を比べて、矩形１の上端の方が下にあるなら、重ならない。 if( rect1.fTop < rect2.fBottom ) { return false; } // 上記以外は重なる。 return true; } static pointInRect( rect, point ) { return rect.fLeft <= point.fX && rect.fRight >= point.fX && rect.fBottom <= point.fY && rect.fTop >= point.fY; } }

コード解説

干渉判定関数群クラスは、干渉判定関数をまとめた静的関数群クラスです。
「点が領域内にあるかを判定する関数」や「領域と領域が重なるかを判定する関数」などの関数を保持します。（ overlapRects関数、pointInRect関数）

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

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

「libs/GameObject.js」の内容を以下のようにします。
// モジュール const OverlapTester = require( './OverlapTester.js' ); // ゲームオブジェクトクラス // ・タンク、壁、弾丸の親クラス module.exports = class GameObject { // コンストラクタ constructor( fWidth, fHeight, fX, fY, fAngle ) { （・・・略・・・） this.fAngle = fAngle; // 向き（+x軸の方向が0。+y軸の方向がPI/2） this.rectBound = {}; this.setPos( fX, fY ); } toJSON() { （・・・略・・・） } setPos( fX, fY ) { this.fX = fX; this.fY = fY; this.rectBound = { fLeft: fX - this.fWidth * 0.5, fBottom: fY - this.fHeight * 0.5, fRight: fX + this.fWidth * 0.5, fTop: fY + this.fHeight * 0.5 }; } // 壁との干渉チェック overlapWalls( setWall ) { return Array.from( setWall ).some( ( wall ) => { if( OverlapTester.overlapRects( this.rectBound, wall.rectBound ) ) { return true; } } ); } };

コード解説

メンバー変数に、オブジェクトの範囲を追加します。（コンストラクタの this.rectBound = {}; ）
メンバー関数に、位置を設定する関数を追加し、その関数内でオブジェクトの範囲も設定します。（ setPos関数）
メンバー関数に、壁との干渉チェックする関するを追加します。（ overlapWalls関数）

タンククラスの変更

「libs/Tank.js」の内容を以下のようにします。
// モジュール const GameObject = require( './GameObject.js' ); const OverlapTester = require( './OverlapTester.js' ); （・・・略・・・） module.exports = class Tank extends GameObject { // コンストラクタ constructor( rectField, setWall ) { （・・・略・・・） this.fRotationSpeed = GameSettings.TANK_ROTATION_SPEED; // 回転速度[rad/s]。1frameあたり0.1進む => 1/30[s] で0.1進む => 1[s]で3[rad]進む。 // 障害物にぶつからない初期位置の算出 do { this.setPos( rectField.fLeft + Math.random() * ( rectField.fRight - rectField.fLeft ), rectField.fBottom + Math.random() * ( rectField.fTop - rectField.fBottom ) ); } while( this.overlapWalls( setWall ) ); } // 更新 // ※rectField : フィールド矩形は、オブジェクト中心と判定する。（OverlapTester.pointInRect()） // オブジェクトの大きさ分狭めた(上下左右で、大きさの半分づつ狭めた）矩形が必要。 // 呼び出され側で領域を狭めのは、処理コストが無駄なので、呼び出す側で領域を狭めて渡す。 update( fDeltaTime, rectField, setWall ) { const fX_old = this.fX; // 移動前座標値のバックアップ const fY_old = this.fY; // 移動前座標値のバックアップ let bDrived = false; // 前後方向の動きがあったか // 動作に従って、タンクの状態を更新 if( this.objMovement['forward'] ) { // 前進 const fDistance = this.fSpeed * fDeltaTime; //console.log( 'forward' ); this.setPos( this.fX + fDistance * Math.cos( this.fAngle ), this.fY + fDistance * Math.sin( this.fAngle ) ); bDrived = true; } if( this.objMovement['back'] ) { // 後進 const fDistance = this.fSpeed * fDeltaTime; //console.log( 'back' ); this.setPos( this.fX - fDistance * Math.cos( this.fAngle ), this.fY - fDistance * Math.sin( this.fAngle ) ); bDrived = true; } if( bDrived ) { // 動きがある場合は、不可侵領域との衝突のチェック let bCollision = false; if( !OverlapTester.pointInRect( rectField, { fX: this.fX, fY: this.fY } ) ) { // フィールドの外に出た。 bCollision = true; } else if( this.overlapWalls( setWall ) ) { // 壁に当たった。 bCollision = true; } if( bCollision ) { // 衝突する場合は、移動できない。 this.setPos( fX_old, fY_old ); bDrived = false; // 前後方向の動きはなし } } if( this.objMovement['left'] ) （・・・略・・・） } return bDrived; // 前後方向の動きがあったかを返す（ボットタンクで使用する） } }

コード解説

コンストラクタの引数に、「フィールド範囲」と「壁リスト」を追加します。（コンストラクタ）
タンクの初期位置は、「フィールド範囲」の内側で、かつ、「壁」と干渉しない位置となるようにします。（コンストラクタ）
位置の更新処理において、フィールドの外に出ないようにします。（ update関数）
位置の更新処理において、壁に入らないようにします。（ update関数）

ワールドクラスの変更

「libs/World.js」の内容を以下のようにします。
// モジュール const Tank = require( './Tank.js' ); const Wall = require( './Wall.js' ); // 設定 const SharedSettings = require( '../public/js/SharedSettings.js' ); const GameSettings = require( './GameSettings.js' ); （・・・略・・・） module.exports = class World { // コンストラクタ constructor( io ) { this.io = io; // socketIO this.setTank = new Set(); // タンクリスト this.setWall = new Set(); // 壁リスト // 壁の生成 for( let i = 0; i < GameSettings.WALL_COUNT; i++ ) { // ランダム座標値の作成 const fX_left = Math.random() * ( SharedSettings.FIELD_WIDTH - SharedSettings.WALL_WIDTH ); const fY_bottom = Math.random() * ( SharedSettings.FIELD_HEIGHT - SharedSettings.WALL_HEIGHT ); // 壁生成 const wall = new Wall( fX_left + SharedSettings.WALL_WIDTH * 0.5, fY_bottom + SharedSettings.WALL_HEIGHT * 0.5 ); // 壁リストへの登録 this.setWall.add( wall ); } } // 更新処理 update( fDeltaTime ) { （・・・略・・・） } // オブジェクトの座標値の更新 updateObjects( fDeltaTime ) { // タンクの可動域 const rectTankField = { fLeft: 0 + SharedSettings.TANK_WIDTH * 0.5, fBottom: 0 + SharedSettings.TANK_HEIGHT * 0.5, fRight: SharedSettings.FIELD_WIDTH - SharedSettings.TANK_WIDTH * 0.5, fTop: SharedSettings.FIELD_HEIGHT - SharedSettings.TANK_HEIGHT * 0.5 }; // タンクごとの処理 this.setTank.forEach( ( tank ) => { tank.update( fDeltaTime, rectTankField, this.setWall ); } ); } （・・・略・・・） // タンクの生成 createTank() { // タンクの可動域 const rectTankField = { fLeft: 0 + SharedSettings.TANK_WIDTH * 0.5, fBottom: 0 + SharedSettings.TANK_HEIGHT * 0.5, fRight: SharedSettings.FIELD_WIDTH - SharedSettings.TANK_WIDTH * 0.5, fTop: SharedSettings.FIELD_HEIGHT - SharedSettings.TANK_HEIGHT * 0.5 }; // タンクの生成 const tank = new Tank( rectTankField, this.setWall ); （・・・略・・・） } // タンクの破棄（・・・略・・・） }

コード解説

メンバー変数に、壁リストを追加します。（コンストラクタの this.setWall = new Set(); ）
コンストラクタに、壁の生成処理を追加します。（コンストラクタ）
タンクの更新処理呼び出しの引数にタンク可動領域と壁リストを追加します。（ updateObjects関数のtank.update( ・・・略・・・ ); ）
タンクの生成の引数に、「フィールド範囲」と「壁リスト」を追加します。（ createTank関数のnew Tank( ・・・略・・・ ); ）

ゲームクラスの変更

「libs/Game.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class Game { （・・・略・・・） setInterval( () => { （・・・略・・・） io.emit( 'update', Array.from( world.setTank ), // Setオブジェクトは送受信不可（SetにJSON変換が未定義だから？）。配列にして送信する。 Array.from( world.setWall ), // Setオブジェクトは送受信不可（SetにJSON変換が未定義だから？）。配列にして送信する。 iNanosecDiff ); // 送信（・・・略・・・）

コード解説

周期処理でクライアントへ送信するデータに、壁リストを追加します。（ io.emit( 'update', ・・・略・・・ ); ）

ゲーム設定クラスの変更

「libs/GameSettings.html」の内容を以下のようにします。
（・・・略・・・） module.exports = class GameSettings { （・・・略・・・） // 壁 static get WALL_COUNT() { return 3; } }

コード解説

壁に関する設定を追加します。

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

スクリーンクラスの変更

「public/js/Screen.js」の内容を以下のようにします。
// スクリーンクラス class Screen { // コンストラクタ constructor( socket, canvas ) { （・・・略・・・） this.aTank = null; this.aWall = null; // キャンバスの初期化（・・・略・・・） } // ソケットの初期化 initSocket() { （・・・略・・・） // サーバーからの状態通知に対する処理 // ・サーバー側の周期的処理の「io.sockets.emit( 'update', ・・・ );」に対する処理 this.socket.on( 'update', ( aTank, aWall, iProcessingTimeNanoSec ) => { this.aTank = aTank; this.aWall = aWall; this.iProcessingTimeNanoSec = iProcessingTimeNanoSec; } ); } （・・・略・・・） // 描画。animateから無限に呼び出される render( iTimeCurrent ) { （・・・略・・・） // タンクの描画 if( null !== this.aTank ) { （・・・略・・・） } // 壁の描画 if( null !== this.aWall ) { this.aWall.forEach( ( wall ) => { this.renderWall( wall ); } ); } // キャンバスの枠の描画（・・・略・・・） } （・・・略・・・） renderWall( wall ) { // 画像描画 this.context.drawImage( this.assets.imageItems, this.assets.rectWallInItemsImage.sx, this.assets.rectWallInItemsImage.sy, // 描画元画像の右上座標 this.assets.rectWallInItemsImage.sw, this.assets.rectWallInItemsImage.sh, // 描画元画像の大きさ wall.fX - SharedSettings.WALL_WIDTH * 0.5,// 画像先領域の右上座標（領域中心が、原点になるように指定する） wall.fY - SharedSettings.WALL_HEIGHT * 0.5,// 画像先領域の右上座標（領域中心が、原点になるように指定する） SharedSettings.WALL_WIDTH, // 描画先領域の大きさ SharedSettings.WALL_HEIGHT ); // 描画先領域の大きさ } }

コード解説

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

アセットクラスの変更

「public/js/Assets.js」の内容を以下のようにします。
// アセット群クラス class Assets { // コンストラクタ constructor() { （・・・略・・・） // アイテム画像（・・・略・・・） this.rectWallInItemsImage = { sx: 38, sy: 2, sw: 64, sh: 16 }; } }

コード解説

アイテム画像における壁画像として使用する領域の指定を追加します。（ this.rectWallInItemsImage = { sx: 38, sy: 2, sw: 64, sh: 16 }; ）

共有設定クラスの変更

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

コード解説

壁に関する設定を追加します。

動作確認

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

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

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

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

ダウンロード

サンプルプログラム

デモ