首都高グランプリ

首都高速をフォーミュラマシンで駆け抜ける、ブラウザで遊べる 3D レースゲームです（three.js）。 最初のコースは 高井戸IC → 4号新宿線 → 三宅坂JCT → C1都心環状線（内回り）霞が関 → 谷町JCT → 3号渋谷線 → 用賀（約26km）。 12台のマシンがドライバー目線で全開バトルします。

遊び方

操作	キーボード	スマホ
アクセル	↑ / W / Space / Z	ACCEL ボタン
ブレーキ	↓ / S / X	BRAKE ボタン
ハンドル	← → / A D	◀ ▶ ボタン
一時停止	P / Esc	❚❚ ボタン
ERS（末脚）	Shift / E / C	ERS ボタン
消音	M	🔊 ボタン

• タイトル画面でドライバー名を付けられる（順位表と結果に出る）。マシンの脚質・戦績・ベストタイムは名前ごとに保存され、別の名前にすると新しいマシンになる
• 最後尾（12番グリッド）からスタート。5つの赤いスタートシグナルが消えたらスタート
• ERS（末脚）: Shift / E（スマホは ERS ボタン）を押している間、最高速と加速が上がる。風よけ（スリップストリーム）とブレーキで溜まる
• 先頭の重圧: トップに立って2.5秒たつと、先頭は風よけがないので12秒間ペースダウンして後続に抜かれる（ゴール前500mからは起きない）。 自分がトップの間は後続も本気で追い上げてくる。2〜3番手で溜めて、ゴール間際で差すのが基本の作戦
• 追い上げブースト: 順位が下のときほど最高速と加速が少し上がる（最下位で +8%）
• スリップストリーム: 前の車の真後ろにつくと速度が伸び、ERS も溜まる
• 抜きつ抜かれつ: ライバルはカーブでも減速しない。自分より後ろの車は一律に最高速360km/h以上。さらに後ろ300m以内の車は自分の速度を目安に追いかけてくる（トップの時は自分より6%以上速く）
• 後続の奥の手（オーバーテイクモード）: トップに立つと、すぐ後ろの車が ERS を全開にして（テールが青く光る）7秒間ぐっと速くなり、狭い隙間にもねじ込んで抜きに来る。横から当たると自分のほうが押し出される。次の奥の手までは12秒あく
• 2車線の真ん中を走って道をふさいでも、ライバルは隙間に飛び込み、車体をこすって火花を散らしながら抜いていく（当たり判定の幅は1.6m）

脚質（ダービージョッキー方式）

ダービージョッキー の脚質の考え方をフォーミュラマシンのレースに置き換えています。 マシンの脚質は最初にランダムで決まり、隠れていて、走りながら見抜きます（テスト用に index.html?debug&style=sashi のように開くと脚質を指定できます）。 マシンには「走っていて心地よい順位」があり、そこで走ると ERS がよく溜まり、前に出すぎるとマシンが熱を持って回生できず ERS が減っていきます。

脚質	心地よい位置	特徴	先頭の重圧
逃げ	先頭	最高速・加速・コーナーが強い。ERS は短い	−5%
先行	2〜4番手	前の集団で風よけを使い、残り1kmで抜け出す	−10%
差し	5〜8番手	中団で ERS を溜めてゴール前で差す	−12%
追込	9〜12番手	最高速は控えめだが ERS が大容量。最後の直線でまくる	−14%

• 見抜く手がかりは、レース中のチーム無線（「前に出すぎだ! マシンが熱を持って…」など）と、レース後のチーフエンジニアのコメント。1位になると脚質が判明する（ドライバー名ごとにブラウザに保存）
• レース後のコメント例: 「ゴールしても ERS がたっぷり残っていた。仕掛けが遅かった」「ゴールまで2.3kmで ERS を使い切った。仕掛けが早すぎた」
• 三宅坂JCT・谷町JCT の急カーブは速すぎると外へ滑って壁に当たる。壁に当たると速度が15〜40%落ち、こすり続けると大きく減速するので、ブレーキで減速して曲がる
• 順位表と「後続」の秒差は、各車がコースの同じ地点を通った時刻の差（実際のレースと同じ測り方）
• ぶつかっても壊れない。火花・カーボンの破片・タイヤスモーク・画面の揺れとフラッシュ・衝撃音・スロー演出のあと、失速やスピンをしてそのまま走り続ける
• 時間帯は「昼」「夕暮れ」「夜」から選べる（夜は自車のヘッドライト、ライバル車のテールランプ、窓明かり・照明灯・航空障害灯）
• ベストタイムはブラウザに保存
• 結果画面の「シェアする」でスマホは端末の共有メニュー、パソコンは X の投稿画面を開く（「結果をコピー」で文章をコピー）。共有文には紹介記事の URL（https://techgym.jp/column/claude-code-game-shutoko/ 。js/main.js の SHARE_URL）が付く

加速感の作り方（酷道168 を参考）

• 加速は「速度が上がるほど弱くなる」カーブ（0→100km/h 約2.5秒、最高 340km/h）
• 速度が上がるほど視野角が広がり（ズームアウト）、画面の周りに集中線、細かい車体の振動
• 照明柱・橋脚・遮音壁の支柱・キロポストが一定間隔で流れ、速さが体で分かる
• エンジン音は回転数とギア（8速）で変化し、シフトアップの音、風切り音、近くのライバル車のエンジン音（左右の定位つき）

再現している景色

道路の線は OpenStreetMap の首都高（4号・C1・3号と三宅坂JCT・谷町JCT のランプ）を一方通行どおりにつないだ実際の経路で、橋・トンネルの区間と高さ（layer）から高架・地下の高さを決めています。 沿道のビルは 国土交通省 PLATEAU の3D都市モデル（東京都23区）の実際の輪郭と高さ（コース沿い約4.8万棟）で、道路にかかる建物だけ除いています。 道路は片側2車線（車線幅3.5m）、壁高欄・遮音壁・中央分離帯の照明柱・対向車線、首都高の緑の案内標識（出口・JCT の 1km / 500m 予告）を置いています。

区間	主な景色
高井戸〜永福	環八との交差、杉並清掃工場の煙突、甲州街道の上の高架と遮音壁
幡ヶ谷〜初台〜西新宿JCT	東京オペラシティ、新宿パークタワー、東京都庁、コクーンタワー
新宿〜代々木〜外苑	タカシマヤ タイムズスクエア、NTTドコモ代々木ビル、新宿御苑、東京体育館、国立競技場、明治神宮野球場、聖徳記念絵画館と銀杏並木、右手に明治記念館
信濃町〜三宅坂	迎賓館赤坂離宮、赤坂御用地の下のトンネル、弁慶濠、左手にホテルニューオータニと東京ガーデンテラス紀尾井町、プルデンシャルタワー、左手にテックジム東京本校（永田町4番出口。千代田区平河町2-7-2 VORT永田町 6F。屋上の鉄塔の上の看板、高さ約520m・直径約140mのアドバルーン（外苑あたりから見える）、首都高の左側の広告看板2枚）、最高裁判所、国立劇場、国会議事堂
C1 霞が関	三宅坂JCT から地下へ。霞が関の官庁街、霞が関ビル、虎ノ門ヒルズ
谷町JCT〜六本木〜渋谷	アークヒルズ、東京タワー、東京ミッドタウン、国立新美術館、テレビ朝日、六本木ヒルズ森タワー、青山霊園、渋谷スクランブルスクエア、ヒカリエ、SHIBUYA109、セルリアンタワー
池尻〜三軒茶屋〜用賀	キャロットタワー、駒沢オリンピック公園の記念塔、世田谷ビジネススクエア、晴れた日は正面に富士山

沿道の名所に近づくと、画面の上に「左手に 国立競技場」のように案内が出ます（第1コースは34か所、ほかのコースも5〜15か所。トンネルの中の名所は出入口で案内）。 遠くには東京スカイツリーと富士山も見えます。ビルにはタイル・ガラスの色と窓を付け、屋上には（架空の）広告看板や給水塔、公園の木には10月らしく銀杏の黄色と紅葉の赤を混ぜています。 PLATEAU では箱になってしまう特徴的な建物（迎賓館・明治記念館・絵画館・国会議事堂・国立競技場・神宮球場・東京タワー・SHIBUYA109・東京ビッグサイト・テックジム）は手作りのモデルに置き換え、ホテルニューオータニの青いラウンジやキャロットタワーの橙の屋上は、PLATEAU のビルの屋上に飾りを付けています。

レインボーブリッジ（3・4・16番のコース）は、白い2本の主塔の間を主ケーブルが放物線で垂れ下がり、ハンガーロープで路面を吊る吊り橋です。上の段が首都高、下の段が一般道とゆりかもめの2階建てで、両わきを白いトラスでつないでいます。 夜は主ケーブルが虹色に光り、塔の頂上に赤い航空障害灯が灯ります。ゆりかもめ（6両）は芝浦ふ頭から橋の下の段を通って、お台場海浜公園・台場の高架を行き来します。お台場にはフジテレビ本社ビル（球体展望室）と自由の女神像があります。

ルート（タイトル画面で選ぶ。準備中のものは「準備中」と表示）

1. 高井戸 → 霞が関 → 用賀（遊べる）… 4号新宿線・C1内回り・3号渋谷線
2. C1 都心環状線 一周（遊べる・内回り13.8km）… 芝公園スタート → 浜崎橋JCT → 汐留 → 銀座の掘割 → 宝町 → 江戸橋JCT → 神田橋 → 竹橋JCT → 北の丸・代官町（皇居のお濠沿い）→ 三宅坂JCT → 霞が関のトンネル → 谷町JCT → 一ノ橋JCT → 芝公園ゴール。急カーブとトンネルが続くテクニカルコース
3. レインボーブリッジ ＆ 湾岸線（遊べる・9.6km）… 芝浦JCT → 海の上の高さ約50mのレインボーブリッジ（白い主塔の間を抜ける）→ 台場 → 有明JCT → 湾岸線 西行き → 海の下の東京港トンネル → 大井JCT → 東海JCT。夜景がおすすめ
4. レインボーブリッジ 都心行き（遊べる・10.2km）… 辰巳 → 有明JCT → 台場 → レインボーブリッジ（壁が低く海と街が見える）→ 芝浦 → 浜崎橋JCT → C1 外回り（東京タワーの横）→ 一ノ橋JCT → 飯倉。夕暮れは正面に夕日と富士山
5. 山手トンネル 地下バトル（遊べる・20.7km）… C2 中央環状線 大井JCT → 大橋JCT → 西新宿JCT → 中野長者橋 → 西池袋 → 熊野町JCT。約18km がトンネル（大橋JCT の二重ループはランプなので走らない）
6. 向島線 スカイツリー（遊べる・8.4km）… 江戸橋JCT → 箱崎JCT → 両国（国技館）→ 駒形 → 隅田川沿い → 向島。全区間高架、正面にスカイツリー
7. 1号羽田線 運河ストレート（遊べる・12.7km）… 羽田 → 空港西 → 平和島 → 鈴ヶ森 → 芝浦の運河沿い → 浜崎橋JCT。羽田へ降りる飛行機が道路の上を横切る
8. 5号池袋線 サンシャイン（遊べる・15.8km）… 竹橋JCT → 西神田 → 飯田橋 → 江戸川橋 → 護国寺 → 東池袋（サンシャイン60）→ 北池袋 → 熊野町JCT → 板橋JCT → 中台 → 高島平。川の上をくねくね北上してから長い直線
9. 湾岸線 東行き 海底トンネル（遊べる・11.8km）… 大井JCT → 海の下の東京港トンネル → 臨海副都心 → 有明JCT → 東雲JCT → 辰巳JCT → 新木場 → 葛西JCT。ビッグサイトと葛西臨海公園の大観覧車
10. 2号目黒線 タワー下り（遊べる・8.2km）… 霞が関 → 谷町JCT → 飯倉（東京タワー）→ 一ノ橋JCT → 天現寺 → 目黒 → 戸越。カーブの多い短距離スプリント
11. C2 荒川リバーサイド（遊べる・15.2km）… 熊野町JCT → 板橋JCT → 王子（飛鳥山トンネル）→ 江北JCT → 荒川沿いの高架 → 小菅JCT → 堀切JCT → 四つ木。正面にスカイツリー。荒川沿いは壁を低い縁石と手すりにして、隅田川・荒川の水面と河川敷が見える
12. 7号小松川線 竪川ストレート（遊べる・10.1km）… 江戸橋JCT → 箱崎JCT → 両国JCT → 錦糸町 → 竪川の上 → 荒川・中川 → 小松川 → 一之江。左手にスカイツリー
13. 9号深川線 木場から湾岸へ（遊べる・10.7km）… 江戸橋JCT → 箱崎JCT → 隅田川 → 福住 → 木場 → 塩浜 → 辰巳JCT → 湾岸線 東行き → 新木場 → 葛西JCT。正面に葛西臨海公園の大観覧車
14. C2 荒川・中川 土手ストレート（遊べる・12.1km）… 葛西JCT → 清新町 → 船堀橋 → 小松川JCT → 平井大橋 → 四つ木 → 堀切JCT。荒川と中川にはさまれた土手の上の直線。壁を低い縁石と手すりにして、両側の川が見える
15. 3号渋谷線 上り 都心へ（遊べる・12.5km）… 用賀 → 三軒茶屋 → 大橋JCT → 渋谷 → 高樹町 → 六本木 → 谷町JCT → 霞が関。コース1の後半を逆向きに、テックジムの看板と東京タワーへ向かう
16. お台場ぐるり レインボーブリッジ（遊べる・13.8km）… 汐留 → 浜崎橋JCT → 芝浦JCT → レインボーブリッジ → 台場 → 有明JCT → 湾岸線 東行き → 辰巳JCT → 9号深川線 → 木場 → 箱崎JCT → 江戸橋JCT。橋・海・運河を一度に走る

PLATEAU のデータがある東京23区内でそろえています。新しいルートは、下の「コースデータの作り方」で OSM の経路と PLATEAU の建物からデータを作り、js/courses.js に区間テロップ・出口・ランドマークを足せば遊べます。

実行方法

Web 版はビルド不要です。静的ファイルとして配信してブラウザで index.html を開きます（ES Modules を使うため file:// では動きません）。

python3 -m http.server 8000
# → http://localhost:8000/

Android アプリ

Capacitor で Android アプリにしています（パッケージ名 jp.techgym.shutoko）。ゲームのファイルはアプリに同梱するので、オフラインでも遊べます。

• 動作確認用の APK（デバッグ署名・テスト広告）は、push のたびに GitHub Actions がビルドしてリリース画面に載せます
  • リリース画面: https://github.com/techgymjp/shutoko/releases/tag/android-latest
  • APK を直接: https://github.com/techgymjp/shutoko/releases/latest/download/shutoko.apk
  • スマホで読み取る QR コード（リリース画面）: docs/apk-qr.png
• GitHub Secrets（ANDROID_KEYSTORE_BASE64 など 4 つ）が登録されていれば、本番広告の署名付き AAB（Google Play 用）も作り、Actions の Artifact shutoko-release-aab に置きます
• 横画面固定・全画面・プレイ中は画面を消さない。右手の ACCEL・BRAKE は画面の右下、ERS はその上。戻るボタンはレース中ならポーズ、トップ・結果画面ならアプリを終了
• 広告（Google AdMob）
  • バナー: トップ・あそびかた・ルート選択・ポーズ・結果画面の下中央だけ（レース中は操作ボタンと重なるので出さない）
  • 全画面広告: レースを始めるとき・トップへ戻るとき・ポーズからの再開・結果画面からもう一度 のたびに
  • リワード広告: コースの鍵。最初は 1 番のコースだけ走れ、完走すると次のコースの鍵が開く。鍵のかかったコースも、ルート選択の「📺 広告を見てスタート」で広告を最後まで見ればそのレースを走れる（レース中には出さない。Web 版は鍵なしで全部のコースを走れる）
  • EU などでは起動時に同意確認を出し、トップ画面の「広告の設定」から変更できる
• タイトル画面にビルド番号とプライバシーポリシーへのリンクを表示

npm ci
npm run android:sync   # www/ にコピーして Android プロジェクトへ反映（テスト広告）
npm run android:open   # Android Studio で開く

Google Play の掲載情報（日英の紹介文・アイコン・フィーチャーグラフィック・スクリーンショット）は docs/store/ にあります（listing.md）。

Google Play 用は ADMOB_MODE=production npm run build && npx cap copy android で本番広告に切り替えてから ./gradlew bundleRelease（CI が自動で行います）。

iOS アプリ

Android 版と同じ Capacitor のプロジェクトに ios/ を足して、iPhone 用のアプリにしています（Bundle ID jp.techgym.shutoko、iPhone 専用・横画面固定）。

• Mac での作業手順（ビルド・TestFlight・審査）は docs/IOS_BUILD.md
• 広告は Android 版と同じ場面に出し、iOS では起動時に App Tracking Transparency の確認を出す。広告ユニットは js/ads.js の UNITS.ios
• push のたびに GitHub Actions が、署名なしでシミュレーター向けにビルドできるかを確かめる（.github/workflows/ios.yml）
• App Store 用の掲載情報（日英の名前・サブタイトル・プロモーション用テキスト・概要・キーワード）と画像は docs/store/ios/（listing.md、スクリーンショット 2622×1206 日英各 4 枚、ヘッダ 3840×1646、検索結果 3840×2560）

npm ci
npm run ios:sync      # テスト広告で iOS プロジェクトへ反映
npm run ios:release   # App Store 用 (本番広告)
npm run ios:open      # Xcode で開く

コースデータの作り方

js/course-data.js（道路の線・高さ・トンネル区間・建物）は次の手順で作ります。

1. OpenStreetMap API から首都高の路線リレーション（4号 4256522・C1 4256008・3号 4256376）を /api/0.6/relation/<id>/full で、三宅坂JCT・谷町JCT 付近を /api/0.6/map?bbox= で取得
2. python3 tools/osm_route.py … 一方通行どおりに 高井戸 → 霞が関 → 用賀 の経路を求めて path.json に出力 （C1 一周は python3 tools/osm_loop.py rc1.osm "Inner directions" 35.65385 139.74786 > path_c1.json、 ほかのルートは python3 tools/osm_path.py --osm <路線のデータ…> --via 緯度,経度 --via … > path_xx.json で通過地点をたどる。 路線リレーション: 11号台場線 4257564・湾岸線 4256202・中央環状線 4256077・6号向島線 4256960・1号羽田線 4256244・5号池袋線 4256611・2号目黒線 4256339・7号小松川線 4257465・9号深川線 4257496）
3. PLATEAU 東京都23区 CityGML（2020年度）から、コース沿いの3次メッシュの建物（udx/bldg）の輪郭（lod0RoofEdge）・高さ（measuredHeight）・名前を取り出す
4. python3 tools/build_course.py path.json <建物のディレクトリ> > js/course-data.js （C1 一周は python3 tools/build_course.py path_c1.json <建物のディレクトリ> C1_DATA --loop > js/course-c1-data.js。ゴールのあともスタートの先へ道とビルが続く）

データの出典: © OpenStreetMap contributors（ODbL）／ 国土交通省 Project PLATEAU（PLATEAU サイトポリシー、CC BY 4.0 互換）。

ファイル構成

ファイル	内容
js/course-*.js	各コースの道路の線・高さ・トンネル区間・建物（自動生成）
js/courses.js	コース定義（区間・出口・緑地・ランドマーク）と提案ルート。テックジム（アドバルーン）・東京タワー・国会議事堂・スカイツリー・富士山は全コース共通の目印
js/route.js	道路の線を 2m 間隔にし、位置・向き・曲率・高さを引けるようにする
tools/	コースデータを作るスクリプト（OSM の経路探索・PLATEAU の建物の取り込み）
js/world.js	高架・壁高欄・遮音壁・トンネル・照明・標識・PLATEAU のビル群・空（チャンク単位で生成）
js/models.js	レーシングマシン、ランドマーク、テクスチャ（路面・窓・標識）
js/cockpit.js	ドライバー目線のコクピット（ノーズ・前輪・ヘイロー・ステアリングの表示とシフトランプ）
js/main.js	レース進行、操作、AI、接触、カメラ、HUD
js/effects.js	火花・破片・タイヤスモーク
js/traffic.js	対向車線の一般車
js/audio.js	効果音（すべて WebAudio で合成）

テスト用に index.html?debug で開くと、コンソールから dbg.warp(距離m) で好きな地点へ移動できます。

ライセンス

著作権はテックジム株式会社に帰属します（All rights reserved）。許可なく複製・改変・再配布すること、Web サイトやアプリ（Google Play、App Store など）として公開・販売すること、名前・ロゴ・アイコン・画像を使うことを禁止します。 テックジムの受講生が学習目的で複製・改変することは許可しますが、アプリストアでの公開・広告の掲載・販売などの商用利用は禁止し、著作権表示を残してください。 three.js（MIT）・OpenStreetMap（ODbL）・PLATEAU（CC BY 4.0 互換）などは、それぞれのライセンスのままです。詳しくは LICENSE を見てください。