ns2250225 / guangzhou

# 方块羊城 · Block Guangzhou
> **Minecraft 方块风格 + GTA 城市漫游 + 宝可梦拍照收集** 的广州城市观光模拟器
> 无需出门，在浏览器里逛广州：自由行走、探索景点、拍照打卡、收集图鉴、体验羊城昼夜与四季烟火。
基于 **Vue 3 + Three.js (WebGL)** 实现，按 prd.md 产品需求文档开发，纯前端运行、无需服务器。
---
## ✨ 核心特色
- 🏙️ **还原广州城市格局** — 真实经纬度投影（现实 1km ≈ 游戏 200 格），7 大城区 + 珠江水系 + 方块化地形
- 📷 **摄影收集玩法** — 多视角相机 + 滤镜 + 自动识别景点，拍满图鉴做"羊城旅行家"
- 🚇 **城市生活模拟** — 巴士、地铁传送、珠江夜游、广州塔电梯、白云索道、路人 NPC、早茶烧腊
- 🌗 **昼夜与天气** — 晴/阴/雨/台风随机变化，夜晚广州塔灯光秀与珠江实时倒影
- 📱 **移动端适配** — 虚拟摇杆 + 触屏操作，竖屏提示横屏游玩、横屏一键全屏
---
## 🗺️ 已实现内容
### 世界地图
- 真实经纬度投影，1km ≈ 200 格，核心区 12km 外按比例压缩
- 覆盖 8 个区：越秀 / 荔湾 / 天河 / 海珠 / 白云 / 番禺 / 南沙 / 黄埔
- 珠江前/后航道、西航道、狮子洋、沙基涌、荔枝湾涌
- 主干道路网与桥梁，白云山 / 越秀山 / 大夫山方块地形
### 景点（44 个，S/A/B 三级）
| 级别 | 代表景点 |
| --- | --- |
| S | 广州塔（135° 扭转塔身、观景层、旋转餐厅、摩天轮、夜间灯光秀）、陈家祠（三进三路九堂、陶塑瓦脊、灰塑木雕砖雕）、沙面（欧式建筑群、露德圣母堂、白天鹅宾馆） |
| A | 中山纪念堂、镇海楼、五羊石像、圣心大教堂、西塔、东塔、大剧院、省博、海心桥、猎德大桥、海珠桥 |
| B | 北京路千年古道、上下九骑楼、永庆坊、天河体育中心、广州东站、琶洲、中大、白云山、长隆、南沙湿地、天后宫等 |
### 玩法系统
- **玩家角色**：方块小人，男/女、肤色/发型/服装自定义，支持上传 64×64 Minecraft 皮肤；WASD + 鼠标，奔跑跳跃，第一/第三人称
- **摄影系统**（`C` 键）：第一人称 / 第三人称 / 自拍（多种姿势）、6 种滤镜（岭南复古胶片、夜广州霓虹…）、变焦，自动识别画面中的景点并解锁图鉴，照片存入相册（IndexedDB，可下载）
- **NPC 路人**：上班族 / 学生 / 老人 / 游客 / 小孩 / 街坊，会走路、聊天、拍照、买东西、等公交，粤语风格对白，可以合影
- **城市交通**：观光巴士 1 路（广州塔 ⇄ 珠江新城 ⇄ 北京路 ⇄ 陈家祠）、18 个地铁站快速传送、珠江夜游、广州塔电梯、白云索道、城市车流
- **天气与时间**：晴 / 阴 / 雨 / 台风随机变化，早晨 → 下午 → 黄昏 → 夜晚循环，夜晚窗灯、霓虹与灯光秀
- **收集与任务**：图鉴（建筑 / 食物 / 文化）、纪念品背包、新手任务链、7 个城区任务、每日任务（按日期刷新）
- **性能优化**：分块流式加载、景点按距离加载/卸载 + 远景 LOD、合并网格、三档画质设置
---
## 🚀 快速开始
 [code] 
> 构建使用相对路径（`base: './'`），`dist/` 可直接部署到任意静态托管（GitHub Pages、Vercel、Nginx 等）。
---
## 🎮 操作说明
### PC 端
| 按键 | 功能 |
| --- | --- |
| `W` `A` `S` `D` | 移动 |
| `Shift` / `空格` | 奔跑 / 跳跃 |
| 鼠标 | 旋转视角（点击画面锁定鼠标） |
| `V` | 切换第一/第三人称 |
| `C` | 进入/退出摄影模式 |
| `F` / 点击快门 | 拍照 |
| `1` – `6` | 摄影滤镜 |
| `E` | 交互 / 对话 / 乘车 |
| `T` | 时间快进 |
| `M` / `B` / `P` / `N` / `J` | 地图 / 背包 / 相册 / 图鉴 / 任务 |
| `H` / `Esc` | 帮助 / 关闭面板 |
### 移动端
- 左侧**虚拟摇杆**移动，右侧滑动旋转视角
- 右下按钮：跳 / 跑 / 交互 `E` / 摄影 📷 / 视角 👁
- **竖屏进入游戏会提示"请横屏操作"**（可选择仍要竖屏继续），旋转手机后自动进入横屏布局
- **横屏时底部菜单提供"⛶ 全屏"按钮**，一键进入全屏并锁定横屏方向（支持 Fullscreen API 的浏览器）
- 小提示：iOS Safari 不支持网页全屏接口时，全屏按钮会自动隐藏
---
## 📁 项目结构
 [code] 
---
## 🛠️ 技术栈
- **框架**：Vue 3（Composition API）
- **3D 渲染**：Three.js / WebGL
- **构建**：Vite
- **存储**：localStorage（存档）+ IndexedDB（照片）
- **风格**：Minecraft 方块美学 + MC 风格像素 UI
---
## 📌 开发计划
- [ ] 地铁站内场景与更多线路
- [ ] 更多收集要素与成就系统
- [ ] 多语言支持
- [ ] 可扩展到北京、上海、深圳等更多城市的地图框架
---
## 📄 相关文档
- prd.md — 产品需求文档（项目定位、玩法循环、区域与景点设计）