ゲームの概要（Introduction）
【ブラウザで遊べる本格タクティクスRPG（プロトタイプ）】 カードゲームに続き、開発難易度の高い「SRPG（シミュレーションRPG）」に挑戦。AI（Gemini/ChatGPT）と共に、マップ上の戦略、ユニットの移動、そして迫力の戦闘アニメーションをブラウザ上で実現しました。
- ジャンル：ターン制シミュレーションRPG（PvE）
- 開発ツール：HTML/JavaScript（コードは全てAIが執筆）
- 画像・動画・音楽：画像・アニメーションは生成AIを活用、音楽はSunoAIで生成
- 制作期間：約20時間
【制作の目的】
目的： 「マップ攻略」「ユニット育成」という複雑な要素を持つSRPGを、ゲームエンジンを使わずにWeb標準技術（HTML/CSS/JS）だけでどこまで再現できるか挑戦すること。
コンセプト： インストール不要。URLを開くだけで、往年の名作のような戦略バトルと、「軽量かつ本格的」なゲーム体験。
ターゲット： スマホやPCで手軽に戦略ゲームを楽しみたい層および、AIを使ったゲーム開発の可能性（ロジックの複雑さへの対応）を検証したい開発者層。
【実装した機能・技術】
使用技術： HTML5, CSS3, JavaScript (Vanilla JS)
- グリッドマップシステム： マス目状のマップにおけるユニット配置、移動範囲の計算（ダイクストラ法などの経路探索ロジックをAIと実装）。
- ターン制バトル： 自軍ターン、敵軍ターンの厳密なステート管理。敵ユニットの簡易AI（索敵・移動・攻撃）の実装。
- リッチな演出：
- UIインタラクション： 移動可能なマスのハイライト表示、ダメージ数値のポップアップ。
- 戦闘アニメーション： 攻撃判定時に別ウィンドウやオーバーレイで再生される攻撃動画。
- 敵の挙動（簡易AI）：
- ランダム、もしくは単純なルール（近くの相手を狙う等）に基づいた敵ユニットの自動行動。
【AIへの指示（プロンプトエンジニアリング）】
開発AI（Gemini）との対話形式で進行。SRPG特有の「状態管理」の複雑さを段階的にクリアしていきました。
- フェーズ1（盤面構築）： 「マス目を作り、クリックした位置にキャラを動かしたい」と指示し、ベースとなる移動システム（グリッド上の座標管理）を作成。
- フェーズ2（ロジック実装）： 「ユニットの移動力を元に、移動できるマスだけ色を変えて」と指示。移動アルゴリズムやターン経過の処理を追加。
- フェーズ3（素材統合）： マップ上に専用のバトルウィンドウを展開し、キャラクターが敵陣へ突撃する攻撃アニメーションを実装。 数値だけの処理に頼らず、視覚的な動き（アクション）で直接的に戦況を見せる、迫力ある戦闘演出を作り上げた。
- フェーズ4（最終調整）： ステータス画面の作成や、細かい微調整、ゲームとしての「手触り」を向上させる改修。
【完成度・成果】
- 到達点： 外部のゲームエンジン（Unity等）を使用せず、メモ帳とブラウザのみで、SRPGの主要素（移動・攻撃・ターン制・敵AI）を完全実装。
- 技術的な成果： 「アニメーション再生の完了を待ってからダメージを与える」といった非同期処理の制御や、複雑な状態遷移（State Pattern的な挙動）をAIのサポートで実現。
- 今後の展望： 今回構築したシステムをベースに、シナリオパートの追加や、セーブ機能の実装による「長編RPG」への拡張が可能に。
