# 三國志 · 亂世英雄 — 專案總覽

> **版本：v3.0** | 最後更新：2025-05-26

## 📁 專案結構

```
0526/
├── sanguo.html          # 單人版主頁面
├── style.css            # 全域樣式（含響應式手機/平板適配）
├── data.js              # 遊戲資料定義（城池/勢力/武將/建築/兵種/地圖座標）
├── game.js              # 單人版完整遊戲邏輯（七大系統 + 中國輪廓地圖）
├── multiplayer.html     # 多人對戰版主頁面
├── multiplayer-game.js  # 多人版客戶端邏輯（Socket.IO 連線、大廳、聊天）
├── multiplayer-map.js   # 多人版地圖繪製
├── server.js            # Node.js 多人伺服器（Express + Socket.IO）
├── package.json         # npm 依賴配置
├── package-lock.json    # npm 鎖定版本
├── start-server.ps1     # Windows 快速啟動腳本
├── guide.html           # 新手完整教學指引頁面
└── docs/                # 📖 開發文檔（本資料夾）
    ├── README.md         # 專案總覽（本文檔）
    ├── DEPLOY.md         # 部署指南
    ├── ARCHITECTURE.md   # 架構與資料流
    ├── CHANGELOG.md      # 更新歷程
    ├── AI_GUIDE.md       # 給 AI 助手的開發指引
    └── GAMEPLAY.md       # 遊戲系統完整說明
```

## 🎮 兩種遊戲模式

| 模式 | 入口 | 技術 | 對手 |
|------|------|------|------|
| **單人版** | `sanguo.html` | 純前端 HTML5 + Canvas + LocalStorage | AI（魏/蜀/吳） |
| **多人版** | `multiplayer.html` | Node.js + Socket.IO 即時連線 | 真實玩家（2-4人） |

## 🚀 快速開始

### 單人版
```
直接雙擊 sanguo.html 用瀏覽器打開
```

### 多人版
```bash
npm install
node server.js
# 瀏覽器打開 http://localhost:3000/multiplayer.html
```

## 🔧 技術棧

| 層級 | 技術 |
|------|------|
| 前端 | HTML5, CSS3 (Flexbox/Grid), JavaScript ES6+ |
| 地圖 | Canvas 2D 繪圖（中國輪廓 + 黃河/長江） |
| 儲存 | 瀏覽器 LocalStorage |
| 多人後端 | Node.js + Express + Socket.IO |
| 依賴 | Font Awesome 6.5（圖示）, Animate.css（動畫） |
| 部屬 | 寶塔面板 / Nginx 反向代理 |

## 📋 檔案大小參考

| 檔案 | 大小 | 行數 | 說明 |
|------|------|------|------|
| style.css | ~16 KB | ~390 | 響應式樣式 |
| data.js | ~6 KB | ~150 | 靜態遊戲資料 |
| game.js | ~55 KB | ~800 | 單人版核心邏輯 |
| server.js | ~8 KB | ~300 | 多人伺服器 |
| multiplayer.html | ~6 KB | ~200 | 多人版HTML |
| multiplayer-game.js | ~12 KB | ~440 | 多人版客戶端 |
| guide.html | ~30 KB | ~300 | 教學頁面 |

## 📞 支援

- 遊戲內點「📖 遊戲說明」查看內建說明
- 主選單點「📖 新手教學」查看完整圖文教學
- 主選單點「🌐 多人對戰」進入多人模式