AI コーディングエージェントでブラウザゲームを作る方法

コーディングエージェントはゲームのコードを書くのが得意です。でも、そのコードが本当に動いているかを知るのは、たいてい苦手です。画面は見えないし、プレイヤーが床をすり抜けたことにも気づけません。ゲームループ内のエラーは、ただの沈黙に見えることもよくあります。結局あなたがエージェントの目になります。ゲームを動かし、何がおかしいか説明し、エラーを貼り付ける。その繰り返しです。

debuff は 2D ブラウザゲームのためのオープンソースのツールキットで、エージェントが自分の目で確かめられるように作られています。このガイドでは、空のフォルダから始めて、エージェントが遊び、調べ、テストできるゲームまでを作ります。クリエイティブな判断は、引き続きあなたのものです。

必要なもの

• Node.js 22 以降
• Claude Code など、MCP に対応したコーディングエージェント
• 1 分ほどの時間

1. ゲームを作る

npm create debuff@latest my-game
cd my-game
npm install
npm run dev

表示された URL を開けば、もうゲームが動いています。` を押すと開発パネルが開きます。

ジャンルを決めてスタートしたいなら、タイルマップのプラットフォーマーは -- --template platformer、見下ろし型アドベンチャーは -- --template mossfell を付けてください。

2. エージェントをつなぐ

新しいプロジェクトには最初から .mcp.json、AGENTS.md、CLAUDE.md が入っています。プロジェクトフォルダでエージェントを起動すれば、debuff の MCP サーバーが自動で読み込まれます。設定は何もいりません。

npm run dev を動かしたままブラウザでゲームを開いておくと、エージェントはそのタブにアタッチします。エージェントの操作はすべてあなたの開発パネルに表示されるので、様子を見守れます。

3. 編集する前にエージェントに見てもらう

debuff がなければ、エージェントはコードを読んで推測するしかありません。MCP サーバーがあれば、次のことができます。

• ライブのゲーム状態を読む： 位置、シーン、パラメータ
• フレームをキャプチャする： あなたと同じ画面を見られます
• 入力を送る： 自分でゲームを遊べます
• 解説付きのエラーを読む： 誰のバグか（あなたのコード、またはエンジン）とソースの行がわかります
• あなたのメモを読む： プレイ中にマークした瞬間（「ここのジャンプがふわふわする」など）

たとえばこんなプロンプトを試してみてください。

しばらくゲームを遊んで、ジャンプの感触でおかしいところを教えて。まだ何も変更しないでね。

4. 手触りは書き直しではなくスライダーで調整する

ゲームの手触りは数字に宿ります。ジャンプの高さ、重力、コヨーテタイム。debuff はこれらをライブパラメータにします。開発パネルではスライダー（取り消し付き）として、MCP 経由ではエージェントが設定できる値として現れます。

これはどちらにとってもコードを変更するより便利です。エージェントが値を提案し、あなたが遊んで判断し、気に入った数字をコードに書き戻します。

5. 変更の正しさをエージェントに証明させる

変更するたびにシナリオで裏付けるよう、エージェントに頼みましょう。シナリオとは、スクリプト化された入力とスクリーンショットのベースラインを使った、決定的なヘッドレス実行です。

npx debuff scenario

debuff は固定ステップのクロックとシード付き乱数で動くので、シナリオは毎回まったく同じように進みます。一方通行の足場への着地が変更で壊れたら、あなたが気づく前にシナリオが見つけてくれます。debuff fuzz はさらに踏み込んで、数分間ランダムに遊び続け、クラッシュや詰まった状態をリプレイファイル付きで報告します。

6. 公開する

npx debuff build

Web 上のどこにでもホストできる静的ビルドが、サイズレポート付きで手に入ります。スターターは brotli で約 19 kB です。開発専用のコードが本番に紛れ込んだら、ビルドは失敗します。

クリエイティブな判断は手放さない

エージェントは配管仕事が得意です。当たり判定、入力のバインド、アセットの読み込み、あなたがマークしたバグの修正。世界観、手触り、物語はあなたのものです。debuff のエージェント向け指示にもはっきりそう書いてあるので、エージェントはアートディレクションを勝手に決めず、代わりの案を提案してくれます。

次のステップ

• エージェントガイド
• なぜ debuff なのか
• エージェントは llms.txt から始められます