06．ニックネームを入力するスタート画面の追加

ニックネームを入力するスタート画面を追加します。

デモ

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

解説

ニックネームを入力するスタート画面を追加するための、変更は以下です。

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

コンストラクタの引数に、「ニックネーム」を追加します。
メンバー変数に、「ニックネーム」を追加します。
「ニックネーム」を、クライアントに送信するために、toJSON関数に追加します。

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

タンクの生成関数の引数にニックネームを追加します。
タンクの破棄関数に、削除タンクのクライアントにイベント「dead」を送信する処理を追加します。

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

『ゲーム開始』の指示の際には、ニックネームを受信する処理を追加します。
タンクの生成関数の引数にニックネームを追加します。

（クライアント側）index.htmlの変更

ニックネームを入力するスタート画面を追加します。

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

スタートボタンをクリックした時の処理を追加します。処理内容は、「入力した『ニックネーム』を付けて、『ゲーム開始」を、サーバーに送信する」「スタート画面を非表示にする」です。

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

「クライアントとサーバーが接続したらゲーム開始」から「『スタートボタン』を押したらゲーム開始」に変わるので、「クライアントとサーバーの接続時の処理」の「『ゲーム開始』を、サーバーに送信する」をコメントアウトします。
イベント「dead」を受信する処理を追加します。処理内容は、「スタート画面を表示する」です。
ブラウザへの描画処理にニックネームの描画処理を追加します。

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

ニックネームに関する設定を追加します。

準備

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

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

タンククラスの変更

「libs/Tank.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class Tank extends GameObject { // コンストラクタ constructor( strSocketID, strNickName, rectField, setWall ) { // 親クラスのコンストラクタ呼び出し super( SharedSettings.TANK_WIDTH, SharedSettings.TANK_HEIGHT, 0.0, 0.0, Math.random() * 2 * Math.PI ); this.strSocketID = strSocketID; this.strNickName = strNickName; （・・・略・・・） } toJSON() { return Object.assign( super.toJSON(), { strSocketID: this.strSocketID, strNickName: this.strNickName, （・・・略・・・） } ); } （・・・略・・・）

コード解説

コンストラクタの引数に、「ニックネーム」を追加します。（コンストラクタ）
メンバー変数に、「ニックネーム」を追加します。（コンストラクタの this.strNickName = strNickName; ）
「ニックネーム」を、クライアントに送信するために、toJSON関数に追加します。（ toJSON関数）

ワールドクラスの変更

「libs/World.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class World { （・・・略・・・） // タンクの生成 createTank( strSocketID, strNickName ) { （・・・略・・・） // タンクの生成 const tank = new Tank( strSocketID, strNickName, rectTankField, this.setWall ); （・・・略・・・） } // タンクの破棄 destroyTank( tank ) { // タンクリストリストからの削除 this.setTank.delete( tank ); // 削除タンクのクライアントにイベント'dead'を送信 this.io.to( tank.strSocketID ).emit( 'dead' ); } （・・・略・・・）

コード解説

タンクの生成関数の引数にニックネームを追加します。（ createTank関数）
タンクの破棄関数に、削除タンクのクライアントにイベント「dead」を送信する処理を追加します。（ destroyTank関数）

ゲームクラスの変更

「libs/Game.js」の内容を以下のようにします。
（・・・略・・・） module.exports = class Game { // 始動 start( io ) { （・・・略・・・） io.on( 'connection', ( socket ) => { （・・・略・・・） socket.on( 'enter-the-game', ( objConfig ) => { // 自タンクの作成 console.log( 'enter-the-game : socket.id = %s', socket.id ); tank = world.createTank( socket.id, objConfig.strNickName ); } ); （・・・略・・・）

コード解説

『ゲーム開始』の指示の際には、ニックネームを受信する処理を追加します。（ socket.on( 'enter-the-game',( objConfig ) =>{ ・・・略・・・ } ); ）
タンクの生成関数の引数にニックネームを追加します。（ tank = world.createTank( socket.id, objConfig.strNickName ); ）

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

index.htmlの変更

「public/index.html」の内容を以下のようにします。
<html> <head> <title>Online Battle Tanks</title> <style> （・・・略・・・） #start-screen { width: 100%; height: 100%; display: flex; align-items: center; position: absolute; z-index: 10; background-color: rgba(128,128,128,0.5); } </style> </head> <body style="display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0;"> <div>Online Battle Tanks</div> <div style="flex: 1 1; position: relative; overflow:hidden;"> <div id="start-screen"> <div style="text-align: center; width: 100%; font-size: xx-large;"> <input type="text" name="nickname" id="nickname" placeholder="Your nickname" autofocus><br /><br /> <button style="font-size: xx-large;" id="start-button">Start</button> </div> </div> <canvas id="canvas-2d"></canvas> </div> （・・・略・・・） </body> </html>

コード解説

ニックネームを入力するスタート画面を追加します。（ #start-screen {・・・略・・・}、<div id="start-screen"> ・・・略・・・ </div> ）

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

「public/js/client.js」の末尾に、以下を追加します
// スタートボタン $( '#start-button' ).on( 'click', () => { // サーバーに'enter-the-game'を送信 const objConfig = { strNickName: $( '#nickname' ).val() }; socket.emit( 'enter-the-game', objConfig ); $( '#start-screen' ).hide(); } );

コード解説

スタートボタンをクリックした時の処理を追加します。処理内容は、「入力した『ニックネーム』を付けて、『ゲーム開始」を、サーバーに送信する」「スタート画面を非表示にする」です。

スクリーンクラスの変更

「public/js/Screen.js」の内容を以下のようにします。
// スクリーンクラス class Screen { （・・・略・・・） // ソケットの初期化 initSocket() { （・・・略・・・） this.socket.on( 'connect', () => { console.log( 'connect : socket.id = %s', socket.id ); // サーバーに'enter-the-game'を送信 // this.socket.emit( 'enter-the-game' ); } ); // サーバーからの状態通知に対する処理（・・・略・・・） // デッドしたらスタート画面に戻る this.socket.on( 'dead', () => { $( '#start-screen' ).show(); } ); } （・・・略・・・） renderTank( tank, iIndexFrame ) { （・・・略・・・） // ライフ値からライフマックスまで：MISSING_COLOR if( tank.iLife < tank.iLifeMax ) { （・・・略・・・） } // ニックネーム this.context.save(); this.context.textAlign = 'center'; this.context.font = RenderingSettings.NICKNAME_FONT; this.context.fillStyle = RenderingSettings.NICKNAME_COLOR; this.context.fillText( tank.strNickName, 0, -50 ); this.context.restore(); this.context.restore(); } （・・・略・・・）

コード解説

「クライアントとサーバーが接続したらゲーム開始」から「『スタートボタン』を押したらゲーム開始」に変わるので、「クライアントとサーバーの接続時の処理」の「『ゲーム開始』を、サーバーに送信する」をコメントアウトします。（ this.socket.on('connect', ・・・略・・・ ); ）
イベント「dead」を受信する処理を追加します。処理内容は、「スタート画面を表示する」です。（ this.socket.on('dead', ・・・略・・・ ); ）
ブラウザへの描画処理にニックネームの描画処理を追加します。（ renderTank関数）

描画設定クラスの変更

「public/js/RenderingSettings.js」の内容を以下のようにします。
// 描画に関する設定クラス class RenderingSettings { （・・・略・・・） // ニックネーム static get NICKNAME_FONT() { return '30px Bold Arial'; } static get NICKNAME_COLOR() { return 'blue'; } }

コード解説

ニックネームに関する設定を追加します。

動作確認

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

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

ニックネーム入力欄とスタートボタンがあります。
ゲームフィールドが半透明で表示されます。

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

ダウンロード

サンプルプログラム

デモ