现役卡车司机用Claude Code制作浏览器游戏的故事

はじめに

キャリアカー(車両を何台も積んで運ぶトラック)のドライバーをしながら、ブラウザで遊べる積み込みゲーム「僕らは陸送屋」を個人で作っています。

コードはほぼ全部 Claude Code(Anthropic のAI開発ツール)に書いてもらっています。絵・効果音・BGM・声も、別の生成AIに作らせました。

この記事では「AIに任せきりでどこまで作れたか」と、やってみて詰まった所と、効率よく制作する工夫を書きます。ゲームの中身ではなく、AIとの作り方の話です。

フレームワークは使っていません。ファイルを置くだけで動くので、itch.io や GitHub Pages にそのまま置けます。

AIは1つの会話で何でもやらせるとあちこちを書き換えて壊します。
そこで、リポジトリ直下の CLAUDE.md(AIが会話の最初に必ず読むメモ)に、役割を3つに分けて書きました。

会話をまたぐとAIは前のことを覚えていません。
なので作業中断時に「何をやったか・次に何をやるか」を必ずメモに書かせるルールも入れました。次の会話はそのメモを読めば続きから動けます。

私はスマホからしか作業しないことが多く、AIにはクラウドの環境で動いてもらっています。ここで2つ、落とし穴がありました。

開発用サーバーや長い検証を「裏で動かしてあとで結果を見る」ことができませんでした。AIが返事を終えるたびに、裏の処理が消えるためです。「サーバーがたまに落ちる」の正体がこれでした。

対策は、検証を1コマンドにして、前面で最後まで実行することです。

# サーバー起動 → 通しプレイ → 結果表示まで、1コマンド
bash .claude/tools/verify.sh 7

画面なしの Chromium(Playwright)でゲームを開き、7台を実際の操作で積ませて、減点やエラーがないかを見ます。数分かかる検証は、サブエージェントに前面で実行させて、メインの会話では別の作業を進めさせています。

車が輪止めに当たると、画面から車が消えるバグが出ました。原因は関数の中で fm(床の仕組みを持つオブジェクト)が未定義だったことです。

// seatCar の中で定義していない fm を使っていた
fm.deckDrop(...)  // ReferenceError: fm is not defined

なぜ検証で気づけなかったか。検証用のスクリプトが、グローバルに window.fm を置いていたからです。本体は fm を定義し忘れていても、グローバルを見つけて動いてしまい、エラーが隠れていました。

直し方は2つです。

教訓は「検証の道具が本体の欠陥を隠すことがある」です。AIに検証まで任せていると、こういうズレに気づきにくいので、CLAUDE.md に教訓として残しました。

もう1つ、ユーザー側のデバッグ用にURLに #debug=1 というフラグを付けて、画面に車の状態と最後のJavaScriptエラーが出るようにしました。これによってスマホで再現した時のスクリーンショットから原因を探せました。

宙段(5番と6番の間で持ち上がる短い床)の動きは、実車の写真と動画から、四節リンク(4本の棒が輪になった機構)として計算しています。

AIには、実車の写真と、私の説明(「ここが縮む」「ここで止まる」)を渡して式を書いてもらいました。数値は私が実機で見て「もっと後ろ」「平らに近く」と直します。数式はAI、現場の正しさは私という分担です。

1つのAIに全部任せないほうがうまくいきました。それぞれ得意な物が違うことと、AIの利用料(週間の制限)をやりくりするためです。簡単な作業は軽いモデル(Haiku)に回して、制限をしのぐ工夫もしています。

ゲームはブラウザ版(ベータ)を公開中です。アプリ化(iPhone・Android)も考えています。開発の裏話は、note「ワドメ堂」に書いています。

質問や感想があれば、コメントで教えてください。