タイムスリップレイド3D - 時代を超えた略奪者を撃退せよ

## 1. アプリの目的・ターゲットユーザー

「タイムスリップレイド3D」は、プレイヤーが「時空の守護者」として異なる時代（原始時代・中世・現代・未来）から押し寄せる無数の侵略者を3Dフィールドで撃退する、ハイパーカジュアル系3Dアリーナシューティングゲームです。360°全方位から敵が押し寄せ、爽快なコンボ連鎖と武器進化、フィーバーモードが「ついついやってしまう」中毒性を生み出します。スマホ・PC両対応で15〜40代のカジュアルゲーマーをターゲットとし、1プレイ2〜5分の気軽さで何度でも遊べます。

---

## 2. 主要機能

- **4エラー（時代）×3ステージ構成**: 原始時代（マンモス・石器族）、中世（騎士・ドラゴン）、現代（戦闘機・メカ兵）、未来（サイボーグ・宇宙人）の計12ステージ。ステージクリアごとに次の時代へ解放
- **360°ウェーブ制アリーナ戦闘**: Three.jsで描く円形アリーナ。ウェーブごとに敵が四方八方から湧き出し、プレイヤーはマウスドラッグ／スマホスワイプで射撃方向を変えながら連続撃破を目指す。敵を倒し続けるとコンボゲージが上昇し、MAXでFEVER MODEに突入（敵が全員スロー＋ダメージ2倍）
- **武器スロットと進化システム**: ゲーム内通貨（スコア連動）で武器を3段階まで進化。時代ごとに「原始→槍投げ、中世→魔法弓、現代→ガトリング、未来→レーザー砲」と武器テーマが変化。各武器に固有エフェクト（爆発・貫通・範囲攻撃）
- **プロシージャル生成BGMとSE**: Web Audio API + 音楽生成アルゴリズムで時代別BGMをリアルタイム合成。原始は太鼓連打、中世はオーケストラ風、現代はEDM、未来はシンセウェーブ。SE（爆発・コンボ音・FEVER発動音）も内製
- **リッチ3Dビジュアル（Three.js）**: 時代別にシェーダー・パーティクル・ライティングを切り替え。原始は焚き火パーティクル＋霧、中世は炎エフェクト＋雷、現代はネオン爆発、未来はプラズマグロー。敵キャラはボクセル風3Dモデル（Three.js BoxGeometry + MeshLambertMaterial で構成し画像生成相当のビジュアルをコード生成）
- **グローバルランキング（MySQL保存）**: ステージクリアスコア・総コンボ数・最長フィーバー時間をMySQLに記録し、リアルタイムランキング表示。ニックネーム入力のみで参加可能

---

## 3. 画面構成

### タイトル画面
- フルスクリーンThree.js背景（4時代が回転するポータルアニメーション）
- 「PLAY」「RANKING」「HOW TO PLAY」ボタン
- BGMが時代ごとに30秒でクロスフェード

### ステージ選択画面
- 4エラー×3ステージのグリッドマップ（未解放はロックアイコン＋モノクロ）
- 各ステージに最高スコア・クリア星数（3段階）を表示
- ステージホバーで背景が該当時代のパーティクルアニメーションにプレビュー変化

### ゲームプレイ画面（メイン）
- **中央**: Three.jsキャンバス（フルスクリーン）。円形アリーナ、プレイヤーキャラ（中央固定）、四方から迫る敵群、爆発・パーティクル
- **上部HUD**: ウェーブ数、残り時間、スコア、コンボカウンター（大きく表示）
- **左下**: HPゲージ（赤グラデーション）、シールドゲージ（青）
- **右下**: FEVER発動ボタン（コンボMAX時に点滅）、武器切り替えアイコン（最大3スロット）
- **コンボ演出**: 画面揺れ、フォントサイズが動的に拡大する「COMBO x15!!」テキストが画面中央にポップ
- **FEVER MODE突入演出**: 画面全体に時代テーマのカラーフラッシュ、SE「FEVER!!!」、スローモーション3秒→2倍速攻撃開始

### ボス戦画面
- 各時代の3ステージ目にボス登場。ボスはHPバー（上部フルワイド）付きで、フェーズ2移行時に形態変化エフェクト
- ボスは時代別デザイン：原始=巨大マンモス、中世=ドラゴン騎士、現代=メカジャイアント、未来=コアを露出したサイボーグ神

### リザルト画面
- スコア・コンボ・クリア時間を大きくカード表示（CSS アニメーションでカウントアップ）
- 獲得星数（3段階）とランキング順位
- 「次のステージへ」「再挑戦」「ランキングを見る」ボタン

### ランキング画面
- タブ切り替え（ステージ別 / 総合）
- 上位10名はアイコン付きゴールドカード表示
- 自分のスコアが自動ハイライト

---

## 4. データ構造（MySQLテーブル）

```sql
-- スコア記録
CREATE TABLE scores (
id INT AUTO_INCREMENT PRIMARY KEY,
nickname VARCHAR(20) NOT NULL,
stage_id TINYINT NOT NULL, -- 1〜12
era_id TINYINT NOT NULL, -- 1=原始 2=中世 3=現代 4=未来
score INT NOT NULL,
max_combo INT NOT NULL,
fever_count TINYINT NOT NULL,
clear_time_sec SMALLINT NOT NULL,
stars TINYINT NOT NULL, -- 1〜3
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
INDEX idx_stage_score (stage_id, score DESC),
INDEX idx_total_score (score DESC)
);

-- デイリー集計（ランキング高速化用）
CREATE TABLE daily_ranking (
id INT AUTO_INCREMENT PRIMARY KEY,
nickname VARCHAR(20) NOT NULL,
total_score BIGINT NOT NULL,
date DATE NOT NULL,
INDEX idx_date_score (date, total_score DESC)
);
```

---

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

- **コンセプト**: 「タイムポータルが崩壊する緊張感と、コンボ爆発の爽快感」
- **全体トーン**: 各時代で大きくビジュアルが変化するのがウリ。原始は暖色・霧、中世はダーク＋炎ゴールド、現代はグレー＋ネオン爆発、未来はブラック＋プラズマブルー
- **フォント**: タイトルロゴはGLSL風のグロー文字(Canvas描画)、HUDは等幅ビットマップ風フォント（Orbitron / Google Fonts）
- **パーティクル**: Three.jsのPoints + BufferGeometryで敵撃破時に色分け爆散（時代別カラー: 原始=橙、中世=金、現代=シアン、未来=紫）
- **BGM生成**: Web Audio API の OscillatorNode + GainNode を時代別パラメータで組み合わせ。原始=低周波太鼓ループ、中世=弦オシレーター和音、現代=ドラムシーケンサー風、未来=FM合成シンセウェーブ
- **モバイル対応**: タッチで射撃方向＋スワイプ移動、ジョイスティックUIは非表示でシンプルに。フルスクリーンAPIで没入感を最大化
- **実装技術**: Three.js (CDN) + 素のJS/CSS/HTML + PHP (スコア保存/取得REST API) + MySQL