fmg-pvz-homework

# 植物大战僵尸暑假作业工作台生成器（fmg-pvz-homework）

> 一键生成「植物大战僵尸」风格的暑假作业工作台：电脑版 + 手机版两个单文件 HTML。

## 它能做什么

- **一键构建双版本**：复制 `assets/` 后运行 `node build.js`，输出「电脑版」+「手机版」两个单文件 HTML，双击即用、无外部资源依赖。
- **内置四年级上册内容**（河南平顶山，三升四）：
  - 语文：人教版四上（拼音多音字、练字笔顺、20 首古诗词背诵、快乐读书吧推荐书目 + 可阅读试读）
  - 数学：新苏教版四上（除数是整十数口算、两位数乘整十数、四则混合运算、7+7 知识卡、27 道思维训练）
  - 英语：外研社三起四上 M1–M10（89 词 + 句型 + 语法小测 + 单词跟读）
  - 运动：6 项平顶山中考体育基础训练
- **游戏化机制**：阳光奖励、僵尸逼近、9×5 花园种植、商店兑换、连续 7 天徽章；WebAudio 合成 BGM（首次交互后自动播放，可开关）；完成按钮「叮」音效。
- **双模式**：孩子模式只读；家长模式 PIN 默认 `1234`，可增删/隐藏任务。
- **数据持久化**：localStorage 本地存储（key: `pvz_homework_pds_34`）；JSONBlob 免费云同步（设置页房间码）。

## 使用流程

### 方式 A：直接生成（最常见）
1. 把 skill 的 `assets/` 复制到目标工作目录；
2. 运行 `node build.js`；
3. 得到两个 HTML，双击离线打开即可。

### 方式 B：定制后再生成
按 `references/customize.md` 修改城市、年级、学科内容、僵尸图、主题色、字体、BGM 等，再运行 `node build.js`。

### 方式 C：验证
`node check.js` —— 检查 JS 语法、函数/事件绑定完整性、数据合法性，全绿即可交付。

## 文件结构

```
assets/
  build.js                # 合并 src/ 下分片，生成电脑版 + 手机版 HTML
  check.js                # 静态自检脚本
  src/
    00-zombie-img.js      # 僵尸图片 Base64 内联
    01-head.html          # CSS 框架与样式变量
    02-body.html          # App 页面结构
    03-data-yuwen.js      # 语文数据
    04-data-math-en-sport.js  # 数学、英语、运动数据
    05-core.js            # 核心逻辑、BGM、状态、家长模式
    06-views.js           # 视图渲染、阅读器、朗读
    07-quiz.js            # 口算与答题引擎
    08-garden-shop.js     # 花园与商店
    09-parent-sync.js     # 设置与 JSONBlob 同步
references/
  customize.md            # 完整定制指引
SKILL.md                  # 本说明
```

## 输出产物

- `暑假作业工作台-电脑版.html`（桌面侧边栏布局）
- `暑假作业工作台-手机版.html`（底部 Tab 导航 + 手机分辨率适配）

## 注意事项

- 浏览器自动播放策略要求 BGM 在**首次点击/触摸页面后**才开始响，这是所有网页音频的通用限制。
- 家长模式 PIN 默认 `1234`，部署给孩子使用前建议在 `05-core.js` 中改成自己的 PIN。
- 全部图形、音效均为内联 SVG / WebAudio 合成，无需外部网络即可运行。

## 定制指引（详见 references/customize.md）

换城市/年级 · 换僵尸图 · 主题色 · 字体 · 学科数据 · BGM · 输出文件名。