世界游戏地图图鉴
已完成一个完全在浏览器本地运行的世界游戏地图与数字博物馆：以平面地图、3D 地球和国家文字地图三种视角，浏览 176 款游戏与它们所属地区的脉络。
Web App地图可视化数字博物馆JavaScript
Current verification
93/93 自动化测试通过
为什么做这个项目
想回答一个问题：游戏从来不是孤立的作品，它们成片生长在特定的地区与文化里。把 176 款游戏放回世界地图上，能看清每个地区的游戏文化重心和相互影响，而不是只看一份扁平的推荐榜单。
我解决了什么问题
- 176 款游戏的地区归属与元数据量大，手工维护容易出错和不一致。
- 平面地图、3D 地球、右栏详情三种视图各自维护状态，容易互相打架。
- 319 张封面资源直接用原图体积太大，拖累首屏加载。
我的实现方式
使用的 AI
GPTClaudeDeepSeek
使用的工具
JavaScriptCSS3D 地球WebP
工作流程
- 01整理 176 款游戏的地区归属与元数据，建立统一的单一数据源。
- 02实现平面地图（Natural Earth）与 3D 地球两种浏览视角，与右栏详情和 URL 状态双向同步。
- 03制作图鉴筛选、馆藏详情、历史时间线、影响力榜单与探索护照等板块。
- 04把 319 个资源处理成响应式 WebP，适配桌面与移动端布局。
项目截图
遇到的问题
三种视图（平面地图 / 立体地球 / 文字地图）各自维护状态，切换时容易不同步。
解决：以 URL 为唯一事实来源，所有视图共享同一套状态读写，改一处全联动。
319 张封面图直接用原图体积太大。
解决：统一转成响应式 WebP，按设备尺寸加载，兼顾清晰度与体积。
项目结果
56 个地区节点、9 个大区、47 个国家/地区的完整图鉴可以在浏览器里流畅浏览；本次重新运行 93 项测试全部通过，覆盖数据、地图、响应式、可访问性与发布流程。
下一步
- 补充更多游戏的收录与地区考证。
- 打磨探索护照的进度体系，让浏览本身更有目标感。