10．スマートフォンへの対応

スマートフォンに対応します。
タッチ操作でも操作できるようにします。

デモ

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

解説

タッチ操作でも操作できるようにするための、変更は以下です。

（サーバー側）

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

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

表示倍率を１倍表示固定にする設定を追加します。

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

画面をタッチした時の処理を追加します。処理内容は、「タッチ開始時にするは、弾丸を発射し、前進を開始。右にドラッグすると右旋回し、左にドラッグすると左旋回。」です。

準備

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

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

index.htmlの変更

「public/index.html」の内容を以下のようにします。
<html> <head> （・・・略・・・） </head> <body style="display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0;"> （・・・略・・・） </div>  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <script src="/socket.io/socket.io.js"></script> （・・・略・・・） </body> </html>

コード解説

表示倍率を１倍表示固定にする設定を追加します。（ <meta name="viewport" ・・・略・・・ > ）

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

「public/js/client.js」の末尾に、以下を追加します
// タッチ情報（キー：identifier, 値：（pageX, pageY）のリスト const touches = {}; // タッチ開始 $( '#canvas-2d' ).on( 'touchstart', ( event ) => { event.preventDefault(); // ブラウザ規定の動作の抑止 //console.log( 'touchstart', event, event.originalEvent.changedTouches ); socket.emit( 'shoot' ); // ショット objMovement['forward'] = true; // 前進 Array.from( event.originalEvent.changedTouches ).forEach( ( touch ) => { // タッチ情報のリストへの追加 touches[touch.identifier] = { pageX: touch.pageX, pageY: touch.pageY }; } ); } ); // タッチしながら移動 $( '#canvas-2d' ).on( 'touchmove', ( event ) => { event.preventDefault(); // ブラウザ規定の動作の抑止 //console.log( 'touchmove', event, event.originalEvent.changedTouches ); objMovement['right'] = false; // 右旋回の設定の解除 objMovement['left'] = false; // 左旋回の設定の解除 Array.from( event.originalEvent.changedTouches ).forEach( ( touch ) => { // 開始点に対するスライド方向い従い、右旋回、左旋回を設定する const startTouch = touches[touch.identifier]; objMovement['right'] |= ( 30 < ( touch.pageX - startTouch.pageX ) ); objMovement['left'] |= ( -30 > ( touch.pageX - startTouch.pageX ) ); } ); socket.emit( 'change-my-movement', objMovement ); } ); // タッチ終了 $( '#canvas-2d' ).on( 'touchend', ( event ) => { event.preventDefault(); // ブラウザ規定の動作の抑止 //console.log( 'touchend', event, event.originalEvent.changedTouches ); Array.from( event.originalEvent.changedTouches ).forEach( ( touch ) => { // タッチ情報の削除 delete touches[touch.identifier]; } ); if( 0 === Object.keys( touches ).length ) { // 移動終了 objMovement = {}; socket.emit( 'change-my-movement', objMovement ); } } );

コード解説

画面をタッチした時の処理を追加します。処理内容は、「タッチ開始時にするは、弾丸を発射し、前進を開始。右にドラッグすると右旋回し、左にドラッグすると左旋回。」です。

動作確認

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

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

大きいゲームフィールドに対して、自タンクを中心とした小さい領域で表示されます。

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

ダウンロード

サンプルプログラム

デモ