Underground 2 Revived
Chrome과 Firefox에서 Need for Speed Underground 2를 WebGPU로 두고 팬 프로젝트입니다
개인 계정의 공개 저장소 소유자는 GitHub로 로그인해 운영자를 확인하고 소개를 직접 관리할 수 있습니다. 관리자 승인은 필요하지 않습니다.
로그인한 뒤 확인 파일을 만들어 이 저장소의 기본 브랜치에 30분 안에 커밋해 주세요. 다른 브랜치나 포크의 파일은 인정하지 않습니다. 파일을 올린 뒤 아래에서 확인하면 관리자 승인 없이 관리할 수 있습니다. 자격을 유지하려면 파일을 남겨 두세요.
로그인이 필요하면 로그인 화면으로 이동합니다. 로그인 후 이곳으로 돌아와 원하는 확인 버튼을 다시 눌러 주세요.
프로젝트 폴더에서 /nomorevibe verify를 실행하면 소유권을 확인하고 소개를 직접 관리할 수 있습니다.
1분 만에 확인하기메이커가 쓴 소개는 위의 한 줄이 전부입니다. 더 자세한 내용은 저장소 README에서 읽을 수 있습니다. 저장소 README ↗
README 전체를 불러오는 중입니다.
README 전문 보기 ↗ドラマ「スクール☆ウォーズ」で暴走族がバイクで校舎の廊下を走り回り、窓ガラスを割りまくる名場面をモチーフにしたブラウザゲームです。
index.html をブラウザで開くだけで遊べます(ビルド不要・外部ライブラリなし)。Android アプリ版と iOS アプリ版もあります(下記)。
Android 版は Google Play で公開中です:https://play.google.com/store/apps/details?id=jp.techgym.schoolwars (Web 版のタイトル画面にもリンクがあります)
タイトル画面には大事なルールを 3 つだけ載せ、詳しい説明は「遊び方」ページ(絵つき)にまとめています。
| キー | 動作 |
|---|---|
| ↑ / ↓(W / S) | 廊下の奥へ/手前へ |
| → / Space(D) | ダッシュ(離すと自然に減速) |
| X(K) | パラリラ(ミュージックホーンでチャルメラ。前方の生徒が逃げ出す。3.5秒ごと) |
| M | 音のオンオフ |
| Esc / P | 一時停止・再開 |
木刀は、壁ぎわのレーンに入ったときと、暴走族が目の前に来たときに自動で振ります。
スマートフォンは横向きで遊ぶのがおすすめです。左に「パラリラ」と大きな「ダッシュ」、右に ▲▼ のボタンが並びます(指を離さずにボタンからボタンへ滑らせても切り替わります)。縦向きのときは横にするよう案内が出ます(「縦のまま遊ぶ」も選べます)。
日本語と英語に対応しています。端末の言語が日本語なら日本語、それ以外は英語で表示し、タイトル画面の「日本語 / English」で切り替えられます(選んだ言語はブラウザに保存されます)。文言は js/i18n.js にまとめています。英語名は「Hallway Rampage」です。Android アプリの名前も、端末の言語に合わせて「廊下爆走伝」「Hallway Rampage」になります。
結果画面から X(旧Twitter)へのポスト、LINE で送る、結果のコピーができます(スマホでは「その他」から端末の共有メニューも使えます)。
シェア文に付くURLは index.html の <head> にある次の行で決まります(現在は紹介記事のページ)。変えたいときはここを書き換えてください。
<meta name="share-url" content="https://techgym.jp/column/claude-code-game-school-wars/">
vercel.json で、Vercel が npm run build を実行して www/ を公開するよう設定しています(Android アプリに同梱するのと同じファイルです)。
Capacitor でゲームのファイルをアプリ内に同梱しているため、ネットにつながっていなくても遊べます(オフラインのときは文字が端末の標準フォントで表示されます)。
v1.0.0 (build 12) など)とプライバシーポリシーへのリンクを表示アプリ ID(パッケージ名)は jp.techgym.schoolwars です(Google Play に一度公開すると変更できません)。
Android / iOS アプリでのみ広告を表示します(Web 版には広告は出ません)。
| 広告 | タイミング |
|---|---|
| インタースティシャル(全画面) | 毎回:「エンジン始動」でプレイを始める前、結果画面の「もう一回」の前、「タイトルへ」でタイトルに戻る前 |
| バナー | タイトル・遊び方・面クリア・結果の画面の下(プレイ中は操作ボタンと重なるので隠す) |
| リワード | 生徒を轢いてアウトになったとき「広告を見て続行」を選ぶと、その場から走り直せる(1 ゲーム 1 回まで、10 秒で自動的に結果画面へ) |
android/app/src/main/res/values/strings.xml の admob_app_id にあります。js/ads.js の UNITS.android.production / UNITS.ios.production にあります。school-wars.apk)は常に Google のテスト広告 を表示します。自分でタップしても問題ありません。ADMOB_MODE=production で本番の広告に切り替えます(scripts/build-web.js が js/ads-config.js を書き換えます)。GitHub Actions(自動): Web 版や android/ を変更して push すると、.github/workflows/android.yml が動作確認用の APK を作ります。
既定ブランチのビルドは GitHub の Release(android-latest)に自動で載るので、Android 端末で次の URL を開くだけで最新版をダウンロードできます。
https://github.com/techgymjp/school-wars/releases/latest/download/school-wars.apk
リリース画面(https://github.com/techgymjp/school-wars/releases/tag/android-latest )は次の QR コードからも開けます。
ダウンロードした school-wars.apk を開き、「提供元不明のアプリ」のインストールを許可するとインストールできます。
動作確認用の署名鍵(android/app/debug.keystore)はリポジトリで固定しているので、新しいビルドもアンインストールせずに上書きインストールできます。
(Release に載る APK はデバッグ版です。Google Play には下の手順で作る署名済み .aab を使います)
手元の PC(Android Studio):
npm ci
npm run android:sync # Web ファイルを www/ にまとめて Android プロジェクトへコピー
npm run android:open # Android Studio で開く
アイコンと起動画面は assets/ の元画像から作っています。元画像は scripts/art/ で描いています。作り直すときは次のとおりです。
node scripts/art/render.mjs assets scripts/art/art.html # playwright が必要
npx @capacitor/assets generate --android --iconBackgroundColor '#0f1016' --iconBackgroundColorDark '#0f1016' --splashBackgroundColor '#0f1016' --splashBackgroundColorDark '#0f1016'
| 名前 | 内容 |
|---|---|
ANDROID_KEYSTORE_BASE64 | base64 -i upload.jks | tr -d '\n' | pbcopy でコピーした文字列 |
ANDROID_KEYSTORE_PASSWORD | キーストアのパスワード |
ANDROID_KEY_ALIAS | upload |
ANDROID_KEY_PASSWORD | 鍵のパスワード |
school-wars-release-aab(.aab)ができるバージョン番号(versionCode)は Actions の実行回数が自動で使われます。表示用のバージョン名は package.json の version です。
Android 版と同じ Capacitor で、ios/ に iOS のプロジェクトがあります(Bundle ID jp.techgym.schoolwars、iPhone・横画面固定)。ビルドと App Store への提出は Mac で行います。手順は docs/IOS_BUILD.md にまとめています。
npm run ios:sync # Web ファイルを iOS プロジェクトへコピー(テスト広告)
npm run ios:release # 本番の広告 ID でコピー(App Store 用)
npm run ios:open # Xcode で開く
docs/IOS_BUILD.md の 8 章。審査への提出は App Store Connect で手で行いますdocs/store/ios/(スクリーンショット 2622×1206 は 6.3inch/ に日英各 4 枚、ヘッダ 3840×1646、検索結果 3840×2560)docs/IOS_BUILD.md の 6 章)All rights reserved. 著作権はテックジム株式会社に帰属します。無断での複製・改変・再配布、Web サイトやアプリとしての公開を禁止します。ただし、テックジムの受講生が学習目的で複製・改変することは許可します(商用利用は不可。詳しくは LICENSE)。
index.html 画面の骨組み
css/style.css 見た目(スマホの横画面・縦画面の切り替えを含む)
js/main.js ゲーム本体(描画・操作・効果音・シェア)
js/i18n.js 表示言語(日本語 / 英語)の文言
js/ads.js Google AdMob 広告(Android / iOS アプリのみ)
js/ads-config.js 広告のモード(ビルド時に生成)
js/build-info.js アプリのバージョン表示(ビルド時に生成)
assets/ アイコンと起動画面の元画像
android/ Android アプリのプロジェクト(Capacitor)
ios/ iOS アプリのプロジェクト(Capacitor)
scripts/ Android に同梱する Web ファイルを www/ にまとめるスクリプトと、アイコンの元画像を描くスクリプト