怪獣ドカン！ KAIJU DOKAN!

巨大怪獣「ドカゴン」を操作して、夕暮れの湾岸シティをドカンドカン破壊するブラウザゲームです。 Three.js + TypeScript 製。グラフィックも効果音も BGM もすべてコードで生成していて、外部の画像・音声ファイルは使っていません。 開発には AI コーディングツールの Claude Code（モデル：Claude Opus 5.5、effort：Max）を使いました。

▶ ブラウザで遊ぶ：https://tanuu5.github.io/kaiju-dokan/ （インストール不要。PC ではマウス＋キーボードかゲームパッド、スマホ・タブレットではタッチ操作で遊べます）

遊び方

• 目的：制限時間 4 分以内に、街の破壊率 40% を達成するとステージクリア。クリア後も時間いっぱい暴れてスコアを伸ばせます（Enter キー、またはポーズメニューの「ここで終了して結果を見る」で終了）。
• ビルの壊れ方：ビルは 1 フロアずつのブロックでできていて、攻撃した場所だけが崩れます。土台を崩すとビルが倒壊し、背の高いビルは隣のビルを巻き込みながら横倒しになります。
• コンボ：破壊を続けるとコンボがつながり、スコア倍率が最大 ×5 まで上がります。
• エネルギー：破壊するとエネルギーが溜まり、マグマブレスが撃てます。満タンになると背びれが光ります。
• 防衛軍：時間が経つと戦車や攻撃ヘリが攻撃してきます。踏みつけ・パンチ・しっぽ・ブレスで撃破できます。咆哮でヘリをひるませることもできます。
• HP：HP が 0 になるとゲームオーバー。しばらく被弾しなければ回復し、ビルを倒すと少し回復します。

操作方法

操作	キーボード＋マウス	キーボードのみ	ゲームパッド
移動 / ダッシュ	WASD / Shift	WASD / Shift	左スティック / LB（L1）
カメラ	マウス（画面クリックでマウス操作に戻る）	矢印キー	右スティック
ズーム	マウスホイール	–	–
パンチ（連打すると 3 発目が叩きつけ）	左クリック	J	X（□）
しっぽ回転アタック	E	K	B（○）
ジャンプ → 着地で踏みつけ	Space	Space	A（×）
マグマブレス（長押し・エネルギー消費）	右クリック長押し / F	L	RT（R2）
咆哮（ヘリをひるませ、車を吹き飛ばす）	Q	I	Y（△）
ポーズ	Esc / P	P	START
BGM 切り替え / 操作表示の切り替え	M / H	M / H	–

ゲームパッドはメニューも操作できます（十字キーまたは左スティックで選択、A で決定、B で戻る）。

スマホ・タブレット（タッチ操作）

• 移動：画面の左側をドラッグすると、指を置いた場所にスティックが出ます。端まで倒すとダッシュ。
• カメラ：画面の右側をドラッグ。移動しながら同時に操作できます。
• 攻撃：右下のボタンでパンチ・しっぽ・ジャンプ・ブレス（長押し）・咆哮。使えないあいだはボタンが暗くなり、エネルギー満タンでブレスボタンが光ります。
• ポーズ：左上のボタン。
• 横向きがおすすめです（縦向きでも遊べます）。

動作環境

• WebGL2 に対応したブラウザ（Chrome / Edge / Firefox / Safari の最新版）
• PC はマウス＋キーボードまたはゲームパッド、スマホ・タブレットはタッチ操作で遊べます
• タイトル画面やポーズ中の「設定」で、画質（低・中・高）、画面の揺れの強さ、カメラ感度、BGM／効果音の音量、FPS 表示を変更できます
  • 動作が重いときは画質を「低」に、画面の揺れで酔いやすいときは「画面の揺れ」を下げてください（0% で揺れなし）
  • スマホ・タブレットでは、最初は画質「低」で始まります

開発

npm install
npm run dev      # 開発サーバー（http://localhost:5173）
npm run build    # 型チェック + 本番ビルド（dist/）
npm test         # ユニットテスト + ヘッドレスシミュレーション
npm run sim      # Bot にステージを通しでプレイさせるバランスレポート
npm run check    # 型チェック・テスト・ビルドをまとめて実行

• URL に ?debug を付けると FPS などのデバッグ表示が出て、ブラウザのコンソールから window.__game にアクセスできます。
• ゲームのルール部分（src/game/session.ts）は DOM や WebGL に依存していないので、Node 上でシミュレーションできます（tests/sim.test.ts）。

技術的なしくみ

• 建物：4m 四方のブロック（チャンク）の集まり。街全体のブロックを 1 つの InstancedMesh で描画し、破壊・支持判定（地面とつながっていない部分の落下）・倒壊（沈み込み／横倒し）を CPU で計算しています。
• 見た目：窓・道路・空・海はシェーダーで手続き生成。夕暮れのライティングにブルームを重ねています。怪獣がビルに隠れたときはステンシルで透視シルエットを表示します。
• 音：足音・爆発・崩落・咆哮・BGM（太鼓とベースのループ）を Web Audio API で合成しています。
• 使用技術：Three.js、TypeScript、Vite、Vitest

ディレクトリ構成

src/
  main.ts            エントリーポイント
  config.ts          チューニング用の定数
  stages/            ステージ定義（制限時間・目標・敵ウェーブ）
  game/              ゲーム本体（Game: 画面と描画 / Session: ルール / World: 3D オブジェクト一式）
  world/             都市の生成、建物の破壊、破片、地面・空・海、車、街路樹
  entities/          怪獣、防衛軍
  fx/                パーティクル、ブレス、擬音語テキスト
  ui/                HUD、ミニマップ、タッチ操作、ゲームパッドでのメニュー操作
  core/              入力、音、乱数、数学ユーティリティ
  sim/               ヘッドレスシミュレーション用の Bot
tests/               ユニットテストとシミュレーション
docs/images/         README 用のスクリーンショット

ライセンス

MIT License © 2026 たぬ