08．自タンクが画面中央に来るように表示

自タンクが画面中央に来るように表示します。

デモ

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

解説

自タンクが画面中央に来るように表示するための、変更は以下です。

（サーバー側）

サーバー側のスクリプトの変更はありません。

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

メンバー変数に、描画中心座標値を追加します。
描画処理に、自タンク座標値が中心になりように、全体を平行移動する処理を追加します。

準備

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

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

スクリーンクラスの変更

「public/js/Screen.js」の内容を以下のようにします。
// スクリーンクラス class Screen { （・・・略・・・） // コンストラクタ constructor( socket, canvas ) { （・・・略・・・） // 描画中心座標値 this.fCenterX = SharedSettings.FIELD_WIDTH * 0.5; this.fCenterY = SharedSettings.FIELD_HEIGHT * 0.5; } （・・・略・・・） // 描画。animateから無限に呼び出される render( iTimeCurrent ) { //console.log( 'render' ); // 自タンクの取得 let tankSelf = null; if( null !== this.aTank ) { （・・・略・・・） } // 描画中心座標値 if( null !== tankSelf ) { // 自タンク座標値 this.fCenterX = tankSelf.fX; this.fCenterY = tankSelf.fY; } // キャンバスのクリア this.context.clearRect( 0, 0, canvas.width, canvas.height ); // 全体を平行移動 // 中心座標値が(CenterX, CenterY)、キャンバスの大きさが(CanvasX, CanvaxY)の場合 // キャンバス中心は(CanvasX/2, CanvasY/2) // 中心座標値とキャンバス中心との差分、オフセットする。 // オフセット量は、{ -(CenterX - CanvasX/2), -(CenterY - CanvasY/2) } => { CanvasX * 0.5 - CenterX, CanvasY * 0.5 - CanvasY} this.context.save(); this.context.translate( this.canvas.width * 0.5 - this.fCenterX, this.canvas.height * 0.5 - this.fCenterY ); // キャンバスの塗りつぶし（・・・略・・・） // 弾丸の描画 if( null !== this.aBullet ) { （・・・略・・・） } // 全体を平行移動の終了 this.context.restore(); （・・・略・・・） } （・・・略・・・）

コード解説

メンバー変数に、描画中心座標値を追加します。（コンストラクタ）
描画処理に、自タンク座標値が中心になりように、全体を平行移動する処理を追加します。（ render関数）

動作確認

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

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

自タンクが画面中央に来ます。

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

ダウンロード

サンプルプログラム

デモ