【デモ解説】Claude Codeと作るブラウザゲーム開発入門 ― Phaser 3製シューティングゲームを公開するまで

はじめに

AIコーディングエージェントの登場で、プログラムを書くだけでなく「一緒に開発を進める」というスタイルが現実的になってきました。

今回はClaude Codeと対話しながら、ブラウザで遊べる縦スクロールシューティングゲーム「ORBITAL STRIKE」を制作しました。

当初はオーソドックスなステージクリア型シューティングとして作り始めましたが、開発途中でローグライク要素を取り入れたサバイバル型へ大きく仕様変更し完成させました。

本記事では、

AIエージェントによるゲーム開発の流れ
使用した技術
設計変更をどう吸収したか
公開までのプロセス

を紹介します。

ORBITAL STRIKEとは

概要

シューティングゲーム
ブラウザのみで動作
PC・スマホ対応
ダウンロード不要

基本ルール

自機は自動攻撃
プレイヤーは移動に集中
敵を倒して強化
ボスを撃破しながら生存時間を伸ばす

スクリーンショット

(TBD)ゲームURL (後から本番URLに差し替え）

https://ai-site-test.sakuraweb.com/shooting-game/

開発の要件

最初にClaude Codeへ依頼した内容は次のようなものでした。

自機移動
オートショット
ボム
オプション
ボス戦
ステージクリア
リザルト画面

いわゆるオーソドックスな縦スクロールシューティングです。

結果として、

ポーズ機能
オーバードライブ
コンボ
オートプレイ
デバッグ機能

まで実装し、当初想定より高機能な仕上がりになりました。

開発途中で大きく方向転換した

実は最初に完成した時点では、2Dシューティングとしては出来ているが、

「ちゃんと遊べるけれど、何度も遊びたくなる仕組みが弱い」

という課題がありました。

そこで途中から

ローグライク形式のゲームであるヴァンパイアサバイバー風

のランダム成長要素を取り入れることにしました。

武器の複数所持

初期実装では、

ショットレベル1
ショットレベル2
ショットレベル3

という強化方式でした。

これを

通常ショット
レーザー
ミサイル
ガードオーブ

を個別にレベルアップする仕組みに変更しました。

これによりプレイ毎のランダム性が生まれるようになりました。

報酬選択システム

ボス撃破時に3択の報酬を表示。

武器強化
ボム追加
残機増加
ガード追加

などから選択できます。

これによってプレイヤー自身が成長方針を決められるようになりました。

スコアアタック性の向上

ランダム要素だけでなく、

EASY
NORMAL
HARD

の難易度選択も追加。

ランキング機能も実装し、繰り返し遊べるゲームになりました。

使用した技術

分類	使用技術
利用したAIエージェント(モデル)	Claude Code (Sonnet 5)
ゲームエンジン	Phaser 3
ビルドツール	Vite
言語	JavaScript
バージョン管理	Git
画像生成	ChatGPT
画像加工	Python
BGM制作	Gemini
効果音生成	Python
公開環境	さくらのレンタルサーバ

AI生成画像をゲームアセット化

ゲームの要件整理についてはChatGPT上で行いました。
ChatGPTで実施した理由は、作成した要件から完成図の生成、そこからのアセット生成ができるためです。
アセットには自機、敵キャラクター、ボス、背景などが含まれます。

ChatGPTで作成した完成イメージ

ボスバトルの検討図
※当初はボスは変形形式も検討していました。

完成図を元にゲームに必要なアセットを生成しました。
一部のアセットについては画像処理が必要だったため、ClaudeにてPythonを利用して下記の処理を行っています。

緑背景除去
透過PNG化
トリミング
リサイズ

ネットワーク速度の遅いスマホ環境での最適化のために、PNG画像をWebPへ変換して軽量化なども実施しています。

約12MB → 約1.5MB

までサイズを削減しています。

この処理により、スマートフォンでも快適に読み込めるようになりました。

Claude Codeとの開発で印象的だったこと

AI開発では

「コードを書くこと」

よりも

「何を作るか決めること」「どこを磨き上げるか」

の重要性を強く感じました。

例えば今回のローグライク化では、

ゲームルールそのものが変わるレベルの仕様変更でした。

仕様については人間側から要件は出しますが、それに対してClaude Code側からもアイデアやヒントを出してもらい、その中から選択していきました。

またシステム的にも管理クラスの構造化などがうまくできたため、既存構造を活かしながら改修を繰り返すことができました。
結果として破綻なく、新システムへ移行できました。

実プレイでしか見つからなかったバグ

人間側でのテストプレイによって発見した問題も多々ありました。

ボス戦中に報酬が表示されない

コード上は正常でした。

しかし実際に遊ぶと

ゲージが満タンになる
報酬が出ない
ボス撃破後に突然表示

という不自然な挙動になっていました。

これはAIだけでは検出できず、人間側でプレイしたことで発見できた不具合でした。

ボスの挙動

ボスは複数のパーツを組み立てて作成する形式でした。
ただClaude Codeだけでは正しくパーツを組み立てきれていなかっため、人間側でのテストプレイでレビューしてClaude Codeと相談しながら調整していきました。
またボスらしい振る舞いや挙動についても人間側でチェックして作り込んでいきました。

Claude Codeはコーディングエージェントとしてかなり優秀ですが、人間が判断する場所、人間がディレクションすることで向上するクオリティも多々あることに気付かされました。