ドラゴンスカイ・ブレイカー - 3D空中騎士団バトルアクション

## 1. アプリの目的・ターゲットユーザー
Three.jsで実装するフルブラウザ3Dゲーム。ドラゴンに乗った騎士を操作し、押し寄せる敵軍を爆炎ブレスとスピンアタックで薙ぎ払う、爽快感全振りの空中バトルアクション。ゲームアプリストア級のリッチビジュアルとBGMを追求し、「ついついやってしまう」中毒性を目標にする。ターゲットは10代〜30代のカジュアルゲーマー（男女問わず）。スマホ・PC両対応。

---

## 2. 主要機能

### ゲームコア
- **3Dフライトアクション**: Three.jsで空中フィールドを自由飛行。W/A/S/D＋マウス（PC）、ジョイスティック＋タップ（スマホ）で直感操作
- **ブレス攻撃**: 左クリック/タップでドラゴンが前方扇状に炎ブレス発射。ヒットエフェクトは大粒のパーティクルと光爆発でド派手演出
- **スピンアタック（必殺）**: 右クリック/2本指タップでドラゴンが高速回転しながら突撃、周囲の敵を全薙ぎ払い。ゲージ制でクールダウン管理
- **コンボ・フィーバーシステム**: 連続撃破でコンボカウンターが上昇。10コンボごとにフィーバーモード突入（攻撃力2倍・ブレス連射・BGMアップテンポ）
- **ウェーブ制ボス戦**: 5ウェーブごとに巨大ボスが出現（飛竜騎士団長、嵐の魔王、天空要塞など）。ボスはHPゲージ付き多段階攻撃パターン
- **MySQLランキング**: スコアと到達ウェーブをサーバー保存し、全国リアルタイムランキング表示

### ビジュアル・音響（リッチ演出）
- **3Dモデル**: Three.js の BufferGeometry で構築したドラゴン（翼ばたきアニメーション付き）、騎士、敵モブ、ボスをプロシージャル生成。カラースキームはエメラルドドラゴン、フレイムドラゴン、シャドウドラゴンの3種から選択可能
- **空のシーン**: 動く雲（シェーダー）、差し込む太陽光（PointLight）、遠景の山脈シルエット、夕焼け→夜への時間変化でステージごとに雰囲気が変わる
- **パーティクルエフェクト**: 炎ブレスは1000個以上のパーティクル、敵撃破時に金貨と破片が飛散、コンボ時は画面端にエフェクトバースト
- **BGM・SE**: Web Audio API でリアルタイム生成する壮大なオーケストラ風BGM（打楽器+弦楽器+金管をオシレーターで合成）。フィーバー時はテンポと音程が自動変化。SE（炎音・爆発・ドラゴンの咆哮）もWeb Audio合成で外部ファイル不要
- **画面演出**: ボス登場時はカメラシェイク＋スローモーション演出、コンボ数はUX重視のビッグフォント3D浮き文字で表示

---

## 3. 画面構成

### タイトル画面
- フルスクリーン3Dシーン（ドラゴンが雲の中を旋回するデモ飛行）
- ゲームロゴ（グローエフェクト付き大文字）
- 「PLAY」「ドラゴン選択」「ランキング」「操作説明」ボタン
- BGMが自動スタート（ミュートボタン常設）

### ドラゴン選択画面
- 3体のドラゴンを3Dプレビューで回転表示
- **エメラルド（バランス型）**: HP:100, ブレス射程:長, スピン威力:中
- **フレイム（攻撃特化）**: HP:80, ブレス範囲:広, スピン威力:高
- **シャドウ（速度特化）**: HP:70, 移動速度:最速, コンボゲージ回収+30%
- ステータスバー表示、選択確定でゲームへ

### ゲーム画面（メイン）
- フルスクリーン3Dフィールド（三人称視点、ドラゴンを背後から追いかけるカメラ）
- HUD（左上: HP・シールドゲージ、右上: スコア・コンボ数、下中央: スピンゲージ・フィーバーメーター）
- スマホ用バーチャルジョイスティック（左下）＋ブレスボタン（右下）＋スピンボタン（右下）
- コンボ数が画面中央に大きくポップアップ
- ウェーブ番号表示（「WAVE 3」などフェードイン）

### ボス戦画面
- 通常画面にボスHPバー（上部フルワイド）追加
- 登場演出: カメラズームイン＋SEでド派手に
- 撃破時はスローモーション＋爆発パーティクル嵐

### リザルト画面
- スコア・到達ウェーブ・コンボ最大数・撃破数アニメーション集計
- 名前入力欄（最大8文字）でランキング登録
- SNS共有ボタン（スコアカード画像生成）
- 「もう一度」「ランキングへ」ボタン

### ランキング画面
- 全国TOP50リアルタイム表示（Ajax + PHP + MySQL）
- 自分のスコアをハイライト

---

## 4. データ構造（DB）

### テーブル: `scores`
| カラム | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| player_name | VARCHAR(20) | プレイヤー名 |
| score | INT | 最終スコア |
| max_wave | INT | 到達最大ウェーブ |
| max_combo | INT | 最大コンボ数 |
| dragon_type | TINYINT | 選択ドラゴン(0-2) |
| created_at | DATETIME | 登録日時 |

### API（PHP）
- `POST /api/score.php` → スコア登録
- `GET /api/ranking.php?limit=50` → ランキング取得（JSON）

---

## 5. デザインの方向性

- **世界観**: ファンタジー×モダン。炎と雷と空の壮大さ。ダークすぎず、カラフルで爽快
- **色調**: 空のグラデーション（深いブルー〜オレンジ夕焼け）、ドラゴンの鮮やかな発光エフェクト（緑/赤/紫）、UIはゴールド縁取り+半透明黒背景
- **フォント**: 英字はゴシック系太字（Google Fonts「Cinzel」）、日本語は丸ゴシック
- **UIアニメーション**: ボタンホバー時のグロー、スコア加算時のカウントアップアニメーション、コンボ時の画面端フラッシュ
- **パフォーマンス**: Three.jsのレンダラーはWebGL2優先、モバイルはデバイスピクセル比0.75に抑えてFPS維持。敵オブジェクトはInstancedMeshで大量描画を最適化

---

## 6. 実装スタック
- フロント: Three.js (r165) + 素のHTML/CSS/JS（モジュールバンドル不要、CDN読み込み）
- バック: PHP 8.x + MySQL（スコア登録・ランキング取得のみ）
- 外部APIキー: 不要（BGM/SEはすべてWeb Audio API合成）
- レスポンシブ: CSS vw/vh + JS でcanvasサイズ動的調整、スマホは横画面推奨案内表示

## 7. ゲームバランス
- ウェーブ1〜3: ゆっくり飛ぶ敵騎士10〜20体（チュートリアル相当、誰でも爽快に撃破できる）
- ウェーブ4〜9: 高速機動敵＋盾持ち敵（2〜3発必要）
- ウェーブ5, 10, 15: ボス出現（HPゲージ付き、2フェーズ攻撃パターン）
- 無限ウェーブ制（理論上終わりなし）でスコア競争が続く設計