phone ∧ shoot (phone AND shoot)

スマートフォンでモニター上に次々と現れる敵(バグ)を撃ちまくる電脳世界のシューティングゲーム

• スマートフォンの傾きで自機を移動させる
• スマートフォンのタップで射撃
• 時々現れるアイテムを取ると即時回復もしくは使うと一定時間無敵、3点バーストショット、スコア2倍などの効果が得られる

工夫点

• Client-Side Prediction - 処理負荷軽減と通信負荷軽減のため、プレイヤー以外の動きはあらかじめ決定しておき、フロントエンドに関数式そのものを送るようにした
• P2P - サーバーが必要であるNode.jsと異なって、p2p/にはPeerJSを用いてブラウザ側でホスティングできるように
• フルスクリーンにするためにiOSではFullscreen APIの代わりにスワイプで対応

技術構成

モニター (フロントエンド)

• HTML/CSS/JavaScript/Canvas/WebSocket

サーバーから受け取ったデータをもとにゲームの画面を描画する。
キャラクターや敵、弾などのオブジェクトを描画する。

スマートフォン (フロントエンド)

• HTML/CSS/JavaScript/WebSocket

スマートフォンのジャイロセンサーから傾きを検知して、サーバーに移動量を送信する。
スマートフォンのタップを検知して、サーバーに射撃の指示などを送信する。

サーバー (バックエンド)

• JavaScript/Node.js/WebSocket/Express

ゲームのシステムを実装する。
スマートフォンから受け取ったデータを処理して、ゲームの状態を更新し、モニターに描画する指示データを送信する。
ゲームの状態は、プレイヤーの位置やHP、スコア、敵の位置やHP、弾の位置などを管理する。

起動手順

バックエンドを起動すると自動的にフロントエンド側もパスが通されます。
フロントエンド側はモニターが/viewer, スマートフォンが/clientとなります。

起動方法1

run.bat

Windowsであればrun.batから実行します

起動方法2

cd backend
npm install
npm run dev
npm run ngrok