グラビティフリップ - 重力を操る落下ルートパズル

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

重力の向き（上下左右）をスイッチで切り替えながら、ボールを出発点からゴールまで導くブラウザ完結型の物理パズルゲーム。「重力方向を変える」というシンプルなルールで直感的に遊べるため、10代〜40代のカジュアルゲーマーを主なターゲットとする。スマートフォンのタップ操作とPCのキーボード操作の両方に対応。

---

## 2. 主要機能

- **重力切替メカニック**: 画面端の矢印ボタン（上下左右）またはキーボード矢印キーで重力方向を変更。ボールはその方向へ落下し続ける。
- **ステージモード**: 50ステージ収録（チュートリアル5 + Easy15 + Normal15 + Hard15）。各ステージはJSオブジェクトで定義したグリッドデータを読み込む。
- **ギミックタイル**: 壁（通行不可）、反転床（踏むと重力逆転）、ワープゲート（ペア間を瞬間移動）、時限ブロック（一定時間後に消える）、スイッチ＋扉の5種類を収録。
- **スコア・星評価**: ステージクリアまでの「重力切替回数」と「クリア時間」から1〜3星を算出。ローカルストレージでベスト記録を保存し、クリア済みステージを視覚化。
- **デイリーチャレンジ**: 日付シードで毎日異なるランダムステージを生成。クリアスコアをPHP+MySQLで保存しデイリーランキングを表示。
- **ステージエディタ（おまけ）**: 20×14グリッドにタイルを配置してオリジナルステージを作成し、URLパラメータ（Base64エンコード）で共有できる。

---

## 3. 画面構成

### タイトル画面
- ゲームロゴ（重力が四方向に散らばるアニメーション）
- 「ステージモード」「デイリーチャレンジ」「ステージエディタ」「ランキング」の4ボタン

### ステージ選択画面
- Easy / Normal / Hard のタブ切替
- ステージカード一覧（サムネイル・最高星数・クリア済みバッジ）

### ゲームプレイ画面
- 中央：Canvasゲームエリア（20×14グリッド）
- 四辺：重力切替ボタン（←↑→↓）、スマホは大きめのアイコンボタン
- 上部HUD：切替回数カウンター、経過時間、星評価プレビュー
- 右上：リスタートボタン
- クリア時：モーダルで星アニメーション、切替回数・タイム・スコアを表示、「次のステージ」「ステージ選択へ」ボタン

### デイリーランキング画面
- 本日の日付シードステージのサムネイル
- ランキングテーブル（順位・ニックネーム・切替回数・タイム）
- ニックネーム入力欄とスコア送信ボタン

### ステージエディタ画面
- タイルパレット（床・壁・スタート・ゴール・ギミック5種）
- グリッドキャンバス（クリックで配置/消去）
- テスト再生ボタン、共有URLコピーボタン

---

## 4. データ構造

### MySQLテーブル（デイリーランキングのみDB使用）

```sql
CREATE TABLE daily_scores (
id INT AUTO_INCREMENT PRIMARY KEY,
play_date DATE NOT NULL, -- 日付シードの日付
nickname VARCHAR(20) NOT NULL,
flip_count SMALLINT NOT NULL, -- 重力切替回数（少ないほど良い）
clear_time FLOAT NOT NULL, -- クリア時間（秒）
score INT NOT NULL, -- 計算済みスコア
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);
CREATE INDEX idx_date_score ON daily_scores(play_date, score DESC);
```

### ステージデータ（JSオブジェクト / stages.js）
```js
{
id: 1,
name: "はじめの一歩",
difficulty: "easy",
grid: [ /* 20×14の2D配列。0=空,1=壁,2=スタート,3=ゴール,4=反転床,5=ワープA,6=ワープB,7=時限ブロック,8=スイッチ,9=扉 */ ],
par_flips: 3, // 3星基準の切替回数
par_time: 15 // 3星基準のタイム（秒）
}
```

### ローカルストレージ
- `gf_stage_results` : `{ "1": { stars: 3, flips: 2, time: 12.4 }, ... }`

---

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

- **宇宙・無重力テイスト**: 深い紺色〜黒の背景に惑星・星のパーティクルをCanvas背景として描画。宇宙船内部の通路をイメージしたタイルデザイン。
- **ボール**: 光る小さな球体（CSS radial-gradient で表現）。重力方向が変わるときにアニメーションで傾く。
- **カラーパレット**: 背景 `#0a0e1a`、壁タイル `#2a3a5a`（金属的なグレーブルー）、床 `#1a2a4a`、ギミックタイルはオレンジ・シアン・マゼンタで種類ごとに色分け。
- **フォント**: 英数字は `Orbitron`（Google Fonts）、日本語は `Noto Sans JP`。
- **SE・演出**: Web Audio API で重力切替時にシュッという効果音、クリア時に上昇音を生成（外部ファイル不要）。重力変更時にボードが軽く傾くCSS transformアニメーション。
- **レスポンシブ**: 320px〜1280pxに対応。スマホ縦持ちではゲームエリアを画面幅に合わせてスケール（CSS transform: scale）。