プログラミング知識ゼロの私が、AIと会話するだけで作った【ブラウザで遊べる】AIフル活用！オート機能付き「無限ダンジョンSRPG」を作ってみた

ゲームの概要（Introduction）

【思考する戦略バトル × AI生成クリエイティブ】

5人のパーティを編成し、無限に続くダンジョンの深層を目指す「タクティクスRPG（SRPG）」を開発しました。今回は「オートバトル機能」を実装。戦況に合わせてAIが自動でスキルを選択し、敵をなぎ倒していく様子を眺める「観戦する楽しさ」も追求しています。

ジャンル： ダンジョン攻略型シミュレーションRPG
システム： ターン制コマンドバトル / オート戦闘あり
開発ツール： HTML5 Canvas + Vanilla JS

ゲームはこちら　※かなり重いので起動まで時間がかかります

実装した機能・技術

戦況を判断する「オートバトルロジック」 単調なランダム行動ではなく、**「勝利するための判断」**を行うAIをJavaScriptで組みました。
- 味方のHPが減っていれば回復を優先。
- 敵の配置を見て、最も巻き込み数の多い「範囲攻撃」を選択。
- 属性相性（7属性）を計算し、弱点属性のスキルを優先使用。
没入感を高める「マルチモデル・アセットパイプライン」 ゲーム内の全アセットは、各分野に特化した生成AIを組み合わせて実装しています。
- BGM (Suno AI): 戦闘の緊張感を高めるオーケストラ調の楽曲や、ショップの環境音楽には「Suno AI」を採用。シーンに合わせた尺と曲調で、ブラウザゲームとは思えない重厚感を演出。
- SFX (ComfyUI): 斬撃音や魔法の爆発音などのSEは、ComfyUI（AudioLDM等）のノードを組んで生成。フリー素材では見つかりにくい「具体的なイメージ通りの効果音」を作成。
- Visuals (Gemini / GPT): キャラクタービジュアルやスキル発動時の動画エフェクト（ブレス、雷など）は、Gemini（Nano Bananaプロンプト等）を活用して出力。Canvas上で動画を加算合成し、派手な演出を実現。

本格的なSRPGシステム
- 属性相性： 炎・風・土・電気・水・光・闇の7属性による弱点計算。
- ローグライト要素： フロア攻略ごとに獲得したゴールドで、永続的なステータス強化やスキルのアンロックが可能。

制作のこだわりポイント

「オート機能と演出のシンクロ」

今回の主役は「オートバトル」です。プレイヤーが操作しなくても、キャラクターたちが画面狭しと動き回り、派手なエフェクトが飛び交う**「見ていて気持ちいい戦闘」**を目指しました。特に Suno AI で生成したBGMの盛り上がりと、ComfyUI で生成した重みのあるSEが重なることで、ブラウザゲームながらリッチなプレイ感を実現しています。

AIへの指示（プロンプトエンジニアリング）

コーディングにおいては、複雑な戦闘ロジックの構築に注力しました。
- 指示のポイント1（評価関数）： 「オートモード時、各ユニットは移動可能な全タイルをスキャンし、『敵へのダメージ期待値』『被弾リスク』『味方への回復』を数値化（スコアリング）して、最高値の行動を実行する関数を書いて」と指示。
- 指示のポイント2（演出制御）： 「スキル使用時、Canvas上にWebM動画をオーバーレイさせ、再生終了と同時にダメージ判定を行う非同期処理（Async/Await）を実装して」と、演出とロジックの同期を依頼。