05．弾丸を当てられたタンクはライフが減り、当てたタンクは得点を得る

弾丸を当てられたタンクはライフが減り、当てたタンクは得点を得るようにします。

デモ

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

解説

弾丸を当てられたタンクはライフが減り、当てたタンクは得点を得るようにするための、変更は以下です。

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

コンストラクタの引数に、「ソケットID」を追加します。
メンバー変数に、「ソケットID」、「ライフ」、「ライフ最大値」、「得点」を追加します。
追加したメンバー変数の値を、クライアントに送信するために、メンバー関数に、toJSON関数を追加します。
メンバー関数に、弾丸を当てられた際に実行するダメージ関数をを追加します。

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

衝突チェックの関数に、弾丸とタンクの衝突の判定と、衝突があった際には、「弾丸を当てられたタンクはライフが減り、当てたタンクは得点を得る」処理を追加します。
タンクの生成関数の引数にソケットIDを追加します。

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

タンクの生成関数の引数にソケットIDを追加します。
ライフがゼロのときは、『タンク動作変更』の指示を無視するようにします。
ライフがゼロのときは、『弾丸発射』の指示を無視するようにします。

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

タンクに関する設定として、ライフ最大値の設定を追加します。

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

ブラウザへの描画処理にライフの描画処理を追加します。
ブラウザへの描画処理に得点の描画処理を追加します。

（クライアント側）描画設定クラスの変更

ライフに関する設定を追加します。
得点に関する設定を追加します。

準備

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

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

タンククラスの変更

「libs/Tank.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class Tank extends GameObject { // コンストラクタ constructor( strSocketID, rectField, setWall ) { // 親クラスのコンストラクタ呼び出し super( SharedSettings.TANK_WIDTH, SharedSettings.TANK_HEIGHT, 0.0, 0.0, Math.random() * 2 * Math.PI ); this.strSocketID = strSocketID; 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.iTimeLastShoot = 0; // 最終ショット時刻 this.iLife = GameSettings.TANK_LIFE_MAX; this.iLifeMax = GameSettings.TANK_LIFE_MAX; this.iScore = 0; // 障害物にぶつからない初期位置の算出（・・・略・・・） } toJSON() { return Object.assign( super.toJSON(), { strSocketID: this.strSocketID, iLife: this.iLife, iLifeMax: this.iLifeMax, iScore: this.iScore, } ); } // 更新（・・・略・・・） // ダメージ damage() { this.iLife--; return this.iLife; } }

コード解説

コンストラクタの引数に、「ソケットID」を追加します。（コンストラクタ）
メンバー変数に、「ソケットID」、「ライフ」、「ライフ最大値」、「得点」を追加します。（コンストラクタ）
追加したメンバー変数の値を、クライアントに送信するために、メンバー関数に、toJSON関数を追加します。（ toJSON関数）
メンバー関数に、弾丸を当てられた際に実行するダメージ関数をを追加します。（ damage関数）

ワールドクラスの変更

「libs/World.js」の内容を以下のようにします。
// モジュール const Tank = require( './Tank.js' ); const Wall = require( './Wall.js' ); const OverlapTester = require( './OverlapTester.js' ); （・・・略・・・） module.exports = class World { （・・・略・・・） // 衝突のチェック checkCollisions() { // 弾丸ごとの処理 this.setBullet.forEach( ( bullet ) => { // タンクごとの処理 this.setTank.forEach( ( tank ) => { if( tank !== bullet.tank ) { // 発射元のタンクとの衝突処理はなし if( OverlapTester.overlapRects( tank.rectBound, bullet.rectBound ) ) { // 衝突 if( 0 === tank.damage() ) { // ライフ無くなった // タンクの削除 console.log( 'dead : socket.id = %s', tank.strSocketID ); this.destroyTank( tank ); } this.destroyBullet( bullet ); bullet.tank.iScore++; // 当てたタンクの得点を加算する } } } ); } ); } （・・・略・・・） // タンクの生成 createTank( strSocketID ) { （・・・略・・・） // タンクの生成 const tank = new Tank( strSocketID, rectTankField, this.setWall ); （・・・略・・・） } （・・・略・・・） }

コード解説

衝突チェックの関数に、弾丸とタンクの衝突の判定と、衝突があった際には、「弾丸を当てられたタンクはライフが減り、当てたタンクは得点を得る」処理を追加します。（ checkCollisions関数）
タンクの生成関数の引数にソケットIDを追加します。（ createTank関数）

ゲームクラスの変更

「libs/Game.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class Game { // 始動 start( io ) { （・・・略・・・） io.on( 'connection', ( socket ) => { （・・・略・・・） // ゲーム開始時の処理の指定 // ・クライアント側の接続確立時の「socket.emit( 'enter-the-game' );」に対する処理 socket.on( 'enter-the-game', () => { // 自タンクの作成 console.log( 'enter-the-game : socket.id = %s', socket.id ); tank = world.createTank( socket.id ); } ); // 移動コマンドの処理の指定 // ・クライアント側のキー入力時の「socket.emit( 'change-my-movement', objMovement );」に対する処理 socket.on( 'change-my-movement', ( objMovement ) => { //console.log( 'change-my-movement : socket.id = %s', socket.id ); if( !tank || 0 === tank.iLife ) { return; } tank.objMovement = objMovement; // 動作 } ); // ショット時の処理の指定 // ・クライアント側のキー入力時の「socket.emit( 'shoot' );」に対する処理 socket.on( 'shoot', () => { //console.log( 'shoot : socket.id = %s', socket.id ); if( !tank || 0 === tank.iLife ) { return; } world.createBullet( tank ); // ショット } ); // 切断時の処理の指定（・・・略・・・）

コード解説

タンクの生成関数の引数にソケットIDを追加します。（ socket.on( 'enter-the-game', ・・・略・・・ ); ）
ライフがゼロのときは、『タンク動作変更』の指示を無視するようにします。（ socket.on( 'change-my-movement', ・・・略・・・ ); ）
ライフがゼロのときは、『弾丸発射』の指示を無視するようにします。（ socket.on( 'shoot', ・・・略・・・ ); ）

ゲーム設定クラスの変更

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

コード解説

タンクに関する設定として、ライフ最大値の設定を追加します。

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

スクリーンクラスの変更

「public/js/Screen.js」の内容を以下のようにします。
// スクリーンクラス class Screen { （・・・略・・・） // 描画。animateから無限に呼び出される render( iTimeCurrent ) { //console.log( 'render' ); // 自タンクの取得 let tankSelf = null; if( null !== this.aTank ) { this.aTank.some( ( tank ) => { if( tank.strSocketID === this.socket.id ) { // 自タンク tankSelf = tank; return true; } } ); } // キャンバスのクリア（・・・略・・・） // キャンバスの枠の描画（・・・略・・・） this.context.restore(); // 画面左上に得点表示 if( null !== tankSelf ) { this.context.save(); this.context.font = RenderingSettings.SCORE_FONT; this.context.fillStyle = RenderingSettings.SCORE_COLOR; this.context.fillText( 'Score : ' + tankSelf.iScore, 20, 40 ); this.context.restore(); } // 画面右上にサーバー処理時間表示（・・・略・・・） } （・・・略・・・） renderTank( tank, iIndexFrame ) { （・・・略・・・） // 画像描画（・・・略・・・） this.context.restore(); // ライフ const fLifeCellWidth = SharedSettings.TANK_WIDTH / tank.iLifeMax; const fLifeCellStartX = -( fLifeCellWidth * tank.iLifeMax * 0.5 ); // ゼロからライフ値まで：REMAINING_COLOR { this.context.fillStyle = RenderingSettings.LIFE_REMAINING_COLOR; this.context.fillRect( fLifeCellStartX, SharedSettings.TANK_WIDTH * 0.5, fLifeCellWidth * tank.iLife, 10 ); } // ライフ値からライフマックスまで：MISSING_COLOR if( tank.iLife < tank.iLifeMax ) { this.context.fillStyle = RenderingSettings.LIFE_MISSING_COLOR; this.context.fillRect( fLifeCellStartX + fLifeCellWidth * tank.iLife, SharedSettings.TANK_WIDTH * 0.5, fLifeCellWidth * ( tank.iLifeMax - tank.iLife ), 10 ); } this.context.restore(); } （・・・略・・・）

コード解説

ブラウザへの描画処理にライフの描画処理を追加します。（ renderTank関数）
ブラウザへの描画処理に得点の描画処理を追加します。（ render関数）

描画設定クラスの変更

「public/js/RenderingSettings.js」の内容を以下のようにします。
// 描画に関する設定クラス class RenderingSettings { （・・・略・・・） // ライフ static get LIFE_REMAINING_COLOR() { return 'green'; } static get LIFE_MISSING_COLOR() { return 'red'; } // スコア static get SCORE_FONT() { return '30px Bold Arial'; } static get SCORE_COLOR() { return 'black'; }; }

コード解説

ライフに関する設定を追加します。
得点に関する設定を追加します。

動作確認

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

ブラウザから、「localhost:1337」にアクセスします。
ブラウザをもう一つ立ち上げ、「localhost:1337」にアクセスします。

画面左上に得点が表示されます。
それぞれのタンクの下にライフが表示されます。
弾丸を当てられたタンクはライフが減り、当てたタンクは得点を得ます。

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

ダウンロード

サンプルプログラム

デモ