1. 技術スタック
| カテゴリ |
技術 |
| フロントエンド | HTML5 Canvas + Vanilla JavaScript |
| スタイリング | CSS3（カスタムプロパティ、Grid、Flexbox） |
| バックエンド | Node.js + Express |
| リアルタイム通信 | Socket.IO |
| ホスティング | Railway |
| 画像生成 | Gemini API (gemini-3-pro-image-preview) |
| 効果音生成 | ElevenLabs API |
2. アーキテクチャ概要
- SPAアーキテクチャ（シングルページアプリ）
- クライアントサイドにゲームロジック配置（サーバーはリレー）
- Canvas APIでゲームボード描画
- Screen切替方式のUI管理
通信フロー
ブラウザ (index.html)
→
Express静的配信
→
Socket.IOリレー
→
相手ブラウザ
3. ファイル構造
tactical-commander/
├── package.json
├── .env / .env.example
├── spec.md
│
├── public/ (フロントエンド)
│ ├── index.html (メインHTML - 全画面定義)
│ ├── rules.html (ルール説明)
│ ├── design.html (設計書)
│ ├── proposal.html (企画書)
│ ├── css/
│ │ ├── style.css (ゲームUI全スタイル)
│ │ └── docs.css (ドキュメントページスタイル)
│ ├── js/
│ │ ├── main.js (エントリポイント - 138行)
│ │ ├── gameClient.js (ゲームロジック - 1826行)
│ │ ├── renderer.js (Canvas描画 - 448行)
│ │ ├── ui.js (UI管理 - 759行)
│ │ ├── npcAI.js (NPC AI - 626行)
│ │ ├── assetManager.js (アセット管理 - 186行)
│ │ ├── input.js (入力処理 - 31行)
│ │ ├── network.js (ネットワーク - 7行)
│ │ └── data/
│ │ ├── units.js (ユニット定義 - 58行)
│ │ ├── weapons.js (武装定義 - 84行)
│ │ ├── abilities.js (アビリティ定義 - 57行)
│ │ └── commanders.js (指揮官定義 - 79行)
│ └── assets/
│ ├── units/ (ユニット画像 x5)
│ ├── weapons/ (武装画像 x8)
│ ├── abilities/ (アビリティ画像 x6)
│ ├── ui/ (UI素材 x2)
│ └── sfx/ (効果音 x29)
│
├── server/ (バックエンド)
│ ├── server.js (Express+Socket.IO - 235行)
│ └── game/
│ └── MapData.js (マップデータ - 1134行)
│
└── scripts/ (ビルドツール)
├── generate_images.py (画像生成)
└── generate_sounds.py (効果音生成)
4. JSモジュール一覧
| ファイル |
行数 |
役割 |
| gameClient.js | 1826 | ゲーム状態管理、ターン処理、戦闘計算、オンライン同期 |
| ui.js | 759 | DOM操作、生産モーダル、パネル更新、ログ管理 |
| npcAI.js | 626 | NPC敵AIの意思決定（優先度ベース） |
| renderer.js | 448 | Canvas描画（マップ、ユニット、エフェクト） |
| assetManager.js | 186 | 画像・効果音プリロード、再生管理 |
| main.js | 138 | 初期化、画面遷移、Socket.IOイベント接続 |
| input.js | 31 | マウス入力のCanvas座標変換 |
| network.js | 7 | Socket.IO接続ラッパー |
| 合計 | 4021 | |
5. データ定義テーブル
ユニット定義
| ID |
名前 |
HP |
AT |
DEF |
AGI |
コスト |
移動力 |
| scout | スカウト | 3 | 2 | 0 | 8 | 2 | 4 |
| soldier | ソルジャー | 5 | 3 | 1 | 5 | 3 | 3 |
| heavyGuard | ヘヴィガード | 8 | 2 | 3 | 5 | 3 | 3 |
| sniper | スナイパー | 3 | 4 | 0 | 4 | 4 | 2 |
| engineer | エンジニア | 4 | 1 | 1 | 6 | 3 | 3 |
武装定義
| ID |
名前 |
射程 |
AT修正 |
コスト |
特殊効果 |
| assaultRifle | アサルトライフル | 2 | +0 | 0 | なし |
| shotgun | ショットガン | 1 | +2 | 1 | なし |
| sniperRifle | スナイパーライフル | 4 | +1 | 2 | noAttackAfterMove |
| rocketLauncher | ロケットランチャー | 3 | +2 | 3 | splash（隣接4方向1ダメ） |
| machineGun | マシンガン | 2 | -1 | 2 | doubleAttack |
| empBlaster | EMPブラスター | 2 | +0 | 2 | empSlow（AGI-3） |
| repairTool | リペアツール | 1 | +0 | 1 | repair（HP2回復） |
| plasmaSword | プラズマソード | 1 | +3 | 2 | defPierce（DEF1無視） |
アビリティ定義
| ID |
名前 |
コスト |
タイプ |
効果 |
| overdrive | オーバードライブ | 1 | active | 1回、移動力+2 |
| shieldWall | シールドウォール | 2 | passive | 初回被弾-2 |
| stealth | ステルス | 2 | passive | 2ターン射程3+対象外 |
| miningBoost | 採掘ブースト | 1 | passive | 採掘AP+1 |
| counter | カウンター | 1 | passive | 射程1被弾時反撃 |
| blitz | 電撃戦 | 2 | passive | 攻撃後1マス移動 |
指揮官定義
| ID |
名前 |
肩書き |
パッシブ |
スキル |
| valkyrie | ヴァルキリー | 突撃司令官 | 戦果報酬(撃破時AP) | 一斉射撃(全軍AT+2) |
| ironwall | アイアンウォール | 鉄壁司令官 | 鉄壁陣形(隣接DEF+1) | 緊急修復(全軍HP3回復) |
| shadow | シャドウ | 電撃司令官 | 電光石火(移動+1) | 奇襲作戦(再配置) |
| technomancer | テクノマンサー | 補給司令官 | 効率改善(AP+1/ラウンド) | 緊急生産(コスト半額) |
6. 画像アセットギャラリー
ユニット画像（5枚）
スカウト
ソルジャー
ヘヴィガード
スナイパー
エンジニア
武装画像（8枚）
アサルトライフル
ショットガン
スナイパーライフル
ロケットランチャー
マシンガン
EMPブラスター
リペアツール
プラズマソード
アビリティ画像（6枚）
オーバードライブ
シールドウォール
ステルス
採掘ブースト
カウンター
電撃戦
UI画像（2枚）
背景テクスチャ
ボタン素材
7. 効果音アセット一覧
攻撃（7種）
| ファイル名 | 説明 |
|---|
| attack_rifle | ライフル攻撃音 |
| attack_shotgun | ショットガン攻撃音 |
| attack_sniper | スナイパー攻撃音 |
| attack_rocket | ロケット攻撃音 |
| attack_machinegun | マシンガン攻撃音 |
| attack_emp | EMP攻撃音 |
| attack_plasma | プラズマ攻撃音 |
移動（3種）
| ファイル名 | 説明 |
|---|
| unit_move | ユニット移動音 |
| unit_deploy | ユニット配置音 |
| unit_produce | ユニット生産音 |
採掘・修理（4種）
| ファイル名 | 説明 |
|---|
| mining | 採掘音 |
| repair | 修理音 |
| heal | 回復音 |
| wait | 待機音 |
進行（5種）
| ファイル名 | 説明 |
|---|
| game_start | ゲーム開始音 |
| round_start | ラウンド開始音 |
| enemy_turn | 敵ターン開始音 |
| phase_production | 生産フェーズ音 |
| phase_action | 行動フェーズ音 |
勝敗（2種）
| ファイル名 | 説明 |
|---|
| victory | 勝利音 |
| defeat | 敗北音 |
UI（6種）
| ファイル名 | 説明 |
|---|
| ui_click | クリック音 |
| ui_hover | ホバー音 |
| ui_confirm | 確定音 |
| ui_cancel | キャンセル音 |
| ui_error | エラー音 |
| ui_menu_open | メニュー開閉音 |
特殊（2種）
| ファイル名 | 説明 |
|---|
| skill_activate | スキル発動音 |
| unit_destroy | ユニット撃破音 |
8. オンライン通信プロトコル
クライアント → サーバー
| イベント名 |
データ |
説明 |
| createRoom | - | 部屋作成 |
| joinRoom | { roomId } | 部屋参加 |
| leaveRoom | - | 部屋退出 |
| commanderPick | { commanderId } | 指揮官選択 |
| gameStateSync | { state } | ゲーム状態送信 |
| gameLog | { message, type } | ログ送信 |
サーバー → クライアント
| イベント名 |
データ |
説明 |
| opponentJoined | - | 対戦相手入室 |
| gameStart | { p1Commander, p2Commander } | ゲーム開始 |
| stateSync | { state } | 状態同期受信 |
| remoteLog | { message, type } | ログ受信 |
| opponentLeft | - | 対戦相手退出 |
9. NPC AI ロジック概要
優先度ベースの意思決定フロー
- 攻撃可能な敵がいれば攻撃（HP最小の敵を優先）
- 資源マス上なら採掘
- 攻撃不可なら敵方向へ移動
- 移動不可なら待機
NPC戦略
| 項目 | 内容 |
|---|
| 指揮官選択 | ランダム |
| 生産戦略 | コスト効率重視でユニットを生産 |