オンライン対戦ゲームを作る ( Node.js + Socket.io )

Node.js と Socket.io を用いて、オンライン対戦ゲームを作成する方法を解説します。
ゲームとしては、戦車対戦ゲームを作ります。

使用開発環境は、以下です。
Node.js : version 8.12.0
Express : version 4.16.4
Socket.io : version 2.2.0

01．ゲームの骨格を作る
オンライン対戦のタンクゲームを作っていきます。まず、オンライン対戦ゲームの骨格を作ります。

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

02．プレーヤの操作で移動するタンクの追加
プレーヤーの操作で移動するタンクを追加します。

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

03．タンクの移動を妨げる壁の追加
タンクの移動を妨げる壁を追加します。また、タンクがフィールドの外へ移動できないようにもします。

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

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

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

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

07．自動で動くボットタンクの追加
自動で動くボットタンクを追加します。

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

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

09．ゲームフィールドの全部ではなく一部を表示
ゲームフィールドの全部ではなく一部を表示するようにします。
ゲームフィールドの全部ではなく一部を表示するときには、サーバーからクライアントへの「ゲーム内に存在しているもの」の送信は、すべてではなく、「各クライアントの画面内に位置するもの」を送信します。

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

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

参考