複数人でのゲーム進行
異世界衰弱（案C：リアルタイム神経衰弱＋種族効果）において、複数人でゲームを進行するための部屋・参加・切断・再接続まわりの製作過程を記録します。
1. 何を実装したか
Phase 1: 基本フロー
- 部屋作成・参加 … 部屋IDは数字6桁。ニックネームのみで参加可能（ログイン任意）。
- ゲーム開始・進行 … 2人以上で「ゲーム開始」を押すと、54枚のカードが並ぶ。自分のターンで2枚めくってペアを揃える。
- ターン制 … 順番制で、ペア成立時は続けて1回だけ追加でめくれる。
Phase 2: 退出・強制終了
- ゲーム中に1人でも退出すると、残り人数に関係なくゲームを強制終了。
- 残されたプレイヤーには「対戦相手が退室したのでゲームは強制終了となります。」をゲーム画面上でポップアップ表示。
- ゲーム進行中の部屋には参加させない。
Phase 3: ペア演出・スマホ対応
- ペア成立時の演出 … 中央へ移動＋2回転＋300%拡大→グロー→フェードアウト。
- スマホ表示時 … viewport が 1200px 以下のとき、ゲーム画面を最大化表示。
- Android での演出 … 全画面・スマホ最大化時はオーバーレイをゲーム内に配置しないと表示されないため、神経衰弱の知見を活かして対応済み。
- カードレイアウト … 54枚をなるべく大きく表示するようグリッドを動的に最適化。
Phase 4: 部屋猶予・再接続
- 部屋2分猶予 … 最終退出後、部屋をすぐには削除せず2分間残す。PCとスマホが同時に切断されても、同じ部屋IDで再参加可能。
- 部屋の定期確認 … 部屋待機中に30秒ごとにサーバーへ問い合わせ。2分経過や参加者でなくなった場合は「部屋の有効期限が切れました。ロビーに戻ります。」でロビーへ。
- 切断時の処理 … 部屋待機中に接続が切れた場合、ロビーへ戻しつつ部屋IDを入力欄に残す。「接続が切れました。部屋IDを入力して再度参加してください。」で再参加を促す。
- 参加者リスト・ゲーム開始ボタン … 誰かが参加したら
room_updatedで参加者リストと「ゲーム開始」ボタンの表示を更新。
2. 起きた問題と対策
| 問題 | 原因 | 対策 |
|---|---|---|
| 「その部屋は存在しません」 | PCとスマホが同時切断され、部屋が即削除されていた | 最終退出後2分間部屋を残す猶予を導入 |
| 参加者リストが自分だけ表示される | 切断で部屋から外れた側が room_updated を受け取れず古い表示のまま | 切断検知時にロビーへ戻し、部屋IDを入力欄に残す |
| ゲーム開始ボタンが出ない | room_updated でボタン表示を更新していなかった | room_updated ハンドラで参加者2人以上時にボタン表示 |
| Androidでペア演出が見えない | オーバーレイが document.body 直下だと、スマホ最大化時の固定レイヤー背面に隠れる | 全画面・game-maximized 時はオーバーレイをゲームコンテナ内に配置 |
3. 現時点の達成状況
- 完了 … 部屋作成・参加・ゲーム開始・カードめくり・ペア判定・ターン制、退出時強制終了、部屋2分猶予、切断時のロビー戻り、参加者表示・ゲーム開始ボタン更新、ペア演出、スマホ最大化、カードレイアウト最適化。
- 未実装・保留 … 種族効果（設計のみ）、チャット・DM、ポイントシステム、ログイン連携（現状はニックネームのみ）。
4. 動作確認環境
- PC（Web） … 想定どおり動作
- PC スマホ表示（レスポンシブ） … 想定どおり動作
- Android（Web） … ペア演出・スマホ最大化含め想定どおり動作
- iPhone（Web） … 神経衰弱と同様、一部想定外の挙動あり（未対応）
ゲームは左メニュー「テスト環境」→「異世界衰弱」からプレイできます。
← 立ち上げストーリー
← プログラム構築の記録
← デプロイの記録
← ボタン1つデプロイの記録
← デプロイでまたハマった話
← ログイン設定の記録
← 改善記録
← ファイル紹介の使い方
← OGP・SEOの記録
← 統合ログインの設計・経緯
← Search Console・サイトマップ
← 環境変数・.env の管理
← Git 入門・インストール
← インストール後に Git で行う設定
← カード神経衰弱の記録
← 異世界シューティングの記録
← 異世界シューティングの難易度
← 異世界戦記（全画面・迷路レイアウト）の記録
← 異世界衰弱（不具合の修正）
← 異世界衰弱（機能別フローチャート）
← 異世界ポイントの活用について
← 異世界ポイント市場の実装記録