グラビティスマッシュアリーナ3D - 重力を操る爽快3Dピンボール格闘

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

ピンボールの爽快感 × 格闘ゲームのバトル感 × 3D物理演算を融合した、ブラウザで動く完全3Dアクションゲーム。
「ボールを相手コートに叩き込み、HPを削って勝つ」というシンプルなルールに、重力方向の切り替え・スピンアタック・スペシャル技を組み合わせ、ついつい連戦してしまう中毒性を実現する。
ターゲット：10代〜30代のカジュアルゲーマー、アーケードゲーム好き、スマホ・PC双方のユーザー。

---

## 2. 主要機能

- **3D物理ボールバトル**
Three.js + Cannon.js（CDN埋め込み）によるリアルタイム物理演算。アリーナ内を飛び交う光球を操作し、相手キャラのHPを削る。ボールは壁・床・天井をバウンドし、ラリーが続くほど加速。

- **重力フリップシステム**
専用ボタン or キーボードのGキーで重力方向を上下反転。壁走り・天井プレイへ切り替わり、攻撃角度が劇的に変化。CPU戦ではCPUも重力フリップを使用し、予測不能な動きを見せる。

- **スピンアタック＆スペシャルゲージ**
ラリー数・ダメージを与えるたびにフィーバーゲージが蓄積。フルになったら「グラビティスマッシュ」発動：ボールが巨大化し全方位バウンドで一気に大ダメージ。演出はパーティクルとブルーム光エフェクトで派手に表現。

- **6体のキャラクター選択**
それぞれ固有の「必殺スペシャル」「ボール色・エフェクト」「ステータス（スピード/パワー/コントロール）」を持つ。キャラ画像はCanvas+グラデーションで生成されたオリジナルデザイン（外部APIなし）。
例：炎の戦士（直線貫通弾）、氷の魔女（ホーミングボール）、サイバーニンジャ（分裂ショット）など。

- **ゲームモード3種**
1. **アーケードモード**：CPU5戦勝ち抜きで「チャンピオン」称号を獲得。難易度はEASY/NORMAL/HARD。
2. **エンドレスサバイバル**：HPを削られないよう連続で防ぎ続けるモード。スコアをMySQLランキングに登録。
3. **デイリーチャレンジ**：毎日固定シードのアリーナ・CPUで挑戦。世界ランキングを共有。

- **リッチなビジュアル＆BGM**
- Three.jsでアリーナ背景に星雲/ネオン都市/溶岩洞窟の3ステージを描画（シェーダー＋ポストプロセッシングなしでもブルームは疑似エフェクトで表現）
- BGMはWeb Audio APIでシンセ波形を組み合わせたリアルタイム生成（外部ファイル不要）。テンポは展開に応じて変化。
- ヒット音・スマッシュ音・フィーバー音はOscillatorNodeで生成。

---

## 3. 画面構成

### タイトル画面
- 3Dアリーナがリアルタイムでデモプレイするバックグラウンド演出
- 「アーケード」「エンドレス」「デイリー」「ランキング」の4ボタン
- キャラ選択スライダー（6体、ステータスグラフ付き）

### ゲーム画面（メイン）
- Three.jsフルスクリーンCanvas（左60%〜右60%で3Dアリーナを描画）
- 上部UI：自分HP・相手HP・ラリーカウンター・フィーバーゲージ
- 下部UI：「重力フリップ」ボタン・「スペシャル」ボタン・パドル操作
- **PC操作**：A/Dでパドル横移動、Gで重力フリップ、Spaceでスペシャル
- **スマホ操作**：左右スワイプ＋画面下のタップボタン（パドル・フリップ・スペシャル）

### リザルト画面
- 勝敗・ダメージ合計・最大ラリー数・スコアを表示
- ランキング登録（ニックネーム入力→MySQL保存）
- SNS共有テキスト生成（ゲーム結果を文字で共有）
- 「もう一度」「キャラ変更」「モード選択」ボタン

### ランキング画面
- エンドレス・デイリーのTOP20リスト
- 自分の順位ハイライト

---

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

### `scores` テーブル
| カラム名 | 型 | 説明 |
|---|---|---|
| id | INT AUTO_INCREMENT PK | |
| nickname | VARCHAR(20) | プレイヤー名 |
| mode | ENUM('endless','daily') | ゲームモード |
| score | INT | スコア |
| max_rally | INT | 最大ラリー数 |
| character_id | TINYINT | 使用キャラ(1〜6) |
| daily_seed | DATE | デイリーの日付 |
| created_at | DATETIME | 登録日時 |

### APIエンドポイント（PHP）
- `POST /api/score.php` → スコア登録
- `GET /api/score.php?mode=endless&limit=20` → ランキング取得
- `GET /api/score.php?mode=daily&seed=2025-07-01` → デイリーランキング

---

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

**コンセプト：「ネオン×宇宙×格闘技」**

- **配色**：深宇宙ブラック(#0a0a1a)を基調に、キャラごとのネオンカラー（シアン・マゼンタ・ゴールド・エメラルド・レッド・パープル）でボールとエフェクトを彩る。
- **フォント**：Orbitron（Googleフォント）でSF感を演出。スコアや数字は大きく白で表示。
- **アリーナデザイン**：3ステージそれぞれ異なるスカイボックス（星雲テクスチャ / ネオン格子 / 溶岩）。床はリフレクション風シェーダー（疑似）。
- **UIデザイン**：角丸ゼロのシャープな矩形ボタン、ネオンボーダー発光アニメーション（CSSアニメ）。HPバーはセグメント分割でアーケード感。
- **演出**：ヒット時にカメラシェイク（Canvasのviewport一時振動）＋パーティクル爆発（Three.js Points）。スペシャル発動時は一時スローモーション（physicsStep縮小）→ 爆発で爽快感を最大化。

---

## 実装メモ

- Three.js r160 CDN + Cannon-es CDN（ES Modules）
- WebGL非対応端末向けに2Dキャンバスフォールバック（簡易版）を用意
- `index.html` 単一ファイル構成 + `api/score.php` のみのシンプルな構造
- LocalStorageにも直近スコア5件を保存し、オフライン時でも記録確認可能
- BGM/SEは初回タップ後に AudioContext を起動（ブラウザ制限対策）