水切り — 川辺の石切りゲーム
河原で石を選び、立ち位置・角度・力を決めて川に投げ、何回跳ねたかを競う 3D ゲームです。
- フロントエンド: Next.js 16 (App Router) / TypeScript / three.js
- アイコン: Lucide (
lucide-react)
- UI: Material Design 3 のトークン（色・形・タイポグラフィ・状態レイヤー）と HIG のマテリアル（すりガラス）を参考
- バックエンド: Supabase（ランキング保存。未設定時はブラウザの localStorage に保存）
起動
npm install
npm run dev
http://localhost:3000 を開きます。
Supabase の設定（任意）
- Supabase プロジェクトで
supabase/migrations/ の SQL を日付の古い順にすべて実行（SQL Editor または supabase db push）
.env.local.example を .env.local にコピーし、4 つの値を設定（Vercel では Project → Settings → Environment Variables）
NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY：ブラウザに渡る値SUPABASE_SERVICE_ROLE_KEY / SCORE_SIGNING_SECRET：サーバー専用。NEXT_PUBLIC_ を付けない。秘密の文字列は node -e "console.log(require('crypto').randomBytes(32).toString('hex'))" などで作る
- 開発サーバーを再起動（Vercel では再デプロイ）
設定しない場合、ランキングは「この端末」に保存されます（画面にも表示されます）。
ランキングの不正対策
- ブラウザからデータベースへ直接は書き込めない（
scores への insert ポリシーなし）
- ステージに入るとき、サーバー（
/api/session）が河原・天候の乱数の種を発行して署名する
- 投げた瞬間に「どの石を・どこから・どの角度と向き・どのゲージで投げたか」をサーバー（
/api/stone-luck）へ送る。サーバーはその投げ方を確定させ、同じ物理計算で跳ねた回数を求めて保存してから、投擲の乱数の種を返す
- 投擲の乱数（石の見えない当たり外れ・炎・投げのブレ・水面の乱れ）は秘密の鍵から決める。河原・天候の種からは計算できないので、どの石・どの投擲で何回跳ねるかを前もって計算することはできない
- 記録時（
/api/scores）は、投げた瞬間に保存した結果だけを使う。送られてきた回数や投げ方は使わないので、外れた投擲を取り消して投げ方を変えて引き直すことはできない
- 投擲番号は前にしか進まず、前の投擲が飛び終わる（飛行時間 + 2.5 秒）まで次の投擲を受け付けない。同じプレイで同じ石は 1 回しか投げられない
- 同じ接続元（IP アドレスの鍵付きハッシュ）からは、プレイの発行を 10 分に 30 回、投擲を 1 分に 20 回までしか受け付けない
- ランキングの名前は、同じプレイの中では最初に記録した名前から変えられない
- 入力値はゲーム内で可能な範囲か（追加した石の通し番号を含む）を検査し、同じ投擲の二重登録はデータベースの一意制約で防ぐ
- ブラウザ（anon キー）からは
scores の表示に使う列だけが読める
- 限界：ゲージの止め方などの操作が本当に人の手によるものかまでは確認できない。人と同じ速さで最適な投げ方を送り続けるプログラムは止められず、試した回数が多いほど上位の記録が出やすい
遊び方
- ステージ選択 — 山あいの清流 / 夕暮れの大河 / 霧の渓谷
- 石を選ぶ — 河原の石をクリック。薄さ・底面の平らさ・形（丸み）・重さが表示されます
- 石が減ったら「石を追加」でランダムな石を追加。追加すると上限を超える場合はボタンが無効になります
- 投げる場所 — 川岸に沿って移動（← →）、投げる向きを調整（A / D）。場所によって川の流れの速さが変わります
- 角度 — 地面との角度 0〜45°（↑ ↓）。点線で軌道の目安を表示
- 力のゲージ — 往復するゲージを 3 回止める（Space / ボタン）。1 回の最大 1000、合計最大 3000 が投げる力（数値は非表示）
- 飛行 — カメラが石を追いかけ、跳ねるたびに回数を表示。沈んだ時点で記録
物理モデルの概要（src/game/physics.ts）
- 初速 = ゲージ合計（0〜3000）と石の重さで決定（重い石は初速が落ちる）
- 飛行中は重力と空気抵抗。空気抵抗は「石の速度 − 風」に対してかかるため、追い風・向かい風・横風が効きます（軽い石ほど影響大）
- 着水ごとに「水に対する相対速度」と入水角を判定
- 入水角が臨界角を超えると沈む（臨界角は石の質が良いほど大きい。重すぎる石は小さい）
- 速度が下限を下回ると沈む
- 跳ねるたびに速度が減衰（石の質・入水角・流速・波立ちで変化）
- 波や流れの乱れは実質的な入水角を深くし、いびつな石ほど進路がぶれる
- 石の質 = 薄さ 28% + 底面の平らさ 25% + 丸み 25% + 重さの適正（約 110g 付近が最適）22%
- 雨の日は風速 1.4〜2.8 倍・流速 1.5〜2.3 倍になりやすく、水面も荒れます
ディレクトリ構成
app/ Next.js のページとグローバル CSS（MD3 トークン）
src/game/ ゲームロジック（ステージ・石の生成・天候・物理・地形の高さ）
src/three/ three.js の描画（地形・水面・空・植生・水しぶき・雨・カメラ）
src/components/ UI（ステージ選択・石選び・移動・角度・ゲージ・結果）
src/lib/ Supabase クライアントとスコア保存
supabase/migrations/ スコアテーブルと RLS
