ボルケーノランページ3D - 溶岩島サバイバルバトルロイヤル

## 1. アプリの目的・ターゲットユーザー
溶岩が迫り来る崩壊する火山島を舞台に、限られた足場の上でCPU敵や障害物をなぎ倒しながらサバイバルする、Three.jsフルブラウザ3Dアクションゲーム。「ついついやりすぎてしまう」爽快な操作感と、プレイするたびに地形が変わるプロシージャル生成で飽きない中毒性を実現する。ターゲットは10〜40代のカジュアルゲーマー全般。スマホ・PC両対応。

---

## 2. 主要機能

- **溶岩上昇メカニズム**: 時間経過で下から溶岩が上昇し、高台の足場が次々に水没。プレイヤーは常に高い場所を目指し移動し続けなければならない緊張感
- **爽快な吹き飛ばしバトル**: プレイヤーキャラが「パンチ」「スタンプ」「スピンアタック」の3アクションでCPU敵と岩ブロックを豪快に吹き飛ばす。吹き飛んだ敵が溶岩に落ちるエフェクトが超爽快
- **プロシージャル島生成**: 毎ゲーム異なる形状の火山島が生成される。六角形タイルの高低差ランダム配置。島のサイズは3段階（小・中・大）
- **コンボ&フィーバーシステム**: 連続で敵を溶岩へ落とすとコンボ倍率上昇。10コンボでフィーバータイム発動→プレイヤーが炎オーラ纏い攻撃範囲2倍&溶岩ダメージ無効10秒
- **3Dビジュアル&生成サウンド**: Three.jsによるリアルタイム3D描画。溶岩はShaderで赤橙のアニメーション表現。BGMはWeb Audio APIによる手続き生成ドラムビート+メロディ。敵キャラは6種類のカラーバリエーションのスライム型3Dモデル（BoxGeometry組み合わせ）
- **グローバルスコアランキング**: PHP+MySQLによるサーバーサイド保存のスコアランキング。TOP20表示、自分のスコア登録（ニックネーム入力）

---

## 3. 画面構成

### タイトル画面
- フルスクリーン3Dアニメーション背景（溶岩が流れる火山島のデモシーン、Three.jsで自動再生）
- アプリ名ロゴ（燃えるような橙×黒のグラデーションフォント）
- ボタン: 「PLAY」「島サイズ選択」「ランキング」「操作説明」
- BGMトグルボタン

### ゲーム画面
- **メイン3Dキャンバス（全画面）**: Three.jsレンダリング。カメラはプレイヤー追従の斜め俯瞰視点（TPSライク）
- **HUD（半透明オーバーレイ）**:
- 左上: スコア / コンボ数
- 右上: 残り敵数
- 下中央: 溶岩上昇ゲージ（残り安全時間の目安）
- フィーバーゲージバー
- **操作UI（スマホ時）**: 画面左半分のバーチャルジョイスティック、右側に攻撃ボタン3つ（パンチ/スタンプ/スピン）
- **PC操作**: WASD移動 + マウス視点 + Zキー/Xキー/Cキーでアクション

### 結果画面
- スコア・コンボ最大値・吹き飛ばし敵数・生存時間を表示
- 「ランキングに登録」ボタン → ニックネーム入力フォーム表示
- 「もう一度」「タイトルへ」ボタン
- 短い3Dリプレイカット（最後の10秒をThree.js再生）

### ランキング画面
- TOP20のニックネーム・スコア・日時をカード形式で表示
- 溶岩演出の背景アニメーション継続

---

## 4. データ構造（DBテーブル概要）

```sql
CREATE TABLE scores (
id INT AUTO_INCREMENT PRIMARY KEY,
nickname VARCHAR(20) NOT NULL,
score INT NOT NULL,
combo_max INT NOT NULL DEFAULT 0,
kills INT NOT NULL DEFAULT 0,
survive_sec INT NOT NULL DEFAULT 0,
island_size ENUM('small','medium','large') NOT NULL DEFAULT 'medium',
created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
);
```

- スコア登録はPHPのAPIエンドポイント（`api/score.php`）にPOSTで送信
- 取得はGETリクエストでJSON返却（TOP20）
- 不正投稿対策: スコア上限チェック（99999999点以上は弾く）、ニックネーム長チェック（1〜20文字）

---

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

### ビジュアルテーマ: 「ネオン×火山」
- **背景**: 暗めの夜空にうっすら星とオーロラのパーティクル（Three.jsPoints）
- **島タイル**: 石畳風テクスチャ（Canvas APIで手続き生成）、端が崩れるとパーティクルが飛び散る
- **溶岩**: 赤橙→黄色の波打つShaderMaterial。表面にバブルエフェクト（球パーティクル）
- **プレイヤー**: 鎧を着た小さなキャラクター。BoxGeometryの組み合わせで作ったロボット風シルエット。攻撃時に炎エフェクト付与
- **敵**: スライム型の丸いBoxGeometry。カラーは赤・青・緑・紫・黄・白の6種。大きいほど硬い
- **フォント**: 太めのサンセリフ体、オレンジ〜黄のグラデーション文字にシャドウ
- **SE**: Web Audio APIで生成。打撃音（バシッ）、落下音（ドボン）、フィーバー音（ファンファーレ風）
- **BGM**: Web Audio API手続き生成。テンポ140BPMのアドレナリン系エレクトロビート

### 実装技術スタック
- **フロントエンド**: HTML5 / CSS3 / 素のJavaScript + Three.js (CDN)
- **バックエンド**: PHP 8.x（スコア登録・取得APIのみ）
- **DB**: MySQL（scoresテーブル1枚のみ）
- **物理演算**: Three.js + 自前の簡易AABB衝突判定（重い物理エンジン不使用で軽量化）

### 難易度バランス
- 開始30秒: 溶岩ゆっくり・敵5体
- 30秒〜90秒: 溶岩加速・敵10体
- 90秒〜: 溶岩高速・敵15体+ボス敵1体（HPバー付き巨大スライム）