diff --git a/CLAUDE.md b/CLAUDE.md index ceb2af4..5d147f0 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -191,3 +191,14 @@ - 対象: `apps/client/src`，`apps/server/src`，`packages/shared/src` 配下の変更 - 既存の記載粒度（代表的なファイル・フォルダのみ）に合わせて追記・修正する - ファイル単体の追加でも，同階層に未記載のディレクトリが生じた場合は追記する + +--- + +## 7. ゲーム定数変更時のSPEC更新 + +`packages/shared/src/config/gameConfig.ts` の定数値を変更した場合は，`docs/04_SPEC/` 配下の対応する仕様書を合わせて更新すること． + +- 対象: `GAME_CONFIG` 内の時間・距離・回数などの数値定数 +- 特に影響が大きいファイル: + - `SPEC_03_ゲームプレイ仕様.txt`（制限時間，ボム・ハリケーン・被弾の各パラメータ） + - `SPEC_04_HUD_UI仕様.txt`（表示切替のしきい値，クールダウン時間） diff --git "a/docs/04_SPEC/SPEC_01_\343\202\262\343\203\274\343\203\240\346\246\202\350\246\201_\347\224\273\351\235\242\351\201\267\347\247\273.txt" "b/docs/04_SPEC/SPEC_01_\343\202\262\343\203\274\343\203\240\346\246\202\350\246\201_\347\224\273\351\235\242\351\201\267\347\247\273.txt" new file mode 100644 index 0000000..1886005 --- /dev/null +++ "b/docs/04_SPEC/SPEC_01_\343\202\262\343\203\274\343\203\240\346\246\202\350\246\201_\347\224\273\351\235\242\351\201\267\347\247\273.txt" @@ -0,0 +1,77 @@ +======================================================================== +ゲーム概要・画面遷移仕様 (Game Overview & Screen Flow) +======================================================================== + + +1. ゲーム概要 (Game Overview) +------------------------------------------------------------------------ + +1-1. コンセプト + チーム対抗の陣取りペイントバトルゲーム． + 複数のプレイヤーがリアルタイムで同じフィールドに参加し，自チームの色でマスを塗りつぶして陣地を広げる． + 制限時間内に最も多くの面積を塗ったチームが勝利する． + +1-2. 基本仕様 + ・ジャンル: チーム対抗リアルタイム陣取りゲーム + ・チーム数: 4チーム（赤・青・緑・黄） + ・制限時間: 180秒（3分） + ・勝利条件: 終了時に最も多くのセルを塗ったチームが1位 + ・対応プラットフォーム: ブラウザ（モバイル・PC） + ・画面方向: 横画面固定（ランドスケープ） + +1-3. ゲームの流れ + 1. プレイヤーがルームに参加する + 2. ホストがゲーム設定を行い，ゲームを開始する + 3. 制限時間内にフィールドを移動し，ボムを設置して自チームの色でマスを塗る + 4. 制限時間終了後，チーム別の塗り面積で順位が決定する + + +2. 画面遷移 (Screen Flow) +------------------------------------------------------------------------ + +2-1. 画面一覧 + ・タイトル画面: ゲームへの入口，プレイヤー名とルームIDを入力して入室する + ・ロビー画面: ゲーム開始前の待機画面，参加者一覧とゲーム設定を表示する + ・ゲーム画面: メインのゲームプレイ画面，移動とボム設置を行う + ・リザルト画面: ゲーム終了後の結果表示画面 + +2-2. 遷移フロー + タイトル → ロビー → ゲーム → リザルト → タイトル + + ■ タイトル → ロビー + ・トリガー: プレイヤー名とルームIDを入力し「GAME START」ボタンを押す + ・条件: サーバーから入室許可を受け取った場合に遷移する + ・失敗時: エラーメッセージを表示し，タイトル画面に留まる + + ■ ロビー → ゲーム + ・トリガー: ホストが「ゲームスタート」ボタンを押す + ・条件: サーバーからゲーム開始通知を受信した全員が遷移する + + ■ ゲーム → リザルト + ・トリガー: 制限時間終了（サーバーからゲーム終了＋結果通知を受信） + ・自動遷移: プレイヤー操作不要で遷移する + + ■ リザルト → タイトル + ・トリガー: 「タイトルへ戻る」ボタンを押す + + +3. チーム仕様 (Team Specification) +------------------------------------------------------------------------ + +3-1. チーム構成 + ・チーム数: 4 + ・チーム名とID: + - ID 0: 赤チーム + - ID 1: 青チーム + - ID 2: 緑チーム + - ID 3: 黄チーム + +3-2. チーム割り当て方式 + ・ランダム（random）: サーバーが人数バランスを考慮して自動割り当てする + ・プレイヤー選択（player_select）: プレイヤーが希望チームを選択する + - 満員のチームは選択できない + - 未選択の場合はランダムに割り当てられる + +3-3. Bot（AI プレイヤー） + ・目標人数に対して人数が不足する場合，Botが自動的に補充される + ・接続切断したプレイヤーはBotに置き換えられる diff --git "a/docs/04_SPEC/SPEC_02_\343\203\255\343\203\223\343\203\274\344\273\225\346\247\230.txt" "b/docs/04_SPEC/SPEC_02_\343\203\255\343\203\223\343\203\274\344\273\225\346\247\230.txt" new file mode 100644 index 0000000..3808159 --- /dev/null +++ "b/docs/04_SPEC/SPEC_02_\343\203\255\343\203\223\343\203\274\344\273\225\346\247\230.txt" @@ -0,0 +1,80 @@ +======================================================================== +ロビー仕様 (Lobby Specification) +======================================================================== + + +1. タイトル画面 (Title Screen) +------------------------------------------------------------------------ + +1-1. 画面構成 + ・背景: タイトル画像（title.png）を全画面表示する + ・初期状態: 「- TAP TO START -」が点滅表示される + ・タップ後: 入力フォームがフェードインで表示される + +1-2. 入力項目 + ・プレイヤー名: テキスト入力（必須） + ・ルームID: テキスト入力（必須） + +1-3. 入室操作 + ・「GAME START」ボタンを押すとサーバーへ入室リクエストを送信する + ・送信中はボタンが「接続中...」表示になり，非活性化される + ・両方の入力が空でない場合のみボタンが活性化される + +1-4. 入室拒否 + サーバーから拒否された場合，エラーメッセージを表示する． + ・満員（full）: ルームの最大人数に達している + ・重複（duplicate）: 同じ接続IDで既に入室済み + ・ゲーム中（playing）: ルームが既にゲーム中である + + +2. ロビー画面 (Lobby Screen) +------------------------------------------------------------------------ + +2-1. 画面レイアウト + ・左上: 「タイトルへ戻る」ボタン + ・上部中央: ルームIDと「(待機中)」ステータス表示 + ・左半分: ゲーム操作パネル（スタートボタン or 待機メッセージ） + ・右半分: 参加プレイヤーリスト + +2-2. ホスト（オーナー）向け表示 + + ■ ゲーム設定（歯車ボタンからモーダルで開く） + ・目標人数: 4人刻みで選択（最小: 現在の参加人数を4の倍数に切り上げ，最大: 100） + - 不足分はBotが補充される + ・フィールドサイズ: プリセットから選択 + - SMALL: 推奨 4〜20人 + - MEDIUM: 推奨 20〜40人（既定値） + - LARGE: 推奨 40〜70人 + - XLARGE: 推奨 70〜100人 + ・チーム割り当て方式: ランダム / プレイヤーが選択 + + ■ 操作ボタン + ・「ゲームスタート」ボタン: 押すと確認モーダルが表示される + ・「ルールを見る」ボタン: ゲームルール説明モーダルが開く + +2-3. メンバー（非オーナー）向け表示 + ・「ホストの開始を待っています...」メッセージ + ・ホストが設定したゲーム人数・フィールドサイズ・チーム割り当て方式の表示 + ・「ルールを見る」ボタン + +2-4. チーム選択 + ・チーム割り当て方式が「プレイヤーが選択」の場合に有効になる + ・選択肢: ランダム / 赤チーム / 青チーム / 緑チーム / 黄チーム + ・満員のチームを選択した場合，「このチームは満員です」メッセージが3秒間表示される + ・「ランダム」の場合は自動モードと同様にサーバーが割り当てる + +2-5. プレイヤーリスト + ・表示内容: プレイヤー名，オーナーマーク（王冠），自分マーク（緑丸） + ・チーム選択モード時: 選択チーム名をチームカラーで表示する + ・ソート順: 入った順（既定） / チーム順 / 名前順 + - チーム順はチーム選択モード時のみ選択可能 + ・ヘッダー: 「参加プレイヤー (現在人数/最大人数)」 + +2-6. ゲーム開始確認モーダル + ・ホストが「ゲームスタート」を押すと表示される + ・確認ボタンとキャンセルボタンがある + ・確認を押すとサーバーにゲーム開始リクエストを送信する + +2-7. 設定のリアルタイム同期 + ・ホストが設定を変更すると，サーバー経由で全メンバーに即時反映される + ・メンバー側では設定項目は閲覧のみ（変更不可） diff --git "a/docs/04_SPEC/SPEC_03_\343\202\262\343\203\274\343\203\240\343\203\227\343\203\254\343\202\244\344\273\225\346\247\230.txt" "b/docs/04_SPEC/SPEC_03_\343\202\262\343\203\274\343\203\240\343\203\227\343\203\254\343\202\244\344\273\225\346\247\230.txt" new file mode 100644 index 0000000..c3d0aba --- /dev/null +++ "b/docs/04_SPEC/SPEC_03_\343\202\262\343\203\274\343\203\240\343\203\227\343\203\254\343\202\244\344\273\225\346\247\230.txt" @@ -0,0 +1,144 @@ +======================================================================== +ゲームプレイ仕様 (Gameplay Specification) +======================================================================== + + +1. ゲーム進行 (Game Progression) +------------------------------------------------------------------------ + +1-1. タイムライン + ・開始カウントダウン: ゲーム開始通知から5秒間のカウントダウン後にプレイ開始 + ・通常フェーズ: 0〜120秒（残り180〜60秒） + ・フィーバータイム: 残り60秒から発動，ボムクールダウンが短縮される + ・ハリケーン出現: 残り120秒から出現する（ゲーム開始60秒経過後） + ・塗り率非表示: 残り30秒からチーム塗り率が隠される + ・ゲーム終了: 残り0秒でサーバーがゲーム終了を通知する + +1-2. 勝敗判定 + ・制限時間終了時のチーム別塗りセル数で順位を決定する + ・塗りセル数が最も多いチームが1位となる + + +2. フィールド仕様 (Field Specification) +------------------------------------------------------------------------ + +2-1. マップ構造 + ・グリッドベースのセル構造 + ・各セルはチームIDを保持する + - 未塗装: -1 + - チーム塗装: 0〜3（チームIDに対応） + ・座標系: 浮動小数点のグリッド座標（左上が原点） + +2-2. フィールドサイズプリセット + フィールドの実グリッドサイズは AOIセル数 × AOIセルサイズ（3）で算出される． + + | プリセット | AOIセル数 | 実グリッドサイズ | 推奨人数 | + | :--------- | :-------- | :--------------- | :----------- | + | SMALL | 8×8 | 24×24 | 4〜20人 | + | MEDIUM | 12×12 | 36×36 | 20〜40人 | + | LARGE | 15×15 | 45×45 | 40〜70人 | + | XLARGE | 18×18 | 54×54 | 70〜100人 | + +2-3. セル塗り処理 + ・プレイヤーが移動するとそのセルが自チームの色で塗られる + ・競合処理: 同一セルに複数チームのプレイヤーが同時に存在する場合，そのセルは塗られない + ・既に他チームが塗ったセルは上書きできる + + +3. プレイヤー操作 (Player Controls) +------------------------------------------------------------------------ + +3-1. 移動 + ・入力方式: 画面左側のバーチャルジョイスティック（タッチ操作） + ・方向: 360度全方位入力 + ・移動速度: 3グリッド/秒 + ・プレイヤー半径: 0.5グリッド + ・座標管理: 浮動小数点で管理し，滑らかな移動を実現する + ・カメラ: 自プレイヤーを常に画面中央に追従する + +3-2. ボム設置 + ・入力方式: 画面右側のボムボタンをタップ + ・設置位置: プレイヤーの現在座標 + ・爆発までの時間（信管）: 1000ms + ・爆発半径: 1.5グリッド（円形判定） + ・クールダウン: + - 通常時: 4000ms + - フィーバータイム時: 2000ms + +3-3. フィーバータイム + ・発動条件: ゲーム残り時間が60秒以下になった時点 + ・効果: ボムのクールダウンが4000msから2000msに短縮される + ・画面表示: 「!Fever Time!」通知が表示される + + +4. 被弾・リスポーン (Hit & Respawn) +------------------------------------------------------------------------ + +4-1. 被弾判定 + ・ボム爆発時，爆発半径内にいるプレイヤーに被弾判定が発生する + ・自チームのボムでは被弾しない + ・被弾したプレイヤーの被弾カウントが1増加する + +4-2. 被弾スタン + ・被弾時に1000msの間，入力が無効化される（スタン状態） + ・スタン中はプレイヤーが点滅する視覚エフェクトが表示される + +4-3. リスポーン + ・条件: 被弾カウントが5に達した場合にリスポーンが発生する + ・リスポーンスタン: 2000msの間，入力が無効化される + ・リスポーン位置: ゲーム開始時の初期スポーン地点 + ・被弾カウントはリスポーン後にリセットされる + + +5. ハリケーン (Hurricane Hazard) +------------------------------------------------------------------------ + +5-1. 出現条件 + ・ゲーム残り時間が120秒以下になった時点で出現する + ・同時出現数: 最大5個 + +5-2. ハリケーンの挙動 + ・直径: 2.2グリッド + ・移動速度: 1.5グリッド/秒 + ・移動方式: 直線移動し，フィールドの壁に当たると反射する + ・回転: 2.6 rad/秒で視覚的に回転する + +5-3. プレイヤーへの影響 + ・ハリケーンの範囲内に入ったプレイヤーはリスポーンが発生する + ・同一プレイヤーへの連続被弾クールダウン: 3000ms + ・画面表示: 出現時に「WARNING: ハリケーン出現」警告が表示される + + +6. Bot（AI プレイヤー） (Bot AI) +------------------------------------------------------------------------ + +6-1. 行動パターン + ・移動: 未塗装のセルを優先的に目標として移動する + ・ボム設置: 1ティック（50ms）あたり約6%の確率でボムを設置する + ・被弾時: 人間プレイヤーと同じスタン・リスポーン処理が適用される + +6-2. 補充ルール + ・目標人数に対して人間プレイヤーが不足する場合，Botが自動補充される + ・チームバランスを考慮して各チームに均等に配置される + + +7. サーバー同期 (Server Synchronization) +------------------------------------------------------------------------ + +7-1. ゲームループ + ・サーバーのティックレート: 20Hz（50ms間隔） + ・各ティックで実行される処理: + 1. ハリケーンの位置更新と衝突判定 + 2. Bot AIの行動決定 + 3. マップの塗り処理と競合判定 + 4. ボムの爆発判定（Bot向け） + 5. 差分データの組み立てとブロードキャスト + +7-2. 位置同期 + ・クライアントからサーバーへ: 50ms間隔でプレイヤー座標を送信する + ・サーバーからクライアントへ: 変化があったプレイヤーの座標のみを差分送信する + ・座標の量子化: Float座標をスケール100で整数化し，帯域を削減する + +7-3. 時刻同期 + ・Ping/Pongベースのクロック同期でクライアント・サーバー間の時刻差を推定する + ・推定オフセットはスムージングされ，急激な変動を抑制する diff --git "a/docs/04_SPEC/SPEC_03_\343\203\227\343\203\255\343\203\210\343\202\277\343\202\244\343\203\227_\347\247\273\345\213\225\343\203\206\343\202\271\343\203\210.txt" "b/docs/04_SPEC/SPEC_03_\343\203\227\343\203\255\343\203\210\343\202\277\343\202\244\343\203\227_\347\247\273\345\213\225\343\203\206\343\202\271\343\203\210.txt" deleted file mode 100644 index b4400cd..0000000 --- "a/docs/04_SPEC/SPEC_03_\343\203\227\343\203\255\343\203\210\343\202\277\343\202\244\343\203\227_\347\247\273\345\213\225\343\203\206\343\202\271\343\203\210.txt" +++ /dev/null @@ -1,107 +0,0 @@ -======================================================================== -プロトタイプ仕様書：50人同時移動テスト (Prototype Spec: Movement Test) -======================================================================== - - -1. プロトタイプ概要 (Overview) ------------------------------------------------------------------------- - -1-0. 目的 - 50人のプレイヤーが同じフィールド上で遅延なく移動できる通信基盤を検証する． - 衝突判定，塗り処理，ゲーム進行管理などの付随要素は実装せず，純粋な「移動同期」と「負荷検証」にフォーカスする． - -1-1. 検証範囲 - ・マップ: 100×100マスのグリッドマップ - ・人数: 最大50クライアント同時接続 - ・動作: 360度移動，カメラ追従，他者位置の同期表示 - - -2. クライアント実装仕様 (Client Implementation) ------------------------------------------------------------------------- - -2-0. 目的 - 入力処理，移動計算，および描画の基本ロジックを定義する． - -2-1. 入力・操作系 - ■ ジョイスティック操作 - ・左側エリア: 画面左半分をタッチ可能な移動ジョイスティック領域とする． - ・入力形式: 360°全方位入力． - ・ベクトル正規化: - - 入力ベクトルの長さが1.0を超える場合，1.0に正規化する． - - これにより，斜め移動時の意図しない加速を防止する． - - ■ 誤操作防止 (UX Protection) - ・スクリーンロック: - - ゲーム画面に対するスクロール，拡大縮小（ピンチ操作）を無効化する． - ・エッジデッドゾーン: - - 画面左右の端（10px〜）を入力無効領域とし，OSのジェスチャー機能暴発を防ぐ． - -2-2. 移動・演算ロジック - ■ キャラクター仕様 - ・サイズ: 0.8マス×0.8マス - ・移動速度: 秒速4〜5マス - - ■ 時間管理 (Time Management) - ・DeltaTime対応: - - 毎フレームの移動量計算に「前フレームからの経過時間 (DeltaTime)」を乗算する． - - 計算式: `Position += Velocity * Speed * DeltaTime` - - 目的: 端末のフレームレート（30fps/60fps/120fps）に依存せず，移動速度を一定に保つ． - - ■ 座標管理 - ・内部座標（計算・通信用）: - - Float（浮動小数点）で管理し，滑らかな移動を実現する． - ・グリッド座標（表示目安）: - - 内部座標の小数点以下を切り捨て（Floor）た値を現在のマスとする． - -2-3. カメラシステム (Camera System) - ■ カメラ追従 (Camera Follow) - ・挙動: - - 常に「自キャラクター」が画面の中央に配置されるよう，カメラ座標を毎フレーム更新する． - - マップ端に到達した場合のクランプ（固定）処理は，本プロトタイプでは実装不要とする（黒背景が見えても良い）． - - -3. 通信アーキテクチャ (Network Architecture) ------------------------------------------------------------------------- - -3-0. 目的 - 50人の座標をリアルタイムに同期するためのデータ構造と通信フローを定義する． - -3-1. 通信フローと役割分担 - | カテゴリ | クライアント (Client) | サーバー (Server) | - | :--- | :--- | :--- | - | **自キャラ** | **予測 (Prediction)**: 入力を即時反映し座標を更新・送信． | **中継 (Relay)**: 受信座標を正とし，他者へブロードキャスト． | - | **他キャラ** | **補間 (Interpolation)**: 受信した過去の座標間を滑らかに補間移動． | **間引き (AoI)**: 距離に応じ送信情報を圧縮・除外． | - -3-2. サーバー更新ループ (Server Loop) - ■ ティックレート (Tick Rate) - ・頻度: 20Hz（50ms間隔） - ・処理内容: - 1. 受信バッファ内の全クライアントからの入力を取り出す． - 2. AoI（関心領域）判定を行い，各クライアントに必要なデータをフィルタリングする． - 3. 全クライアントへ「スナップショット」を一斉送信する． - - ■ スナップショット送信 (Snapshot) - ・送信データ: - - 視界範囲内にいる全キャラクターの ID，座標，向き． - - サーバータイムスタンプ（補間計算用）． - -3-3. データ構造・最適化 - ■ パケット設計 - ・形式: バイナリパケット（ArrayBuffer等）を採用し，JSON等のテキスト形式は使用しない． - - ■ 座標の量子化 (Quantization) - ・目的: 通信帯域の削減． - ・手法: - - Float座標（0.0〜100.0）を，Unsigned Short（0〜65535）の整数値に変換して送信する． - - 受信側で再度Floatに戻して使用する． - - ■ 送信データ (Input Data) - クライアントからサーバーへ毎フレーム（または間引き）送信するデータ． - ・現在座標 (Position): 物理演算（DeltaTime適用）後の確定座標 (x, y)． - ・移動ベクトル (Velocity): 補間予測用の補助データ． - ・角度 (Rotation): キャラクターの向き． - - ■ エリア別同期 (AoI) - ・ロジック: - - 各プレイヤーを中心とした一定範囲（例: 画面サイズの1.5倍）外にいる他プレイヤーの座標データは送信しない． - - これにより，50人全員が動いていても，各端末が受け取るデータ量を視界内のみに限定する． \ No newline at end of file diff --git "a/docs/04_SPEC/SPEC_04_HUD_UI\344\273\225\346\247\230.txt" "b/docs/04_SPEC/SPEC_04_HUD_UI\344\273\225\346\247\230.txt" new file mode 100644 index 0000000..d29ccc6 --- /dev/null +++ "b/docs/04_SPEC/SPEC_04_HUD_UI\344\273\225\346\247\230.txt" @@ -0,0 +1,153 @@ +======================================================================== +HUD・UI仕様 (HUD & UI Specification) +======================================================================== + + +1. ゲーム画面レイアウト (Game Screen Layout) +------------------------------------------------------------------------ + +1-1. レイヤー構成 + ゲーム画面は以下の3レイヤーで構成される（下から順）． + + 1. PixiJS描画レイヤー: マップ・プレイヤー・ボム・ハリケーンの描画 + 2. HUDレイヤー: タイマー・HP・塗り率・ミニマップの表示 + 3. 入力レイヤー: ジョイスティック・ボムボタンのタッチ入力 + +1-2. 配置 + ・左上: タイマー + ・左側: HPゲージ + ・右上: ミニマップ + チーム塗り率パネル + ・左側（入力）: ジョイスティック + ・右側（入力）: ボムボタン + ・中央: カウントダウン・通知テキスト + + +2. タイマー (Timer) +------------------------------------------------------------------------ + +2-1. 表示仕様 + ・位置: 画面左上 + ・形式: MM:SS（分:秒） + ・通常時: 白色で表示する + +2-2. 残り時間による表示変化 + ・残り30秒以下: 文字色が濃い赤（#8B0000）に変わる + ・残り10秒以下: 1秒間隔で点滅する（opacity 1 ↔ 0.35） + + +3. HPゲージ (HP Gauge) +------------------------------------------------------------------------ + +3-1. 表示仕様 + ・位置: 画面左側 + ・形式: 「HP: 」に続いてハートアイコンで被弾状況を表示する + ・ハート表示: リスポーンまでの残り被弾可能回数をハートで示す + - 被弾していないハート: 塗りつぶしハート + - 被弾済みハート: 空ハート + ・最大表示数: 5個（PLAYER_RESPAWN_HIT_COUNT に対応） + + +4. チーム塗り率パネル (Team Paint Rate Panel) +------------------------------------------------------------------------ + +4-1. 表示仕様 + ・位置: 画面右上（ミニマップの右隣） + ・表示内容: 4チーム分の塗り面積率（%）をチームカラーの四角アイコン付きで表示する + ・形式: 「■ XX%」（■はチームカラー，XXは小数点以下切り捨ての整数） + +4-2. 残り時間による表示変化 + ・残り30秒以下: 全チームの塗り率が「???%」に置き換わり，非表示になる + + +5. ミニマップ (Mini Map) +------------------------------------------------------------------------ + +5-1. 表示仕様 + ・位置: 画面右上 + ・表示方式: Canvas要素によるリアルタイム描画 + ・表示内容: + - フィールド全体の塗り状況（チームカラーで色分け） + - 自プレイヤーの現在位置（マーカー表示） + ・トグル: タップで開閉を切り替えられる + + +6. ジョイスティック (Joystick) +------------------------------------------------------------------------ + +6-1. 表示仕様 + ・位置: 画面左側の入力領域 + ・表示: タッチ開始時にジョイスティックのベースとノブが表示される + ・ベース: 半透明の円形背景 + ・ノブ: 指の位置に追従する小さな円 + +6-2. 操作仕様 + ・タッチ開始: 指を置いた位置にジョイスティックが出現する + ・ドラッグ: 指の移動方向と距離に応じて移動入力ベクトルが決定される + ・ベクトル正規化: 入力ベクトルの長さが1.0を超える場合は1.0に正規化する + ・タッチ終了: ジョイスティックが非表示になり，移動入力がゼロになる + + +7. ボムボタン (Bomb Button) +------------------------------------------------------------------------ + +7-1. 表示仕様 + ・位置: 画面右側の入力領域 + ・表示: ボムアイコン付きの円形ボタン + ・クールダウンリング: ボタン外周にクールダウンの残り時間をリング状に表示する + - クールダウン中: リングが徐々に減っていく + - クールダウン完了: リングが消え，ボタンが活性化する + +7-2. 操作仕様 + ・タップ: ボムを現在地に設置する + ・クールダウン中: ボタンは非活性状態でタップしても反応しない + ・クールダウン時間: + - 通常時: 4000ms + - フィーバータイム時: 2000ms + + +8. 開始カウントダウン (Start Countdown) +------------------------------------------------------------------------ + +8-1. 表示仕様 + ・位置: 画面中央 + ・表示: ゲーム開始前のカウントダウン数字（3，2，1）を大きく表示する + ・ゲーム開始後: 自動的に非表示になる + + +9. 通知テキスト (Notification Text) +------------------------------------------------------------------------ + +9-1. フィーバータイム通知 + ・表示条件: ゲーム残り時間がちょうど60秒の時点で表示する + ・表示内容: 「！Fever Tieme！」 + ・位置: 画面中央 + ・演出: パルスアニメーション（拡大縮小）で表示する + +9-2. ハリケーン警告 + ・表示条件: ハリケーン出現時（残り120秒の時点）に表示する + ・表示内容: 「WARNING：ハリケーン出現」 + ・位置: 画面中央 + ・演出: 点滅アニメーションで表示する + + +10. PixiJS描画要素 (PixiJS Rendered Elements) +------------------------------------------------------------------------ + +10-1. マップ + ・各セルをチームカラーで塗りつぶした矩形で描画する + ・未塗装セルは既定の背景色で表示する + ・ビューポートカリング: 画面外のセルは描画をスキップする + +10-2. プレイヤー + ・スプライト画像で描画する + ・名前テキストをスプライト上部に表示する + ・被弾時: 点滅エフェクトを表示する + ・リスポーン時: 爆発エフェクトを表示する + +10-3. ボム + ・スプライト画像で描画する + ・爆発時: 円形の爆発エフェクトをチームカラーで表示する + +10-4. ハリケーン + ・SVGベースのオーバーレイで描画する + ・回転アニメーション付きで表示する diff --git "a/docs/04_SPEC/SPEC_05_\343\203\252\343\202\266\343\203\253\343\203\210\344\273\225\346\247\230.txt" "b/docs/04_SPEC/SPEC_05_\343\203\252\343\202\266\343\203\253\343\203\210\344\273\225\346\247\230.txt" new file mode 100644 index 0000000..5ad247e --- /dev/null +++ "b/docs/04_SPEC/SPEC_05_\343\203\252\343\202\266\343\203\253\343\203\210\344\273\225\346\247\230.txt" @@ -0,0 +1,72 @@ +======================================================================== +リザルト仕様 (Result Screen Specification) +======================================================================== + + +1. 画面遷移 (Screen Flow) +------------------------------------------------------------------------ + +1-1. 遷移タイミング + ・ゲーム終了後，サーバーからゲーム結果データを受信した時点で自動遷移する + ・結果データの受信前は「結果を読み込み中...」を表示する + +1-2. リザルト表示の段階 + 1. 初期状態: 背景演出 +「結果発表」タイトル +「Tap To Result」ガイドを表示する + 2. タップ後: タブバーと順位テーブルが表示される + + +2. 背景演出 (Background Effect) +------------------------------------------------------------------------ + +2-1. マップ表示 + ・ゲーム最終盤面のグリッドをセルごとにチームカラーで描画する + ・未塗装セルは既定の背景色で表示する + ・1位チームのカラーがタイトルテキストの装飾色に使用される + +2-2. オーバーレイ + ・背景の上に暗色の半透明オーバーレイを重ね，テキストの視認性を確保する + + +3. タブ構成 (Tab Structure) +------------------------------------------------------------------------ + +3-1. タブ一覧 + リザルト画面は3つのタブで構成される． + + ■ チーム順位タブ + ・アイコン: トロフィー + ・表示内容: チーム別の順位と塗り面積率 + ・データ: 順位，チーム名，塗り面積率（小数点第1位まで表示） + ・既定で選択されるタブ + + ■ 塗り回数タブ + ・アイコン: パレット + ・表示内容: プレイヤー個人の塗りセル数ランキング + ・データ: プレイヤー名，チーム名，塗り回数 + ・塗り回数の降順でソートされる + + ■ ヒット数タブ + ・アイコン: ボム + ・表示内容: プレイヤー個人のボムヒット数ランキング + ・データ: プレイヤー名，チーム名，ヒット数 + ・ヒット数の降順でソートされる + + +4. アクションバー (Action Bar) +------------------------------------------------------------------------ + +4-1. 表示条件 + ・タブバーと同時に表示される（タップ後） + +4-2. ボタン + ・「タイトルへ戻る」ボタン: タイトル画面に遷移する + ・「マップを見る」ボタン: 背景のマップ表示を拡大プレビューする + + +5. 結果データ仕様 (Result Data) +------------------------------------------------------------------------ + +5-1. サーバーから受信するデータ + ・rankings: チーム別の順位データ（順位，チームID，塗り面積率） + ・playerStats: プレイヤー別の成績データ（プレイヤー名，チームID，塗り回数，ボムヒット数） + ・finalGridColors: ゲーム終了時点のグリッド全セルのチームID配列