档案文献害虫识别与防治智慧教学工具
项目代号:LibGuard
文档版本:v2.0
编写日期:2026-04-16
最后更新:2026-04-27
面向读者:项目策划、前端开发、美术设计
参考资料:《纸质书籍与档案病虫害识别及防治指南 v2.0》
一、项目概述
1.1 项目简介
《档案文献害虫识别与防治智慧教学工具》是一款以中国图书馆与档案馆虫害防治知识为核心的科普向小程序游戏。玩家扮演一名新入职的"古籍保护师",通过观察、鉴定、操作工具三大核心流程,在不同难度的关卡中学习如何识别各类书籍病虫害,并使用正确的物理或化学手段进行防治。
1.2 核心卖点
- 科普深度:完整覆盖 IPM(综合虫害管理)流程,知识来源于真实学术文献
- 趣味交互:拖拽操作、放大镜查看、模拟喷药/冷冻等动作反馈极具沉浸感
- 成就收集:渐进式解锁"图鉴"和"防治工具库",激励反复游玩
- 无网络依赖:核心关卡可离线游玩,适合博物馆、高校的线下科普场景
1.3 目标用户
| 群体 | 场景应用 |
|---|---|
| 图书馆从业人员 | 上岗前培训工具 |
| 高校文献保护专业学生 | 实践辅助课程 |
| 对古籍/文物保护感兴趣的普通大众 | 泛知识科普 |
| 博物馆参观体验 | 线下互动展览配套 |
1.4 技术选型
| 指标 | 选型 | 说明 |
|---|---|---|
| 开发框架 | 微信小程序原生框架 | WXML + WXSS + TypeScript,无需第三方引擎 |
| 核心语言 | TypeScript | 类型安全,编译为 JS 运行 |
| 屏幕方向 | 横屏锁定(landscape) | app.json 中 pageOrientation: "landscape" |
| 关卡架构 | 数据驱动 | 每个关卡为独立 level-Lx-xx.ts 配置文件,统一注册到 levels.ts |
| 碰撞检测 | DOM 查询(createSelectorQuery) | 查询实际渲染位置,不依赖硬编码坐标 |
| 美术渲染 | CSS 纯视觉道具 + CSS 动画 | 书籍、温湿度仪、插座等均为纯 CSS 构建 |
| 数据存储 | wx.setStorageSync | 本地存储关卡进度(libguard-progress) |
| AI 对话提示(可选) | 微信云函数 + LLM API | 用于关卡内浮动提示气泡(科普说明) |
二、美术风格
2.1 总体风格定义
「新中式博物馆插画风」
参考故宫文创的现代国潮插画 + 国家图书馆古籍陈列的实物照感。整体色调沉稳、有质感,但通过高亮色强调互动元素,确保不显沉闷。
- 不做:像素风、Q版卡通、赛博风格
- 做:手绘线稿质感的插图,配以宣纸/牛皮纸的视觉底纹
2.2 色彩系统
| 用途 | 颜色 | 说明 |
|---|---|---|
| 主题色 | #8B4C20(深棕木色) | 书架、标题框基调 |
| 副主题色 | #D4A853(烫金色) | 章节标题、装饰纹样 |
| 背景色 | #F5EDD6(宣纸米白) | 游戏主界面背景 |
| 警告/危险 | #C0392B(朱红) | 虫害爆发警告、错误操作提示 |
| 正确反馈 | #2E7D32(墨绿) | 操作正确、关卡完成 |
| UI中性色 | #3D2B1F(墨黑) | 正文、标注 |
| 互动高亮 | #F0B429(明黄) | 可拖拽工具的描边、选中高亮 |
2.3 UI 字体
| 用途 | 字体 | 说明 |
|---|---|---|
| 标题 | 华文楷体 / 思源宋体 Bold | 中文古典气质 |
| 正文科普文案 | 思源黑体 Regular | 清晰易读(最小字号不低于 24px) |
| 数值/数据 | DIN Alternate(英文数字) | 数值展示如温度、湿度、时间倒计时 |
2.4 主要美术素材清单
以下
[AI生成]标注的可作为首版占位图,后续替换为科学摄影图
| 素材类型 | 内容描述 | 来源建议 |
|---|---|---|
| 背景场景图 | 书库长廊、古籍修复台、档案室 | 原创插画 |
| 病虫害插图(共 17 种) | 书虱、烟草甲、饼干甲、花斑皮蠹、家具窃蠹、蠹鱼、灰蠹鱼、白蚁(工蚁/兵蚁/分飞蚁)、蟑螂(成虫/若虫)、褐粉蠹、毛皮蠹、蛛甲、幕衣蛾成虫/幼虫 | CC 授权图 + Wikimedia |
| 病症特写图 | 书脊蛀孔、霉斑、鼠咬痕、细木粉、刚毛脱落痕迹等 | 原创插画 + 实物照 |
| 防治工具图标(共 15 件) | 冷冻柜、充氮袋、粘虫黄板、乙醇棉球、硅藻土瓶、毒饵站、HEPA 吸尘器、喷雾瓶、温湿度仪等 | 原创美术 |
| 昆虫骨骼动画 | 蠹鱼爬行、书虱聚集、白蚁蚁群 | Spine 骨骼动画(4-6帧循环) |
| UI 元件 | 按钮、框体、弹窗、进度条 | 原创美术(国潮风) |
| 加载页封面 | 古籍局部特写 + 放大镜 | 原创插画 |
三、游戏结构与功能模块
主页
├── 【A】图鉴库(百科图鉴)
│ ├── 昆虫图鉴(17种,可解锁/黑影)
│ ├── 真菌图鉴(5种)
│ └── 细菌/螨/鼠类图鉴
├── 【B】实战演练(核心关卡)
│ ├── 第一章:初识病虫害(物理防治)
│ ├── 第二章:对症下药(化学防治)
│ ├── 第三章:新书入库(IPM流程)
│ └── 第四章:馆长的考验(综合挑战)
├── 【C】防治手册(工具百科)
└── 【D】我的成就
四、关卡详细设计
关卡体系覆盖《防治指南》中全部害虫种类。每种害虫独立一关,按知识递进分 6 章共 27 关。
细菌类(B-01/B-02)因不可视化交互,作为知识卡片在相关关卡中附带解锁。
4.1 第一章:书架守卫(常见蛀纸虫 · 物理防治入门)
故事背景:你是第一天上班的新保护师,老师傅沈槐说:"先学会看,再学会动手。"
| 关卡ID | 关卡名 | 害虫 | 核心知识点 | 首选防治 | 难度 |
|---|---|---|---|---|---|
| L1-01 | 书缝里的白点 | I-01 书虱 | 高湿→白色小点聚集→书虱 | 充氮缺氧+控湿 | ⭐ |
| L1-02 | 银光一闪 | I-06 蠹鱼 | 银白色纺锤体+纸面淀粉刮食 | 降湿RH<60%+硅藻土 | ⭐ |
| L1-03 | 灰色的危机 | I-06b 灰蠹鱼 | 对比普通蠹鱼,耐低湿(RH55%仍存活) | 冷冻-20°C/7天 | ⭐⭐ |
| L1-04 | 木粉从哪里来 | I-05 家具窃蠹 | 圆形出孔+细木粉→木蠹虫 | HEPA清扫+粘虫板 | ⭐ |
| L1-05 | 细末的秘密 | I-09 褐粉蠹 | 大量细末状木粉→褐粉蠹(vs窃蠹) | HEPA+硫酰氟熏蒸 | ⭐⭐ |
4.2 第二章:甲虫克星(蛀食型甲虫 · 物化结合)
故事背景:书库深处传来了异样的声音,这些"安静的破坏者"正在啃穿每一页历史。
| 关卡ID | 关卡名 | 害虫 | 核心知识点 | 首选防治 | 难度 |
|---|---|---|---|---|---|
| L2-01 | 弯曲的隧道 | I-02 烟草甲 | 红褐色2-3mm,幼虫蛀食留不规则隧道 | 冷冻+硫酰氟 | ⭐⭐ |
| L2-02 | 杂食者的痕迹 | I-03 饼干甲 | 与烟草甲对比鉴定,食性更杂 | 冷冻+硫酰氟 | ⭐⭐ |
| L2-03 | 毛茸茸的访客 | I-04 花斑皮蠹 | 幼虫密被褐色刚毛,蛀食皮革 | 冷冻-20°C/7天 | ⭐⭐ |
| L2-04 | 皮革的噩梦 | I-10 毛皮蠹 | 蛀食皮革装订,与花斑皮蠹对比 | 冷冻+拟除虫菊酯 | ⭐⭐ |
| L2-05 | 伪装者 | I-11 蛛甲 | 成虫球形似蜘蛛,纸箱内繁殖迅速 | 冷冻/充氮+拟除虫菊酯 | ⭐⭐⭐ |
4.3 第三章:蛾类与社会性害虫(群体性威胁)
故事背景:有些害虫不是独行侠,它们成群结队、有组织地摧毁文献。
| 关卡ID | 关卡名 | 害虫 | 核心知识点 | 首选防治 | 难度 |
|---|---|---|---|---|---|
| L3-01 | 金色的入侵者 | I-12 幕衣蛾 | 幼虫在丝管中蛀食蛋白质材料 | 冷冻+拟除虫菊酯 | ⭐⭐ |
| L3-02 | 看不见的军队 | I-07 白蚁 | 群体蛀食,泥路+多孔,极强破坏力 | 物理屏障+氟虫腈毒饵站 | ⭐⭐⭐ |
| L3-03 | 夜晚的访客 | I-08 蟑螂 | 棕色粪便+呕吐污斑,若虫/成虫识别 | 粘虫板+吡虫啉凝胶毒饵 | ⭐⭐ |
| L3-04 | 巨大的威胁(上) | R-01 小家鼠 | 啮咬痕+鼠粪+尿渍,巢穴材料 | 粘鼠板+封堵通道 | ⭐⭐⭐ |
| L3-05 | 巨大的威胁(下) | R-02 褐家鼠 | 对比小家鼠,体型更大破坏更广 | 捕鼠夹+抗凝血剂毒饵站 | ⭐⭐⭐ |
4.4 第四章:霉菌危机(真菌与微生物防治)
故事背景:梅雨季来了,空气中弥漫着潮湿的气息。霉菌孢子正在寻找下一个宿主。
| 关卡ID | 关卡名 | 害虫 | 核心知识点 | 首选防治 | 难度 |
|---|---|---|---|---|---|
| L4-01 | 蓝绿色的警告 | F-01 青霉菌 | 蓝绿色霉斑,产有机酸腐解纤维 | 75%乙醇擦拭+控温控湿 | ⭐⭐ |
| L4-02 | 黑色的侵蚀 | F-02 曲霉菌 | 黑/黄绿色霉斑,部分产毒素 | 控湿+百里香酚熏蒸 | ⭐⭐ |
| L4-03 | 褐色的孢子 | F-03 链格孢菌 | 黑褐色孢子斑,污染文字区域 | 紫外灭菌+控湿 | ⭐⭐ |
| L4-04 | 纤维的崩溃 | F-04 木霉 | 分解纤维素,纸张强度下降 | 控温T<18°C+控湿RH<55% | ⭐⭐⭐ |
| L4-05 | 粘连的书页 | F-05 根霉 | 扩散极快,粘连多页书页 | 紧急隔离+甲醛熏蒸 | ⭐⭐⭐ |
附带解锁:L4-04 通关后解锁知识卡片「B-01 纤维素分解菌」;L4-05 通关后解锁「B-02 硫酸盐还原菌」。
4.5 第五章:微小的居民(螨类防治)
故事背景:它们肉眼几乎看不见,但放大镜下的世界让人头皮发麻。
| 关卡ID | 关卡名 | 害虫 | 核心知识点 | 首选防治 | 难度 |
|---|---|---|---|---|---|
| L5-01 | 看不见的居民 | A-01 粉螨 | 取食霉菌和有机物,大量污染文献 | 冷冻-20°C/72h+控湿 | ⭐⭐ |
| L5-02 | 过敏的元凶 | A-02 尘螨 | 不直接蛀纸但引发过敏,棉麻封面 | HEPA清洁+降湿 | ⭐⭐ |
| L5-03 | 螨中之螨 | A-03 革螨 | 捕食性螨,大量存在预示生态失衡 | 综合环境治理 | ⭐⭐⭐ |
4.6 第六章:馆长的考验(综合挑战)
故事背景:年度大检查!书库里同时出现了多种虫害,考验你的综合判断力。
| 关卡ID | 关卡名 | 玩法 | 难度 |
|---|---|---|---|
| L6-01 | 新书入库 | IPM完整流程模拟(隔离→检查→处理→入库) | ⭐⭐⭐ |
| L6-02 | 多线作战 | 同时处理4个虫害区域,按优先级分配行动点 | ⭐⭐⭐⭐ |
| L6-03 | 馆长钦点 | 随机组合害虫+计时防御,终极挑战 | ⭐⭐⭐⭐⭐ |
| L6-04 | 百年守护 | 经营模式:维持书库零虫害运转30天(游戏内时间) | ⭐⭐⭐⭐⭐ |
关卡总览(6章27关)
| 章节 | 主题 | 关卡数 | 覆盖害虫 |
|---|---|---|---|
| 第一章 | 常见蛀纸虫 | 5 | I-01, I-06, I-06b, I-05, I-09 |
| 第二章 | 蛀食型甲虫 | 5 | I-02, I-03, I-04, I-10, I-11 |
| 第三章 | 社会性害虫 | 5 | I-12, I-07, I-08, R-01, R-02 |
| 第四章 | 霉菌微生物 | 5 | F-01~F-05 (+B-01, B-02知识卡) |
| 第五章 | 螨类防治 | 3 | A-01, A-02, A-03 |
| 第六章 | 综合挑战 | 4 | 全部害虫随机组合 |
| 合计 | 27 | 25种害虫 + 2种细菌 |
五、核心功能系统设计
5.1 交互系统(双模式)
游戏支持点选模式和拖拽模式两种交互方式,确保不同设备和习惯的玩家都能流畅操作:
模式 A:点选模式(推荐)
- 玩家点击左侧工具栏中的工具 → 工具进入"选中"状态(金色高亮边框)
- 玩家点击场景中高亮闪烁的目标区域 → 触发操作判定
模式 B:拖拽模式
- 玩家长按工具并拖拽到场景区域
- 移动超过 20px 后才进入拖拽模式,显示跟随手指的幽灵图标
- 松手时通过
createSelectorQuery查询实际 DOM 位置做碰撞检测 - 若未命中任何区域 → 自动降级为"工具选中"状态(而非报错)
碰撞检测原理
// 查询实际渲染的 zone 元素位置,不依赖硬编码坐标
const ZONE_MAP = [
{ selector: '.zone.book-area', zone: 'book_area' },
{ selector: '.zone.book-spine', zone: 'book_spine_gap' },
{ selector: '.zone.env-meter', zone: 'env_meter' },
{ selector: '.zone.power-socket', zone: 'power_socket' },
];
const query = this.createSelectorQuery();
ZONE_MAP.forEach((z) => query.select(z.selector).boundingClientRect());
query.exec((results) => {
// 遍历 results 比对 dropX/dropY 是否落入 rect 区域
});
操作判定规则:
- 正确工具 + 正确区域 → 成功动画 + 科普弹窗 + 推进步骤
- 错误工具 → 关卡配置的
wrongToolMessages对应教学提示(扣1星) - 正确工具 + 错误区域 → "请把工具拖到高亮区域"(扣1星)
- 最低保底1星,不会导致完全失败
5.2 图鉴系统
- 图鉴共 30 条目(17昆虫 + 5真菌 + 3螨/细菌 + 2鼠类 + 3工具精讲条目)
- 未解锁条目显示为黑影轮廓 + 问号
- 解锁方式:在关卡中首次"鉴定成功"对应虫害
- 图鉴详情页包含:高清插图、中文名、学名、危害材料、发育阶段对应表(简化版)、防治关键词
5.3 知识弹窗系统
弹窗类型A:[成就型] 首次正确操作后弹出
- 标题:「你发现了!- 家具窃蠹」
- 内容:简短科普段落(约80字以内)
- 底部:「加入图鉴 ✅」按钮
弹窗类型B:[纠错型] 错误操作后弹出
- 标题:「不对哦~」
- 内容:解释为什么该操作不适用,并给关键提示
- 底部:「明白了,重试」按钮
弹窗类型C:[任务提示型] 关卡开始/卡关时自动出现
- 样式:纸条便签风格,可随时关闭
- 内容:操作引导提示
5.4 环境参数监测系统(温湿度 HUD)
- 游戏界面右上角始终显示当前场景的温度(°C)和湿度(RH%)
- 数值会随关卡剧情动态变化(如梅雨季节剧情 → 湿度升至 80% → 霉菌孢子扩散警告)
- 玩家可解锁并放置"温湿度传感器"道具(用于某些关卡),开启监测状态
5.5 游戏货币与成就
| 货币/资源 | 获取方式 | 用途 |
|---|---|---|
| 书签(🔖) | 关卡通关奖励 | 购买"防治工具升级包"皮肤 |
| 朱砂印章(🏮) | 满星通关特定关卡 | 解锁隐藏图鉴条目 |
| 成就名称 | 解锁条件 |
|---|---|
| 初出茅庐 | 完成第一章所有关卡 |
| 火眼金睛 | 连续5次首次鉴定全部正确 |
| 稳中求胜 | 任意关卡不触发任何错误提示通关 |
| 古籍守护者 | 收集所有图鉴条目 |
| 馆长钦点 | 第四章满星通关 |
| 百年无虫 | 在经营模式中保持书库零虫害30天(游戏内时间) |
六、数据配表设计(JSON结构)
6.1 病虫害配表 pests.json
{
"pests": [
{
"id": "I-01",
"name": "书虱",
"scientificName": "Liposcelis spp.",
"category": "insect",
"targets": ["书籍", "档案纸张", "装订材料"],
"symptoms": ["书缝密集白色小点", "纸张表面细小损伤"],
"damageSpeed": 2,
"minSurvivalRH": 70,
"iconPath": "cocos-js/assets/BookIconBundle/booklice",
"atlasPath": "images/pests/booklice_adult.jpg",
"stages": ["egg", "nymph_3_6", "adult"],
"unlockInLevel": "L1-03"
}
]
}
6.2 工具配表 tools.json
{
"tools": [
{
"id": "freeze_cabinet",
"name": "低温冷冻柜",
"category": "physical",
"icon": "tools/freeze_cabinet.png",
"description": "-20°C 持续冷冻至少7天(168小时),可消灭所有昆虫发育阶段",
"validPestIds": ["I-01","I-02","I-03","I-04","I-05","I-06","I-06b","A-01","A-02"],
"operationSteps": ["密封装袋", "入冻", "回温24h后开封"],
"warningIf": {
"directOnPhoto": "照片须先密封防凝露再入冻"
}
}
]
}
6.3 关卡配表 levels.json
{
"levels": [
{
"id": "L1-01",
"chapter": 1,
"name": "书架的异样",
"scene": "bookshelf_scene",
"bundleName": "BeginBundle",
"infestations": [
{
"zoneId": "shelf_bottom",
"pestId": "I-05",
"stage": "adult",
"symptoms": ["round_holes", "fine_wood_dust"]
}
],
"clueZones": ["shelf_bottom"],
"availableTools": ["hepa_vacuum","adhesive_trap","ethanol_spray","nitrogen_bag","freeze_cabinet"],
"correctTools": ["hepa_vacuum","adhesive_trap"],
"wrongToolFeedback": {
"ethanol_spray": "乙醇适合处理霉斑,对蛀木昆虫效果有限,且挥发后会留下气味影响档案"
},
"quiz": {
"question": "书架底部的圆形小孔和白色粉末说明了什么?",
"options": ["F-01:霉菌侵蚀","R-01:鼠类啃咬","I-05:家具窃蠹","I-07:白蚁群落"],
"correctAnswer": "I-05"
},
"starConditions": {
"3star": {"firstGuessCorrect": true, "noWrongTool": true},
"2star": {"firstGuessCorrect": false, "noWrongTool": true},
"1star": {}
},
"unlockPestId": "I-05",
"reward": {"bookmarks": 50}
}
]
}
七、场景与 UI 设计规范
7.1 主页界面
┌─────────────────────────────────────┐
│ 《守护古籍》 │
│ [烫金Logo + 古籍纹样背景] │
│ │
│ [▶ 开始挑战] [📖 图鉴库] │
│ [🛠 防治手册] [🏆 我的成就] │
│ │
│ 进度:第一章 3/5 关 ⭐⭐☆ │
│ 书签:🔖 120 印章:🏮 3 │
└─────────────────────────────────────┘
7.2 关卡场景布局 — 横屏沉浸式方案B
采用全屏沉浸式场景设计,横屏锁定(16:9),UI 元素以浮层形式叠加在场景之上。
┌────────────────────────────────────────────────────────────────┐
│ [L1-01·2/7] [🌡22°C] [💧78%] [★★☆] │ ← 顶栏浮层
│ │
│ ┌───────┐ ┌───────────┐ │
│ │ ◂ 工具 │ ┌─────────────────────┐ │ 处置记录 │ │
│ │┌─┬──┐ │ │ │ │ ✅观察线索 │ │
│ ││镜│湿│ │ │ 📖 古籍道具 │ │ ✅读取环境 │ │
│ │├─┼──┤ │ │ (检疫垫上的书) │ [仪表] │ ⬜鉴定害虫 │ │
│ ││干│封│ │ │ │ │ ⬜隔离文献 │ │
│ │├─┼──┤ │ └─────────────────────┘ │─────────── │ │
│ ││吸│醇│ │ [插座] │ 当前任务... │ │
│ │├─┼──┤ │ │ 💡导师提示 │ │
│ ││板│冻│ │ │ ═══进度条══ │ │
│ │└─┴──┘ │ └───────────┘ │
│ └───────┘ │
│ ← 全屏木桌场景(暖色调聚光灯效果) → │
└────────────────────────────────────────────────────────────────┘
↑ 横屏锁定 landscape
布局规则:
| 区域 | 位置 | 尺寸 | 说明 |
|---|---|---|---|
| 全屏场景 | 整个屏幕 | 100vw × 100vh | 木桌+检疫垫+书籍+温湿度仪+插座 |
| 顶栏 | 左上 + 右上 | 浮层 | 关卡ID+步数、温湿度药丸、星级评分 |
| 左侧工具栏 | 左侧垂直居中 | 130px(展开)/40px(收起) | 2×4 网格,可收起,毛玻璃背景 |
| 右侧综合面板 | 右侧垂直居中 | 170px | 上:处置记录标签;下:任务+导师+进度条 |
| 放大镜面板 | 屏幕正中 | 110px | 步骤触发时悬浮显示 |
| 引导指针 | 目标区域旁 | 浮动动画 | 金色圆点+文字提示气泡 |
视觉道具(纯 CSS 构建):
| 道具 | CSS 实现要点 |
|---|---|
| 木桌表面 | linear-gradient 叠加细网格线模拟木纹 |
| 古籍书本 | .page flex 布局 + .book-spine-prop 红色书脊 |
| 检疫垫 | 深绿 #1B3D32 + 内嵌边框 |
| 温湿度仪 | 奶白底 #F8EFD8 + 色条指示器 |
| 插座 | 金色面板 + 双孔 |
| 虫点 | 4px 圆点 + CSS @keyframes bugDrift 蠕动动画 |
| 隔离/充氮包裹 | .book-prop::after 边框+半透明背景色切换 |
7.3 图鉴详情页
┌──────────────────────────────────┐
│ ← 返回 书虱(啮虫) │
│ │
│ [高清插图] 编号:I-01 │
│ 学名:Liposcelis │
│ 危害:纸张/浆糊 │
│ │
│ ── 发育阶段 ── │
│ 卵 → 若虫(3-6龄) → 成虫 │
│ │
│ ── 危险环境阈值 ── │
│ 爆发条件:28°C + RH>80% │
│ │
│ ── 首选防治 ── │
│ ❄️ 冷冻(-20°C/7天) │
│ 🫧 缺氧充氮(3-4周) │
└──────────────────────────────────┘
八、音频设计
| 类型 | 描述 | 风格参考 |
|---|---|---|
| 主题曲 | 主页背景音乐,约90秒循环 | 古筝 + 轻微弦乐,现代国风 |
| 关卡背景音 | 书库环境音(翻书声、空调运转声、静谧) | 白噪音+环境声层叠 |
| 操作音效 | 拖拽拿起(轻微纸张音)、放下(轻笃声)、冷冻机运转声 | 拟真 |
| 正确反馈音 | 清脆的书签声 "叮" | 积极、轻快 |
| 错误反馈音 | 轻微警示"咚" | 不刺耳,不挫伤积极性 |
| 虫害发现音 | 微弱的虫鸣声(场景化) | 环境沉浸 |
| 关卡完成音 | 古风短旋律庆祝音效 | 民族乐器 |
九、开发里程碑计划
| 阶段 | 状态 | 交付物 |
|---|---|---|
| M0:原型验证 | ✅ 已完成 | L1-01 可玩原型,验证点选+拖拽交互 |
| M1:核心架构 | ✅ 已完成 | 数据驱动关卡系统、章节选择、反馈弹窗、结算页 |
| M2:第一章 | ✅ 已完成 | L1-01~L1-05 全部关卡配置+可玩 |
| M3:第二·三章 | ✅ 已完成 | L2-01~L2-05, L3-01~L3-05 全部关卡配置 |
| M4:第四·五章 | ✅ 已完成 | L4-01~L4-05, L5-01~L5-03 全部关卡配置 |
| M5:横屏UI重构 | ✅ 已完成 | 沉浸式方案B横屏布局,碰撞检测改为 DOM 查询 |
| M6:第六章 | 🔲 待开发 | L6-01~L6-04 综合挑战关卡逻辑 |
| M7:视觉资产 | 🔲 待开发 | 各害虫对应图片资源、Spine动画、音效 |
| M8:测试上线 | 🔲 待开发 | 微信审核、性能优化、Bug修复、正式发布 |
十、技术注意事项
- 包体控制:微信小程序主包 ≤ 2MB,图片资源使用
.webp格式。 - 关卡架构:每个关卡为独立
level-Lx-xx.ts文件,通过levels.ts注册表统一管理。新增关卡只需创建配置文件+注册即可。 - 碰撞检测:使用
createSelectorQuery().boundingClientRect()查询.zone元素实际渲染位置,不依赖硬编码坐标。布局变化时碰撞自动适配。 - 横屏支持:
app.json配置pageOrientation: "landscape",全局横屏锁定。UI 布局使用百分比定位适配不同横屏分辨率。 - 交互兼容:支持点选(点工具→点区域)和拖拽(长按拖动)两种模式。拖拽阈值 20px,未命中区域自动降级为点选。
- 微信 API 集成:
wx.setStorageSync:本地存储关卡进度(libguard-progress)wx.redirectTo:关卡间跳转(章节选择→游戏→结算)wx.shareAppMessage:分享通关结果
- 无障碍支持:所有弹窗文字对比度满足 WCAG AA 标准。
10.1 关卡数据接口规范
interface LevelConfig {
id: string; // 如 'L1-01'
title: string; // 关卡标题
speaker: string; // 导师名
temperature: number; // 初始温度
humidity: number; // 初始湿度
sceneLabel: string; // 场景标签文字
meterLabel: string; // 温湿度仪标签
socketLabel: string; // 插座/设备标签
bugCount: number; // 虫点数量
openingTitle: string; // 开场弹窗标题
openingMessage: string; // 开场弹窗内容
openingButton: string; // 开场按钮文字
tools: ToolItem[]; // 可用工具列表
steps: StepDef[]; // 步骤序列
quiz: QuizConfig; // 鉴定题配置
zoneRects: Record<string, HitRect>; // 碰撞矩形(已弃用,保留兼容)
wrongToolMessages: Record<string, string>; // 错误工具提示
resultSummary: string; // 结算总结
unlockPestId: string; // 解锁害虫图鉴ID
unlockPestName: string; // 解锁名称
unlockPestDesc: string; // 解锁描述
}
附录 A:病虫害与防治工具对照速查表
| 害虫编号 | 名称 | 危害等级 | 首选物理方法 | 首选化学方法 |
|---|---|---|---|---|
| I-01 | 书虱 | ⭐⭐ | 充氮缺氧 | 苯氧威乳剂 |
| I-02 | 烟草甲 | ⭐⭐⭐ | 冷冻(-20°C/7天) | 硫酰氟熏蒸 |
| I-03 | 饼干甲 | ⭐⭐⭐ | 冷冻(-20°C/7天) | 硫酰氟熏蒸 |
| I-04 | 花斑皮蠹 | ⭐⭐ | 冷冻 | 拟除虫菊酯 |
| I-05 | 家具窃蠹 | ⭐⭐⭐ | HEPA清扫+粘虫板 | 硫酰氟熏蒸 |
| I-06 | 蠹鱼 | ⭐⭐ | 降湿RH<60% | 硅藻土/溴氰菊酯 |
| I-06b | 灰蠹鱼 | ⭐⭐⭐ | 冷冻(-20°C) | 硅藻土(降湿效果有限) |
| I-07 | 白蚁 | ⭐⭐⭐⭐⭐ | 物理屏障 | 氟虫腈毒饵站 |
| I-08 | 蟑螂 | ⭐⭐⭐ | 粘虫板+封堵缝隙 | 吡虫啉凝胶毒饵 |
| I-09 | 褐粉蠹 | ⭐⭐ | HEPA清扫 | 硫酰氟熏蒸 |
| I-10 | 毛皮蠹 | ⭐⭐ | 冷冻 | 拟除虫菊酯 |
| I-11 | 蛛甲 | ⭐⭐ | 冷冻/充氮 | 拟除虫菊酯 |
| I-12 | 幕衣蛾 | ⭐⭐ | 冷冻 | 拟除虫菊酯 |
| F-01~05 | 霉菌(各型) | ⭐⭐⭐ | 控温控湿(T<18°C,RH<55%) | 百里香酚/甲醛熏蒸 |
| A-01 | 粉螨 | ⭐⭐ | 冷冻(-20°C/72h) | 阿维菌素 |
| R-01~02 | 鼠类 | ⭐⭐⭐⭐ | 粘鼠板/捕鼠夹+封堵 | 抗凝血剂毒饵(封闭站) |
本文档所有昆虫知识数据均来源于《纸质书籍与档案病虫害识别及防治指南 v2.0》,学术来源见原文档参考资料。