ゲームの概要（Introduction）
【ブラウザで遊べるPvEトレーディングカードゲーム（プロトタイプ）】
ずっと作りたかった「自分だけのカードゲーム」を、生成AI（Gemini/ChatGPT）の力を借りて形にしました。
- ジャンル： 1人用カードバトル（PvE）
- 開発ツール： HTML/JavaScript （コードは全てAIが執筆）
- 画像・動画・音楽：画像はすでに作成済みのものを使用、動画はComfyUIで生成、音楽はSunoAIで生成
(画像・動画・音楽については別ページで解説) - 制作期間： 約5時間
【制作の目的】
目的: 既存のアイデアとAI生成素材（画像・動画）を活用し、PC・スマホのブラウザですぐに遊べる「一人用カードバトルゲーム」のプロトタイプを作成すること。
コンセプト: 複雑な環境構築を行わず、HTML/CSS/JavaScriptのみで動作する軽量なアプリケーションを目指す。
ターゲット: 自身のゲーム企画（ルール、カード効果、演出）が実際に面白いかを確認するための、動作検証モデルの構築。
【実装した機能・技術】
使用技術: HTML5, CSS3, JavaScript (Vanilla JS) 主な実装機能:
- ゲームサイクル: ターン制バトル、MP（マナ）管理、ドローシステム、勝敗判定。
- 独自のバトルシステム: カードを1枚ずつ出すのではなく、複数枚を選択してから一斉に攻撃する「同時発動（Battle Start）システム」を採用。
- リッチな演出:
- 動画カットイン: 特定のレアカード（勇者）選択時に、攻撃前にMP4動画が再生される演出。複数枚選択時は動画が並列再生される仕様。
- UIアニメーション: デッキから手札への配布アニメーション、ダメージ数値のポップアップ、被弾時の画面シェイク。
- 戦略性（ロジック）:
- 属性システム: 5属性（火・水・電気・土・風）の実装と、3すくみ等の弱点・耐性計算（ダメージ2倍/半減）。
- バフ・デバフ: 攻撃力アップや防御ダウンなどのステータス変化処理。
- ランダム要素: 敵（ボス）の属性や、ドローカードへの属性付与をランダム化。
【AIへの指示（プロンプトエンジニアリング）】
開発はAI（Gemini）との対話形式で進行。段階的に複雑な要件を追加し、コードを生成・修正させた。
- フェーズ1（基盤構築）: 「HTMLですぐに動くシンプルなカードゲームを作って」と指示し、最小構成のMVP（実用最小限の製品）を作成。
- フェーズ2（素材統合）: 「手札の部分をこの画像に差し替えて」「敵をドラゴンの画像にして」と、自作のAI生成画像をアップロードし、UIに反映。
- フェーズ3（仕様変更）: 「ターン終了ボタンをバトル開始ボタンに変更し、選択したカードを一気に発動させたい」と、ゲーム性の根幹に関わるロジック変更を指示。
- フェーズ4（高度な演出）: 「カード選択時に動画を流したい」「動画の再生速度を調整したい」といった、マルチメディア制御の要件を実装。
【完成度・成果】
- 到達点: * 外部ツールやゲームエンジン（Unity等）を使用せず、メモ帳とブラウザのみで、企画していたルールの9割以上を実装完了。
- 「画像素材の反映」「動画演出」「属性計算」「UIアニメーション」までを含む、プレイアブルな完全動作版が完成。
- 技術的な成果: * MVCモデル（データと見た目の分離）を意識した設計により、後からの機能追加（属性追加やログのレイアウト変更）にも柔軟に対応できた。
- 今後の展望: * 今回のHTML版を「仕様書（動く設計図）」として位置づけ、将来的にはUnityを用いたネイティブアプリ開発への移行を検討できる段階にある。
