FIREWALL DRAW — 技術ドキュメント

プロジェクト概要

FIREWALL DRAW はマウスで壁（ファイアウォール）を描いてCPUを守るタワーディフェンスゲーム。Phaser 3 で構築され、ブラウザ上で動作する。

技術スタック

設計上の特徴

フォルダ構造

ファイル役割一覧

マネージャークラス

データ

スクリプト読み込み順序

index.html での読み込み順（依存関係に基づく）：

<!-- 1. Phaser本体（CDN） -->
<script src="https://cdn.jsdelivr.net/npm/phaser@3.80.0/dist/phaser.min.js"></script>

<!-- 2. グローバル定数・デフォルトデータ -->
<script src="js/data/DefaultData.js"></script>

<!-- 3. ユーティリティ（依存なし） -->
<script src="js/utils/SaveManager.js"></script>
<script src="js/utils/RankingManager.js"></script>
<script src="js/utils/SoundManager.js"></script>

<!-- 4. アセット管理 -->
<script src="js/PlaceholderConfig.js"></script>
<script src="js/AssetManager.js"></script>

<!-- 5. シーン（11個） -->
<script src="js/scenes/BootScene.js"></script>
... （計11ファイル）

<!-- 6. エントリーポイント（最後） -->
<script src="js/main.js"></script>

アーキテクチャ

全体構成

┌─────────────────────────────────────────────────────┐
│  index.html                                         │
│  └── main.js  (GAME_CONFIG / GameData / Phaser起動) │
└─────────┬───────────────────────────────────────────┘
          │
    ┌─────┴─────────────────────────────┐
    │          マネージャー層             │
    │  ┌──────────┐  ┌──────────────┐   │
    │  │AssetMgr  │  │ SoundMgr     │   │
    │  │画像+PH   │  │ SE再生       │   │
    │  └──────────┘  └──────────────┘   │
    │  ┌──────────┐  ┌──────────────┐   │
    │  │SaveMgr   │  │ RankingMgr   │   │
    │  │localStorage│ │ API通信      │   │
    │  └──────────┘  └──────────────┘   │
    └─────┬─────────────────────────────┘
          │
    ┌─────┴─────────────────────────────┐
    │            シーン層                 │
    │                                    │
    │  Boot → Preload → Title            │
    │                    ├→ Help          │
    │                    ├→ Data          │
    │                    └→ StageSelect   │
    │                        └→ Briefing  │
    │                            └→ Game  │
    │                      ┌─────┤ ┌────┐ │
    │                      │UI(並列)│    │ │
    │                      └─────┘ └────┘ │
    │                            └→Result │
    │                              └→Rank │
    └─────┬─────────────────────────────┘
          │
    ┌─────┴─────────────────────────────┐
    │           データ層                  │
    │  DefaultData.js  ←→  *.json       │
    │  PlaceholderConfig                 │
    └───────────────┬───────────────────┘
                    │
    ┌───────────────┴───────────────────┐
    │          外部サービス               │
    │  localStorage   Cloudflare Workers │
    │  jsDelivr CDN (Phaser 3.80.0)     │
    └───────────────────────────────────┘

シーン遷移

Title からの分岐：

マネージャーパターン

AssetManager（インスタンス型）

各シーンで new AssetManager(scene) として生成。画像の存在チェックとプレースホルダー自動生成を一元管理。

const assetManager = new AssetManager(this);

// 画像があればSprite、なければGraphicsでプレースホルダー
const sprite = assetManager.getSprite(x, y, 'enemy_bug', config);

// UIボタン生成・HPバー生成
const button = assetManager.createButton(x, y, 'btn_start', config);
const hpBar  = assetManager.createHPBar(x, y, width, height);

SaveManager（静的クラス）

全シーンから SaveManager.method() でアクセス。localStorageを使ったセーブデータ管理。

SoundManager（インスタンス型）

SE再生前に3段階チェック：

play(key) 呼び出し
  ├─ ミュート状態？ → return null
  ├─ 連打制限（50ms以内）？ → return null
  ├─ cache.audio.exists(key)？ → return null
  └─ 再生成功 → Sound オブジェクト返却

RankingManager（静的クラス）

Cloudflare Workers APIとの通信。AbortControllerで8秒タイムアウト。

POST /submit    → スコア送信
GET  /rankings  → トップ20取得

グローバル状態

GAME_CONFIG（定数）

GAME_CONFIG = {
  WIDTH: 800,  HEIGHT: 600,
  UI_TOP_HEIGHT: 50,  UI_BOTTOM_HEIGHT: 50,
  GAME_AREA_TOP: 50,  GAME_AREA_BOTTOM: 550,
  CPU_X: 400,  CPU_Y: 300
}

DIFFICULTY_SETTINGS（定数）

フォールバック戦略

シーン詳細

GameScene（メインゲームロジック）

初期化

// シーン間データ受け取り + アップグレード + キャラクター補正反映
const charMods = CHARACTER_DATA[charId].modifiers;
this.maxWalls = Math.max(1, 3 + upgrades.wall_count + charMods.maxWalls);
this.wallDuration = Math.max(2000, 5000 + (upgrades.wall_duration * 1000) + charMods.wallDuration);
this.wallDamageMultiplier = 1 + (upgrades.wall_damage * 0.2) + charMods.wallDamageMultiplier;
this.cpuMaxHp = stageData.cpuHp + (upgrades.cpu_hp * 2) + charMods.cpuHp;

壁描画システム

マウスダウン → ドラッグ開始地点記録
マウスムーブ → ライン描画（最大長制限あり）
マウスアップ → 壁オブジェクト生成
  ├─ 物理ボディ設定（静的）
  ├─ タイマー（wallDuration後に消滅）
  ├─ 壁タイプ別の色・エフェクト
  └─ SE再生（draw_wall）

イベント発火

UIScene（HUD並列実行）

GameSceneと並列実行。イベント購読でUI更新：

gameScene.events.on('cpuDamaged', (d) => this.updateHP(d.hp, d.maxHp));
gameScene.events.on('scoreChanged', (d) => this.updateScore(d.score));
gameScene.events.on('waveCleared', (d) => this.updateWave(d.wave, d.totalWaves));

ゲームデータ

キャラクター（5種類）

ステージ開始前のブリーフィング画面で選択可能。スタンダード以外はコインで解放。

キャラクター画像

各キャラクターは512×512pxの2×2グリッドスプライトシートで管理。各セル256×256pxのうち中央250×250pxを表示領域として使用。

敵データ（10種類）

基本敵（Phase 1）

特殊敵（Phase 2）

壁データ（5種類）

ステージデータ（10ステージ）

ウェーブ構造の例（ステージ1）

{
  id: 1, name: "はじまりの防衛",
  cpuHp: 10, reward: 100, targetWalls: 15,
  waves: [
    { enemies: "bug_small:5",  spawnInterval: 1500, directions: ["right","top"] },
    { enemies: "bug_small:8",  spawnInterval: 1200, directions: ["right","top","left"] },
    { enemies: "bug_small:5,bug_medium:2", spawnInterval: 1000, directions: ["right","top","left"] },
    { enemies: "bug_small:8,bug_medium:3", spawnInterval: 800,  directions: ["right","top","left","bottom"] }
  ]
}

アップグレード（4種類）

セーブデータ構造

{
  normal: {
    clearedStages: [1, 2, 3],
    highScores: { 1: 1500, 2: 2000, 3: 800 }
  },
  hard: {
    clearedStages: [],
    highScores: {}
  },
  coins: 2500,
  unlockedWalls: ["basic", "fire"],
  unlockedCharacters: ["standard", "fortress"],
  upgrades: {
    wall_duration: 2, wall_damage: 1,
    wall_count: 1, cpu_hp: 2
  },
  selectedCharacter: "fortress"
}

アセット一覧

背景画像

title_bg.png

タイトル画面背景

bg1.webp

ゲーム画面背景

thumbnail.webp

サムネイル画像

敵スプライト（10種類）

bug_small

小型バグ

HP:10 / 速度:80 / 報酬:5

bug_medium

中型バグ

HP:25 / 速度:60 / 報酬:15

worm

ワーム

HP:15 / 速度:120 / 報酬:10

trojan

トロイの木馬

HP:50 / 速度:40 / 報酬:30

ransom

ランサムウェア

HP:80 / 速度:50 / 報酬:50

bomber

ボマー

HP:20 / 壁を爆破

shield

シールド

HP:15 / 初撃無効

spawner

スポナー

HP:40 / 撃破時分裂

stealth

ステルス

HP:12 / 透明化

dasher

ダッシャー

HP:25 / 突進

CPUキャラクター スプライトシート（5種）

各キャラクター別の2×2グリッドスプライトシート（512×512, 表示領域250×250/セル）：

standard_sheet

スタンダード

バランス型

fortress_sheet

フォートレス

耐久型

multicore_sheet

マルチコア

壁攻勢型

chrono_sheet

クロノ

持久型

striker_sheet

ストライカー

攻撃型

CPU表情 汎用フォールバック（4段階）

キャラスプライトシート未配置時に使用される汎用画像：

cpu_happy

HP 70%以上

元気

cpu_worried

HP 50〜70%

不安

cpu_scared

HP 25〜50%

怯え

cpu_critical

HP 0〜25%

危機

UIパーツ

title_logo

タイトルロゴ

btn_start

スタートボタン

btn_retry

リトライボタン

btn_title

タイトルへ戻る

btn_pause

ポーズボタン

arrow_warning

敵接近警告

icon_wall_basic

基本壁アイコン

icon_wall_fire

炎の壁アイコン

icon_wall_ice

氷の壁アイコン

hp_bar_bg

HPバー背景

hp_bar_fill

HPバー充填

効果音（17個）

JSONデータファイル

プレースホルダーシステム

画像ファイルが存在しない場合、AssetManager が Phaser の Graphics API でプレースホルダーを動的生成。パラメータは PlaceholderConfig.js で定義。

敵プレースホルダー色

依存関係マトリックス