省份真实地图网页游戏设计文档

目标

创建一个可离线运行的网页小游戏。玩家点击中国地图上的真实省级行政区边界，页面立即显示对应名称，并记录已发现进度。

玩法范围

• 地图使用本地 GeoJSON 数据绘制真实省级行政区轮廓，而不是块状示意图。
• 覆盖 34 个省级行政区：省、自治区、直辖市、特别行政区和台湾地区。
• 点击任意区块后：
• 右侧信息区显示完整名称、行政类型、区域和省会/首府等信息。
• 地图区域显示简称标签，并保持已发现状态。
• 首次点击计入发现进度。
• 提供随机挑战：页面给出目标行政区，玩家点击对应区块后给出结果反馈。
• 提供重置按钮，清空已发现进度和当前挑战。

页面结构

• 顶部状态栏：游戏标题、已发现数量、完成度。
• 主区域：
• 左侧为可点击 SVG 真实边界地图。
• 右侧为当前省份信息、挑战目标、操作按钮和最近点击记录。
• 移动端布局改为上下排列，地图保持固定比例缩放。

技术方案

• 使用原生 HTML、CSS、JavaScript，不引入构建工具。
• 使用 Leaflet 渲染本地 GeoJSON 省级边界，提供拖拽、缩放和移动端触控交互。
• Leaflet 资源已放在 vendor/leaflet，页面不依赖 CDN。
• GeoJSON 以 data/china-provinces.js 形式内嵌到页面，保证直接打开 index.html 也能运行。
• 使用 localStorage 保存已发现记录，刷新后保留游戏进度。
• 无网络依赖，直接打开 index.html 即可运行。

地图数据

• 原始边界数据保存为 data/china-provinces.geojson。
• 页面运行数据保存为 data/china-provinces.js。
• 数据来源：DataV.GeoAtlas 中国地图 GeoJSON，全国省级边界 100000_full.json。

数据字段

每个省级行政区包含：

• id：稳定标识
• name：地图内显示名称
• fullName：完整名称
• type：行政类型
• capital：省会、首府或行政中心
• zone：地理区域
• adcode：用于匹配 GeoJSON feature
• color：地图填充色

验收标准

• 页面加载后能看到真实省级边界地图和 34 个可点击区域。
• 点击省级边界区域能显示对应省级行政区名称。
• 已点击区域有明显的已发现状态。
• 进度统计正确，重置后归零。
• 随机挑战能判断正确和错误点击。
• 桌面和手机宽度下文字不溢出，地图不会遮挡信息面板。