一个给孩子玩的中国地图拼图游戏：把 34 个省级行政区拖回它们在地图上的家，认识祖国版图与七大地理分区。还能进一步选某个省，把它的各个地级市拼成全省地图。
- 本地运行、零安装：纯前端静态网页，双击
index.html即玩，完全离线。 - 两种玩法：拼全国（34 个省级行政区，三档难度）/ 分省拼图（选一个省，拼它的各地级市）。
- 三档难度自适应：从学龄前到小学到高手挑战，提示逐档递减。
- 发音辅助：用浏览器内置语音读出名字（无需任何音频文件）。
- 完整版图：含台湾省、港澳，并以「南海诸岛」内嵌小图体现完整国家版图。
最简单：双击项目里的 index.html，用浏览器打开即可（推荐 Chrome / Edge / Safari）。
如果某些浏览器在
file://下读音不可用，可起一个本地静态服务器再访问：# 任选其一 python3 -m http.server 8000 npx serve .然后浏览器打开
http://localhost:8000。
| 难度 | 适合 | 玩法 |
|---|---|---|
| 🐣 简单 | 3-6 岁 · 学龄前 | 按七大区一关一关来，底图标着省名、拼块带拼音、点一下会读名字，吸附范围大 |
| 🦊 中等 | 6-10 岁 · 小学 | 一次拼全 34 个省，底图只有空白轮廓，看名字找位置 |
| 🐉 困难 | 高手挑战 | 只有国界外框剑影、不显示名字、要放得准，并计时和记录放错次数 |
放置时拼块靠近正确位置会自动吸附归位；放对的省份按所属地理区上色，地图会一点点拼出来。
在首页选「🗺️ 分省拼图」，再选一个省（目前内置 26 个地级市划分规整的省/自治区，覆盖除直辖市、海南、港澳台以外的常规省份），把该省各地级市拖到正确位置拼成全省地图。
- 棋盘上只给全省最外轮廓作参考，托盘里的地市块带名称，靠形状判断它在哪儿。
- 吸附范围按各省尺度自适应（地市多的省块小、少的省块大，手感保持一致）。
- 不分关、不计时，放对会读出地市名。
pinpin-china/
├── index.html # 入口页面
├── css/styles.css # 样式
├── js/
│ ├── difficulty.js # 难度配置：全国三档 + 分省单档、七大区/地市配色
│ ├── audio.js # 浏览器语音合成读名字（含降级）
│ ├── render.js # SVG 渲染：底图/拼块/南海诸岛/动画/坐标换算（数据集驱动）
│ ├── game.js # 拖拽吸附、关卡推进、计时计分、完成判定（数据集驱动）
│ └── main.js # 入口装配：选玩法/难度/省份、通关/重玩/读音开关
├── data/
│ ├── provinces.js # 全国省界 SVG 数据（构建产物）
│ └── puzzles/ # 分省拼图数据，每省一文件（如 410000.js = 河南）
└── tools/ # 开发期工具（普通玩家无需关心）
├── build-map.mjs # 由 GeoJSON 生成 data/provinces.js（全国）
├── build-provinces.mjs # 生成 data/puzzles/*.js（分省地市）
├── check-data.mjs # 全国数据校验
├── check-puzzles.mjs # 分省数据校验
└── e2e.mjs # 真实浏览器端到端测试（可选）
运行时只依赖 index.html + css/ + js/ + data/（全国与分省数据），没有任何第三方运行时依赖。
data/provinces.js 已随仓库提供，一般无需重建。需要重新生成或跑测试时：
cd tools
npm install # 仅开发期：d3-geo（构建）、puppeteer-core（e2e，可选）
npm run build # 由 GeoJSON 投影生成 ../data/provinces.js（全国）
npm run build:provinces # 生成 ../data/puzzles/*.js（分省地市）
npm run check # 校验全国：34 个省、字段齐全、七大区合计 34、含台湾、南海诸岛
npm run check:provinces # 校验分省：省外框非空、地市字段齐全、坐标落在画布内
npm run e2e # 可选：用本机 Chrome 跑端到端（全国+分省，渲染/吸附/分关/通关）构建流程关键点（见 tools/build-map.mjs / build-provinces.mjs 注释）：
- 用
d3-geo的等积圆锥投影（China Albers）把边界投影到固定画布；分省时每个省单独按其经纬范围fitExtent投影到整张画布（省外框与该省所有地市共用同一投影，才能拼到一起）； - 修正多边形环绕方向（源数据外环为逆时针，d3-geo 需顺时针，否则会反填整张图）；
- 海南只保留海南岛本体，三沙/远海小岛归入「南海诸岛」内嵌小图，避免投影被纬度跨度拉变形。
新增分省拼图省份：在 tools/build-provinces.mjs 的 PROVINCES 表里加上 adcode 与名称，重跑 npm run build:provinces 即可——脚本会生成 data/puzzles/{adcode}.js，并自动把全部分省 <script> 标签写进 index.html 的 <!-- puzzles:start --> … <!-- puzzles:end --> 标记区间（按 adcode 升序），无需手改 HTML。注意直辖市（下辖是区）、海南（含三沙）等特殊行政结构需单独处理。
省界与国界数据来自 DataV.GeoAtlas（阿里云） 公开地理边界服务： https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
本项目仅用于个人/教育用途。地图边界以官方完整版中国地图为准（含台湾省、港澳及南海诸岛）。如用于其他用途，请遵循数据源各自的使用条款。