04．プレーヤーの操作でタンクから発射される弾丸の追加

プレーヤーの操作でタンクから発射される弾丸を追加します。

デモ

デモ（Google App Engine）：https://online-battle-tanks.an.r.appspot.com/index04.html
デモ（Heroku）：https://online-battle-tanks-22-cf6589d25849.herokuapp.com/index04.html

解説

プレーヤーの操作でタンクから発射される弾丸を追加するための、変更は以下です。

（サーバー側）弾丸クラスの追加

弾丸クラスは、プレーヤーの操作で発射される弾丸のクラスです。
弾丸クラスは、ゲームオブジェクトクラスを継承します。

（サーバー側）タンククラスの変更

メンバー関数に、弾丸発射関数を追加します。
メンバー関数に、弾丸発射可能か判定する関数を追加します。
メンバー変数に、最終弾丸発射時刻を追加します。

（サーバー側）ワールドクラスの変更

メンバー変数に、弾丸リストを追加します。
メンバー関数の更新関数に、弾丸の更新処理呼び出しを追加します。
メンバー関数に、弾丸の生成関数を追加します。
メンバー関数に、弾丸の破棄関数を追加します。

（サーバー側）ゲームクラスの変更

「クライアントからの『弾丸発射』の指示を待ち受け、『弾丸発射』の指示の際には、弾丸を生成する」処理を追加します。
周期処理でクライアントへ送信するデータに、弾丸リストを追加します。

（サーバー側）ゲーム設定クラスの変更

タンクに関する設定として、弾丸発射待ち時間の設定を追加します。
弾丸に関する設定を追加します。

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

スペースキーの入力を、「弾丸の発射」データに変換し、サーバーに送信する処理を追加します。

（クライアント側）スクリーンクラス

メンバー変数に、弾丸リストを追加します。
「ゲーム内に存在しているものの最新状況のデータ受信時の処理」に、弾丸リストの受け取り処理を追加します。
ブラウザへの描画処理に弾丸の描画処理を追加します。

（クライアント側）アセットクラスの変更

アイテム画像における弾丸画像として使用する領域の指定を追加します。

（クライアント側）共有設定クラスの変更

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

準備

03．を実施していない場合は、まず、03．を実施します。

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

弾丸クラスの追加

サーバー側スクリプトフォルダに弾丸クラス定義ファイルを追加します。
「libs」フォルダに、「Bullet.js」というスクリプトファイルを追加し、内容を以下のようにします。
// モジュール const GameObject = require( './GameObject.js' ); const OverlapTester = require( './OverlapTester.js' ); // 設定 const SharedSettings = require( '../public/js/SharedSettings.js' ); const GameSettings = require( './GameSettings.js' ); // 弾丸クラス module.exports = class Bullet extends GameObject { constructor( fX, fY, fAngle, tank ) { // 親クラスのコンストラクタ呼び出し super( SharedSettings.BULLET_WIDTH, SharedSettings.BULLET_HEIGHT, fX, fY, fAngle ); this.fSpeed = GameSettings.BULLET_SPEED; this.tank = tank; // どのタンクから発射されたか this.fLifeTime = GameSettings.BULLET_LIFETIME_MAX; } // 更新 // ※rectField : フィールド矩形は、オブジェクト中心と判定する。（OverlapTester.pointInRect()） // オブジェクトの大きさ分狭めた(上下左右で、大きさの半分づつ狭めた）矩形が必要。 // 呼び出され側で領域を狭めのは、処理コストが無駄なので、呼び出す側で領域を狭めて渡す。 update( fDeltaTime, rectField, setWall ) { this.fLifeTime -= fDeltaTime; if( 0 > this.fLifeTime ) { // 寿命が尽きた return true; // 消失かどうか。trueを返す。 } // 前進 const fDistance = this.fSpeed * fDeltaTime; this.setPos( this.fX + fDistance * Math.cos( this.fAngle ), this.fY + fDistance * Math.sin( this.fAngle ) ); // 不可侵領域との衝突のチェック let bCollision = false; if( !OverlapTester.pointInRect( rectField, { fX: this.fX, fY: this.fY } ) ) { // フィールドの外に出た。 bCollision = true; } else if( this.overlapWalls( setWall ) ) { // 壁に当たった。 bCollision = true; } return bCollision; // 消失かどうか。不可侵領域に当たったかを返す。 } };

コード解説

弾丸クラスは、プレーヤーの操作で発射される弾丸のクラスです。
弾丸クラスは、ゲームオブジェクトクラスを継承します。

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

タンククラスの変更

「libs/Tank.js」の内容を以下のようにします。
// モジュール const GameObject = require( './GameObject.js' ); const OverlapTester = require( './OverlapTester.js' ); const Bullet = require( './Bullet.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]進む。 this.iTimeLastShoot = 0; // 最終ショット時刻 // 障害物にぶつからない初期位置の算出（・・・略・・・） } （・・・略・・・） // ショット可能かどうか canShoot() { if( GameSettings.TANK_WAIT_FOR_NEW_BULLET > Date.now() - this.iTimeLastShoot ) { // ショット待ち時間内はショット不可 return false; } return true; } // ショット shoot() { if( !this.canShoot() ) { // ショット不可の場合は、nullを返す return null; } // 最終ショット時刻を更新 this.iTimeLastShoot = Date.now(); // 新しい弾丸の生成（先端から出ているようにするために、幅の半分オフセットした位置に生成する） const fX = this.fX + this.fWidth * 0.5 * Math.cos( this.fAngle ); const fY = this.fY + this.fWidth * 0.5 * Math.sin( this.fAngle ); return new Bullet( fX, fY, this.fAngle, this ); } }

コード解説

メンバー変数に、最終弾丸発射時刻を追加します。（コンストラクタの this.iTimeLastShoot = 0; ）
メンバー関数に、弾丸発射可能か判定する関数を追加します。（ canShoot関数）
メンバー関数に、弾丸発射関数を追加します。（ shoot関数）

ワールドクラスの変更

「libs/World.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class World { // コンストラクタ constructor( io ) { （・・・略・・・） this.setWall = new Set(); // 壁リスト this.setBullet = new Set(); // 弾丸リスト // 壁の生成（・・・略・・・） } （・・・略・・・） // オブジェクトの座標値の更新 updateObjects( fDeltaTime ) { （・・・略・・・） // タンクごとの処理 this.setTank.forEach( （・・・略・・・） } ); // 弾丸の可動域 const rectBulletField = { fLeft: 0 + SharedSettings.BULLET_WIDTH * 0.5, fBottom: 0 + SharedSettings.BULLET_HEIGHT * 0.5, fRight: SharedSettings.FIELD_WIDTH - SharedSettings.BULLET_WIDTH * 0.5, fTop: SharedSettings.FIELD_HEIGHT - SharedSettings.BULLET_HEIGHT * 0.5 }; // 弾丸ごとの処理 this.setBullet.forEach( ( bullet ) => { const bDisappear = bullet.update( fDeltaTime, rectBulletField, this.setWall ); if( bDisappear ) { // 消失 this.destroyBullet( bullet ); } } ); } （・・・略・・・） // 弾丸の生成 createBullet( tank ) { const bullet = tank.shoot(); if( bullet ) { this.setBullet.add( bullet ); } } // 弾丸の破棄 destroyBullet( bullet ) { // 弾丸リストからの削除 this.setBullet.delete( bullet ); } }

コード解説

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

ゲームクラスの変更

「libs/Game.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class Game { // 始動 start( io ) { （・・・略・・・） io.on( 'connection', ( socket ) => { （・・・略・・・） // 移動コマンドの処理の指定 // ・クライアント側のキー入力時の「socket.emit( 'change-my-movement', objMovement );」に対する処理 socket.on( 'change-my-movement', （・・・略・・・） } ); // ショット時の処理の指定 // ・クライアント側のキー入力時の「socket.emit( 'shoot' );」に対する処理 socket.on( 'shoot', () => { //console.log( 'shoot : socket.id = %s', socket.id ); if( !tank ) { return; } world.createBullet( tank ); // ショット } ); // 切断時の処理の指定（・・・略・・・） } ); // 周期的処理（1秒間にFRAMERATE回の場合、delayは、1000[ms]/FRAMERATE[回]） setInterval( () => { （・・・略・・・） // 最新状況をクライアントに送信 io.emit( 'update', Array.from( world.setTank ), // Setオブジェクトは送受信不可（SetにJSON変換が未定義だから？）。配列にして送信する。 Array.from( world.setWall ), // Setオブジェクトは送受信不可（SetにJSON変換が未定義だから？）。配列にして送信する。 Array.from( world.setBullet ), // Setオブジェクトは送受信不可（SetにJSON変換が未定義だから？）。配列にして送信する。 iNanosecDiff ); // 送信 }, （・・・略・・・）

コード解説

「クライアントからの『弾丸発射』の指示を待ち受け、『弾丸発射』の指示の際には、弾丸を生成する」処理を追加します。（ socket.on( 'shoot', ・・・略・・・ ); ）
周期処理でクライアントへ送信するデータに、弾丸リストを追加します。（ io.emit( 'update', ・・・略・・・ ); ）

ゲーム設定クラスの変更

「libs/GameSettings.html」の内容を以下のようにします。
（・・・略・・・） module.exports = class GameSettings { （・・・略・・・） // タンク（・・・略・・・） static get TANK_WAIT_FOR_NEW_BULLET() { return 1000.0 * 0.2; } // 単位[ms]。1000 x X秒（・・・略・・・） // 弾丸 static get BULLET_SPEED() { return 300.0; } static get BULLET_LIFETIME_MAX() { return 2.0; } // 単位[s]。1000[ms] x X秒 }

コード解説

タンクに関する設定として、弾丸発射待ち時間の設定を追加します。
弾丸に関する設定を追加します。

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

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

「public/js/client.js」の内容を以下のようにします。
（・・・略・・・） $( document ).on( 'keydown keyup', ( event ) => { （・・・略・・・） if( ' ' === event.key && 'keydown' === event.type ) { // サーバーにイベント名'shoot'を送信 socket.emit( 'shoot' ); } } );

コード解説

スペースキーの入力を、「弾丸の発射」データに変換し、サーバーに送信する処理を追加します。（ $( document ).on('keydown keyup', ・・・略・・・ ); ）

スクリーンクラスの変更

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

コード解説

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

アセットクラスの変更

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

コード解説

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

共有設定クラスの変更

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

コード解説

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

動作確認

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

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

スペースキーで、タンクから弾丸が発射されます。

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

ダウンロード

サンプルプログラム

デモ