交通重視の本格的な2D都市シミュレーター。TypeScriptで開発されています。
このプロジェクトは、リアルタイムの交通シミュレーションを中心とした都市建設・管理シミュレーターです。 プレイヤーは道路網を設計し、ゾーニングを行い、都市の成長と交通の流れを最適化していきます。
- ✅ グリッドベースのマップシステム (200x200セル)
- ✅ Canvas 2D レンダリング
- ✅ スムーズなカメラ制御（パン、ズーム）
- ✅ ゲームループとシミュレーションエンジン
- ✅ 道路建設（小・中・大の3種類）
- ✅ ゾーニング（住宅・商業・工業）
- ✅ ブルドーザー（破壊）
- ✅ HUD（統計表示）
- ✅ ツールバー
- ✅ キーボードショートカット
- ✅ 道路配置システムの拡張
- ✅ グラフ構造でネットワーク構築
- ✅ A*経路探索実装
- ✅ 道路種類と接続ルール
- ✅ 車両エージェント実装
- ✅ 交通流シミュレーション
- ✅ 渋滞発生ロジック
- ✅ 交通データ収集
- ✅ R/C/I ゾーン実装
- ✅ 建物成長システム（3段階）
- ✅ 需要計算システム
- ✅ 建物レベル別の視覚表現
- ✅ リアルタイム需要インジケーター
- ✅ タッチ操作サポート（タップ、スワイプ）
- ✅ ピンチズーム機能
- ✅ タッチフレンドリーなUI
- ✅ レスポンシブデザイン
- ✅ 市民エージェント（住宅に基づく市民生成）
- ✅ 通勤システム（市民と職場のマッチング）
- ✅ 経済循環（税収・支出の計算）
- ✅ 月次予算システム
- ✅ 雇用統計（失業率、求人数）
- ✅ 財政状況の可視化
- ✅ バス停・駅の配置システム
- ✅ 路線作成（バス、地下鉄、路面電車）
- ✅ 車両シミュレーション（路線上を巡回）
- ✅ 乗客システム（乗降処理）
- ✅ カバー率計算（公共交通の都市カバー範囲）
- ✅ 公共交通統計の可視化
- ✅ 複数ヒートマップモード（交通・人口・需要・土地価値）
- ✅ 時系列統計データ収集システム
- ✅ 統計グラフ描画（人口・経済・交通推移）
- ✅ 拡張統計パネル（タブ式UI）
- ✅ リアルタイムチャート可視化
- ✅ セーブ/ロード機能（LocalStorage対応）
- ✅ オートセーブ（5分間隔）
- ✅ マップテンプレート（グリッド、放射状、河川都市）
- ✅ セーブファイルのインポート/エクスポート
- ✅ レンダリング最適化（フレームスキップ、可視範囲計算）
- ✅ パフォーマンスモニタリング（FPS測定）
- ✅ 折りたたみ可能なコンパクトHUD（iPad対応）
- 1本指スワイプ: マップをパン（移動）/ 道路・ゾーン配置
- 2本指ピンチ: ズームイン/アウト
- ツールバー: 画面下部のボタンで道路やゾーンを選択
- ドラッグ: マップをパン（移動）
- マウスホイール: ズームイン/アウト
- 矢印キー: カメラ移動
- +/-: ズーム
- 1: 小道路
- 2: 中道路
- 3: 大道路
- R: 住宅ゾーン
- C: 商業ゾーン
- I: 工業ゾーン
- D: ブルドーザー
- ESC: ツール選択解除
- Space: 一時停止/再開
- L: セーブ/ロードパネル表示
- Ctrl/Cmd + P: クイックセーブ
- 0: マップクリア
- Node.js 18+
- npm
このプロジェクトはGitHub Pagesに自動デプロイされます。mainブランチまたは開発ブランチにプッシュすると、GitHub Actionsが自動的にビルドとデプロイを実行します。
# 依存パッケージのインストール
npm install
# 開発サーバー起動
npm run dev
# 型チェック
npm run type-check
# プロダクションビルド
npm run build
# ビルド結果のプレビュー
npm run previewcity-simulator/
├── src/
│ ├── core/ # コアロジック
│ │ ├── types.ts # 型定義
│ │ ├── Cell.ts # セルクラス
│ │ ├── Grid.ts # グリッドシステム
│ │ └── GameEngine.ts # ゲームエンジン
│ ├── renderer/ # レンダリング
│ │ ├── Camera.ts # カメラ制御
│ │ └── MapRenderer.ts # マップ描画
│ ├── ui/ # UI コンポーネント
│ │ ├── InputHandler.ts
│ │ └── HUD.ts
│ ├── transport/ # 交通システム（実装予定）
│ ├── buildings/ # 建物システム（実装予定）
│ ├── systems/ # ゲームシステム（実装予定）
│ ├── simulation/ # シミュレーション（実装予定）
│ ├── utils/ # ユーティリティ（実装予定）
│ └── main.ts # エントリーポイント
├── public/
│ └── assets/
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
- ✅ グリッドマップシステム
- ✅ 基本的な建物配置
- ✅ Canvas描画とカメラ制御
- ✅ 基本UI
- ✅ 道路配置システムの拡張
- ✅ グラフ構造でネットワーク構築
- ✅ A*経路探索実装
- ✅ 道路種類と接続ルール
- ✅ 車両エージェント実装
- ✅ 交通流シミュレーション
- ✅ 渋滞発生ロジック
- ✅ 交通データ収集
- ✅ R/C/I ゾーン実装
- ✅ 建物成長システム（3段階の成長レベル）
- ✅ 需要計算（人口、雇用、交通を考慮）
- ✅ 道路アクセス、電力、水道の成長条件
- ✅ 建物レベル別の視覚表現（サイズと詳細が変化）
- ✅ リアルタイム需要インジケーター表示
- ✅ 市民エージェント（年齢層、雇用状態）
- ✅ 通勤システム（住宅⇔職場のマッチング）
- ✅ 経済循環（税収/支出の月次計算）
- ✅ 雇用統計（失業率、求人追跡）
- ✅ バス路線システム（停留所配置、路線作成）
- ✅ 地下鉄/路面電車（複数種類の公共交通）
- ✅ 乗客シミュレーション（乗降処理、容量管理）
- ✅ 車両巡回システム
- ✅ カバー率分析
- ✅ 複数ヒートマップ（交通、人口、需要、土地価値）
- ✅ 時系列統計グラフ（人口、経済、交通、雇用）
- ✅ 拡張統計パネル（タブ式、リアルタイム更新）
- ✅ データ可視化システム（Canvas 2Dベース）
- ✅ セーブ/ロード機能（LocalStorage、最大5スロット）
- ✅ オートセーブ機能（5分間隔）
- ✅ セーブファイルのエクスポート/インポート（JSON）
- ✅ マップテンプレート（空、グリッド、放射状、河川）
- ✅ レンダリング最適化（可視範囲計算、フレームスキップ）
- ✅ パフォーマンス監視（FPS測定、劣化検知）
- ✅ 折りたたみ可能HUD（iPad/モバイル対応）
- 言語: TypeScript
- レンダリング: HTML5 Canvas (2D)
- ビルドツール: Vite
- テスト: Vitest (予定)
MIT License
このプロジェクトは開発中です。Issue やPull Request を歓迎します！
開発開始日: 2025-10-25 現在のPhase: Phase 8 完了！
都市シミュレーターの全8フェーズが完了しました！
- 完全な都市建設シミュレーション
- リアルタイム交通システム
- 経済と人口管理
- 公共交通ネットワーク
- 高度な分析ツール
- セーブ/ロード機能
- パフォーマンス最適化