「フィジカル投扇興」を作りました！

※この記事は制作時の会話を元にClaudeが書きました。

更新履歴（版はタイトル画面の右下に小さく出ています）

v1.6（2026-11-15）— 夢浮橋は、正しい形（扇が床に触れず枕と蝶に架かる）が約0.5秒保たれたら、その瞬間に止めて確定するようにしました。これまでは止まった瞬間の一度きりで判定していたため、扇がほぼ床に着いていても夢浮橋になることがあり、逆に一度できた本物の橋が止まる前に崩れると見逃していました。本物の橋を拾うようになったので、夢浮橋は少し出やすくなります（ばらばらに投げて0.04%→0.2%、コツ通りに投げると約3倍）。点はこれまでどおりです。番付は1人につき最高の1件を並べ、その人の他の記録は「他の記録」から開けるようにしました。v1.5で調べた結果、iPhone と Android・PC では計算の細かい桁が違いましたが、iPhone で他の端末の記録を照合した60件はすべて同じ銘になりました。v1.5までの記録は「旧版の記録」と表示されることがあります（今の物理で同じ銘になれば「✓」）。

v1.5（2026-11-15）— 番付の記録に端末の大まかな種類と「計算の指紋」を残し、番付を開いた人の照合結果も記録するようにしました（iPhoneとChromeで計算が一致するかを確かめるため）。あわせて、コードの点検で見つかった不具合を直しました（番付を見た後にゲームの進みが遅くなる、中断した一投が表座敷の上で再開する、など）。

v1.4（2026-11-15）— 夢浮橋を「蝶が一瞬でも立っていれば良い」に緩めました（v1.3は厳しすぎました）。円を描く払いを強めにすると出やすくなります。あわせて、前の一投の名残で結果がわずかに変わることがあったのを直し、同じ入力なら必ず同じ結果になるようにしました。月間番付の受け付けを始めました（v1.3までの記録は「旧版の記録」と表示されます）。

v1.3（2026-11-14）— 夢浮橋の判定に「蝶が立っている」ことを戻しました。v1.1以降の夢浮橋は、ほとんどが蝶の倒れた形でした（58件中57件）。蝶が倒れた橋は須磨になります。夢浮橋はかなり出にくくなります（下の表を更新）。

v1.2（2026-11-14）— スワイプの強さの効き方を真ん中寄りに少し縮め、上位の銘を出やすくしました（失敗が62%→54%、澪標・紅梅・桐壺・明石が2〜4割増）。月間番付を追加。各投げの入力も記録し、番付を開くとその五投を手元で計算し直して確かめ、「再生」で見られます。

v1.1（2026-11-14）— 判定を「止まった時点で実際に触れ合っているか」に作り直し（夢浮橋は本物の橋だけに）、紅梅を出る形に変更、端末の描画速度で結果が変わる不具合を修正。銘定表にコツと出現率を追加。詳しくは下の追記へ。

v1.0（2026-11-13）— 公開。

江戸時代の座敷遊び「投扇興（とうせんきょう）」を、物理演算で遊べるスマホ向け3Dゲーム「フィジカル投扇興」を作りました！ブラウザで開くだけで遊べて、インストールや登録はいりません。

フィジカル投扇興のタイトル画面・狙いの画面・伝える画面

きっかけ

投扇興を知ったのは、“お父さんが頑張る”某テレビ番組でした。扇をふわっと投げて、台の上の的を落とす。落ちた形で点が決まる。見ていて「これは面白そう」と思ったのですが、道具を持っている人や場所も周りになく、遊ぶ機会がないまま２０年以上が過ぎました。。

AIと物理演算でいろいろ遊ぶうちに思い出し、せっかくだからスマホで遊べるようにしよう、というのが出発点です。

投扇興とは

枕（まくら）と呼ばれる台の上に、蝶（ちょう）という的を立てて、1mほど離れた所から開いた扇を投げます。扇・蝶・枕が最後にどんな形になったかで「銘（めい）」と点が決まり、銘には源氏物語五十四帖の名前が使われます。扇が蝶と枕の橋になれば「夢浮橋（ゆめのうきはし）」、枕を倒すと「野分（のわき）」で減点、といった具合です。

銘と点は流派ごとに違うので、本作では都御流の源氏物語形式を基に、他の流派の定めも参考にした独自の15種にしています。

遊び方

狙う — 蝶に寄った視点。狙いたい所に触れると照準が移り、指を引いて微調整。照準は呼吸でわずかに揺れる
投じる — 下から上へスワイプ。速さと長さが強さ、左右のずれが方向になる。スワイプの形で飛び方も変わる（直線＝回転せず水平を保つ／弧＝ヨー／円＝ロール／ジグザグ＝ピッチ）
銘定 — 扇・蝶・枕が落ち着いた形を判定して、銘と点が出る
五投の合計で番付が決まる（手習の身〜扇聖）

コツは「力まず、ふわりと」です。強く投げると扇が枕を直撃して「コツリ」、もっと強いと枕ごと倒して「野分」になります。

銘定表で形を見る

銘は文字だけだとどんな形か分かりにくいので、銘定表に絵を付けました。行をタップすると、実際の座敷でその形を3Dで見られます。

銘定表（左）と、夢浮橋をタップしたところ（右）

ここの配置は手で置いた「見本」です。最初は蝶が宙に浮いていたり、横向きに突き出していたりと不自然なものもあり、扇の幅で枕から蝶へ斜めに架けたり、台座を枕に残して頭だけ垂らしたりと、何度か直しました。

決まった形を伝える

珍しい銘が出ると、きっと形ごと誰かに見せたくなります。そこで、判定した瞬間の扇・蝶・枕の位置を保存しておき、結果画面の「結果を伝える」から、その形を銘・点と一緒に大きく表示するようにしました。30点以上の銘は金の縁取りになり、投げた直後の札からも開けます。

「画像付きで共有」を押すと、この画面をそのまま1枚の画像にして、スマホの共有メニューに渡します。3Dの描画は描いた直後にキャンバスから読み取り、文字とロゴは画面上と同じ位置に描き重ねています。人ごとにOGP画像（リンクを貼った時に出るサムネイル）を作る仕組みは大掛かりになるので、画像を添えて投稿してもらう形にしました。

構成

Three.js（ブラウザで3Dを描くライブラリ）＋cannon-es（物理演算ライブラリ）。ビルド不要の静的サイトで、index.html / style.css / main.js が中心
扇には抗力・揚力・姿勢を戻す力などを自前で足して、ふわっと飛ぶようにしている
効果音はWeb Audio APIでその場で合成（音声ファイルなし）
公開はGitHub Pages（sin1n24/tosenkyo）

物理で一番苦労したのは、軽くて薄い板（扇や蝶）同士がぶつかった時に、接触が発散して吹き飛んでしまう問題です。接触の硬さを上げ、質量を少し増やし、速度に上限を付けることで落ち着きました。蝶の重心を底に置いたら起き上がり小法師のように戻ってしまったので、重心は板の中央やや下にしています。

追記：上位の銘は本当に出るのか（2026-11-14）

公開後に「上位の銘って本当に出るの？」という声をいただいたので、大量に投げて確かめました。

ゲームと同じ物理と判定のまま、画面に描かずに一投を最後まで計算する検証用の関数を作り、狙い・強さ・払い方をばらばらにして10万投、さらに強さと狙いの組み合わせを細かく変えて約2万投を試しています。

確かめる途中で、直すべき点が3つ見つかりました。

夢浮橋の判定が甘かった。 旧判定でも夢浮橋は出ていました（ばらばらに投げて0.04%）。ただ、出た形を横から見ると、多くは扇が枕にもたれ、蝶がそばに立っているだけでした。判定が「扇と蝶の距離」しか見ていなかったためで、本当に橋になっていたのは43件中3件（約7%）でした。そこで判定を、止まった時点で実際に触れ合っているかで決めるように作り直しました。夢浮橋は「扇が床に触れず、枕と蝶だけに支えられて止まり、蝶が途中で一瞬でも立っていた」形です（v1.3で蝶の起立を条件に戻し、v1.4で「一瞬でも」に緩めました）。他の銘も同じ考え方に揃えています。
紅梅が一度も出なかった。 約12万投で0回でした。扇がほぼ水平のまま、狭い枕の上に蝶と並んで乗る条件だったため、物理的にほぼ成り立ちません。実際の投げで起きていた「扇が枕の上に立ち、立ったままの蝶にもたれる」形を紅梅にしました（蝶は動ぜず、扇は枕に上がる）。
端末の速さで結果が変わっていた。 同じ投げでも、描画が60コマ/秒の端末と30コマ/秒の端末で結果が違いました（例：コツリが2.5%と10%）。コマごとの半端な時間で物理を進めていたのが原因です。物理は常に同じ刻みで進め、余った時間は次のコマへ持ち越し、描画は直前の2つの状態の間をなめらかにつなぐ形に変えました。20〜144コマ/秒のどれでも同じ結果になることを確かめています。

あわせて、扇が当たった後に勢いが尽きるのを早め、枕の近くに留まりやすくしました。上位の銘を出しやすくするためです。

さらに、スワイプの強さの効き方を真ん中寄りに少し縮めました（ちょうど良い強さを出しやすくする調整）。物理や判定をいじっても上位の銘はほとんど増えなかった一方で、「弱すぎてコツリ」「強すぎて手習」の失敗が全体の6割を占めていたためです。これで失敗が62%から54%に減り、澪標・紅梅・桐壺・明石は2〜4割ほど出やすくなりました（夢浮橋はほぼ同じ）。

旧判定の夢浮橋（左：扇は枕にもたれているだけ）と、今の夢浮橋の一例（右：立った蝶の頭と枕に扇が架かり、床から浮いている）

改訂後の出現率です。「ばらばら」は狙い・強さ・払い方をでたらめにした10万投での割合、「コツ通り」はその銘のコツの範囲で投げた場合の割合です。

銘	点	ばらばら	コツ通り	コツ
夢浮橋	100	0.2%	3%	円を描く払いで強めに（v1.6で測り直し）
桐壺	75	0.06%	1.3%	まっすぐ、半分ほどの力で蝶の上の方を
澪標	40	0.4%	6%	桐壺と同じ投げ方で、蝶が倒れれば澪標
浮舟	30	0.02%	0.3%	弧を描く払いで、半分ほどの力
明石	20	3.4%	9%	まっすぐ、やや強めで蝶の下半分を
紅梅	20	0.34%	5%	まっすぐ、半分弱の力で
花宴	12	0.07%	0.5%	弧を描く払いで、やや強めに

強さの目安は、半分弱＝画面の高さの1/4を約0.5秒、半分ほど＝1/4を約0.4秒、やや強め＝1/3を約0.3秒で払う程度です。夢浮橋は、まっすぐ投げるより「円を描く払い」を強めにした方が出やすく（強さ0.70〜0.78で約1%。まっすぐはほとんど出ません）、輪を描きながら画面の半分ほどを約0.5秒で払うのが目安です。それでも100投に1回ほどなので、狙って出すのは難しいと思います。

同じ表は、ゲーム内の銘定表にも「コツ」と「出現率」として載せました。数字は物理計算での参考値で、実際の指の動きにはぶれがあるので、もう少し出にくく感じると思います。

追記：月間番付（2026-11-15）

五投の合計点を競う「月間番付」を付けました。結果画面で名前を入れて「番付に載せる」を押すと、その月の番付に載ります（毎月リセット）。表座敷の「番付」から見られます。

月間番付の画面（名前は見本）

置き場

ゲーム本体はGitHub Pages（保存のできない静的なサイト）なので、記録の受け皿は別に用意しました。Google Apps Script（GAS：Googleのサーバーで動くスクリプト）のWebアプリとスプレッドシートで、私の別のゲームの月別ランキングと同じ構成です。合計点は、送られてきた銘からサーバー側で計算し直しています。

点数が本物か確かめる

スコアをそのまま送る形だと、書き換えた点数を送られても見分けがつきません。そこで、各投げの入力（強さ・狙いの位置・左右・払い方の形）も一緒に保存しています。

同じ入力なら必ず同じ結果になるので、番付を開くと、見ている人のブラウザが上位の五投を物理計算でやり直します。記録と同じ銘になれば「✓ 再生で確認」、違えば「⚠ 再生と不一致」と出ます。銘だけを夢浮橋に書き換えた偽の記録を送ってみると、ちゃんと「⚠」が付きました。「再生」を押すと、その五投を実際の座敷で見られます。

同じ入力なのに、結果が違った

これで行けると思ったら、最初は照合がほとんど合いませんでした。調べると、同じ入力を2回続けて計算しても、銘が変わることがありました。

原因は、物理エンジン（cannon-es）に前の一投の名残が残っていたことです。

前の一投で触れ合っていた組の記録が残っていて、次の一投の最初の当たりが「新しい接触」として扱われないことがあった
枕や蝶の向きを元に戻しても、1歩目だけは前の一投の向きで計算した慣性の値が使われていた
物理の経過時間が積み上がり、止まったかどうかの判定で丸め方が変わっていた

一投ごとにこれらを消すようにして、200通りの入力で順番を入れ替えても、間に別の投げを挟んでも、すべて同じ結果になることを確かめました。決定的なつもりで10万投の検証をしていたので、少しひやっとしました。

なお、iPhone（Safari）とAndroid・PC（Chrome）の間で計算が完全に一致するかは、まだ確かめられていません。sinやcosのような計算は、ブラウザによって最後の1桁が違ってもよいことになっているためです。そこでv1.5から、記録に端末の大まかな種類（「iOS/webkit」など）と「計算の指紋」を残すようにしました。指紋は、決まった3投を計算して止まった位置を全桁で要約した短い文字列で、端末の計算に差があればここに出ます。番付を開いた人の端末で照合した結果も受け皿に残るので、友人がiPhoneで番付を見るだけで比較のデータが溜まっていきます。照合が合わず、指紋も違う記録は、改ざんではなく「端末の計算差」と表示します。