① 摘要
面向乡村初中师生，提供科幻沉浸式游戏化学习，让学生在游戏中完成元素基础知识的启蒙。
② 真实场景与需求
目标人群
乡村中学的初中生和化学教师。这些学生大多第一次接触化学元素，而教师资源有限、精力有限，急需能让学生「主动学、愿意练」的数字化工具。
痛点描述
初中化学仅有一年的学习时间，实际教学还不到一年，很多学生迟迟无法掌握基本的元素知识（元素符号、名称等）影响后续学习，学生普遍对这类死记硬背的知识是不愿记、记不住，但是玩游戏却厉害的很。所以，我尝试做一款科幻游戏，让初中生、小学高年级能在游戏中学会基础元素知识，让学生在玩中学，在学习化学之前就可以完成元素启蒙教育，减轻后续学习压力。
现有做法及不足
-
背诵口诀：「氢氦锂铍硼…」口诀虽经典，但老师没有时间督促，学生往往不会自觉记忆，被迫记忆也对化学无法产生兴趣。
-
核心不足：缺乏情境化记忆锚点、即时正反馈和自适应错题巩固——这三者恰好是游戏化设计最擅长的
③ 作品介绍
作品形式
网页游戏（Web App），无需安装，手机/平板/电脑浏览器直接访问。
核心功能
游戏背景：公元 2084 年，人类与失控 AI 爆发了最终战争。在核火的洗礼中，旧地球化为焦土…
毁灭前夕，最后一艘搭载文明火种的诺亚方舟飞船——『星尘号』，惊险逃离了崩塌的太阳系。你的父母，正是船上的先行者之一。
若干年后，星历 102 纪。作为在深空航行中出生的第一代新人类，你从冷冻舱中苏醒。你的父母留下了这台斑驳的终端机，以及一项伟大的使命。
你将通过脑机接口连接元宇宙，掌握元素的奥秘，获取粒子。然后在分子实验室中，重新合成修复地球所需物质。
现在，重建世界的责任，交给你了。
游戏机制：任务驱动，修复核战后的地球—-合成物质—-获取粒子—–掌握元素奥秘
游戏模块：
宇宙——掌握元素奥秘 + 获取粒子
将23种化学元素嵌入「大爆炸→恒星熔炉→生命之源→超新星风暴→星尘凝聚→地球之心→文明黎明」的宇宙叙事。每个元素都有专属宇宙起源故事（如"铁是恒星核聚变的终点——铁核形成的那一刻，恒星的能量引擎熄灭"），用科幻叙事替代死记硬背。
闪卡学习室——三重编码 + 主动回忆
-
闪卡模式：卡片正面只显示元素符号，学生必须先在脑海中回忆答案再翻面
-
三重编码记忆法：翻面后同时呈现视觉编码（emoji图标）、文本编码（符号+名称+拼音+原子序数）、情境编码（真实世界用途标签）
-
语音朗读：一键播放"8号元素，氧，符号O"
-
自我评估：记住了/模糊/没记住，未掌握的元素自动进入错题库
连连看试炼——3波次递进 + 错题修复
-
第1波：本纪元新元素 → 第2波：混合前一纪元 → 第3波：全量随机
-
连击暴击系统：连续正确匹配概率触发暴击，额外产出高能粒子（3x~10x）
-
错题修复模式：3波完成后若仍有错题，自动进入加时赛专练薄弱项
-
星级评价：零错误二星、零错+快速三星
微观合成实验室——原子锻造 + 分子合成
-
星际熔炉：将质子、中子、电子注入锻造原子，视觉从"红矮星→太阳→蓝巨星"色彩演化
-
15种化学配方：从H₂O到KH2PO4，每个配方都有蓝图提示和用途说明
地球恢复工程——长线任务驱动
-
11个工程项目，4大阶段：净化天空 → 破冰时代 → 生态重建 → 文明新芽
-
项目完成时触发独特CSS动画特效（降雨/护盾/雷达/热浪/气球/发芽等）
④ 用 SOLO 实现的过程
任务拆解方式
整个项目按「数据层→核心机制→视觉表现→系统集成」四阶段推进：
-
数据层：先用SOLO生成23种元素的完整数据结构
-
核心机制：分别实现闪卡翻转逻辑、连连看匹配算法、分子合成检测
-
视觉表现：Tailwind CSS + Canvas星空 + Web Audio音效
-
系统集成：GameContext全局状态、localStorage持久化、BGM调度
用了 SOLO 哪些能力
-
零基础前端开发：我是一名化学教师，不是专业程序员。SOLO帮我从零搭建React+Vite+Tailwind项目，完成全部16个组件
-
游戏机制设计：用Prompt描述「3波次递进连连看+连击暴击+错题修复」，SOLO输出了完整的MatchGame组件
-
音效系统：告诉SOLO「零音频文件依赖的合成音效」，它用Web Audio API生成了10种音效
-
Canvas动画：描述「星座连线+脉冲波纹+流星星空背景」，SOLO输出了StarFieldCanvas组件
关键 Prompt 示例
请创建连连看匹配游戏组件MatchGame：
3波次递进：第1波本纪元新元素，第2波混合前一纪元，第3波全量随机
连击暴击：2连击以上概率触发，额外产出高能粒子
星级评价：一星保底，零错误二星，零错+快速三星
错题修复模式：3波完成后仍有错题自动加时赛
粒子奖励：根据正确率和速度产出质子、中子、电子
请用Web Audio API创建合成音效系统：
零音频文件依赖
10种音效：flip/easy/hard/forgot/nav/inject/synth/molecule/explode/click
每种用不同波形和频率曲线
中间踩过的坑
-
音效与BGM冲突：Web Audio API音效和Howler.js BGM互相打断→改用独立AudioContext+Howler双通道
-
移动端卡牌溢出：8对16张卡牌溢出屏幕→用
aspect-[3/4] w-[22%]响应式方案 -
状态闭包问题：粒子库存更新竞态→用useRef追踪最新值
⑤ 成果展示
在线体验
已部署至 CloudBase 静态托管，手机浏览器直接可玩
点击此处开始游戏
核心截图说明
场景 |
说明 |
|---|---|
| 宇宙地图 |
7个纪元时间线 |
| 闪卡学习 |
正面主动回忆，翻面三重编码+语音朗读 |
| 连连看试炼 |
| undefined |
| 原子锻造 |
| undefined |
| 地球恢复 |
| undefined |
代码仓库
16个React组件+4个数据模块+4个Hook，总计约5000+行代码
技术亮点
-
零外部UI库：全部Tailwind CSS手写全息科幻风格
-
零音频文件音效：Web Audio API合成
-
零服务端依赖：纯前端+localStorage离线可用
-
移动端优先：所有界面适配手机竖屏
⑥ 验证方式与下一步
模拟测试
-
23个元素完整学习路径测试用例，验证「闪卡→试炼→合成」闭环
-
连连看错题修复：模拟全错场景，验证加时赛聚焦薄弱元素
-
分子合成：验证15种配方检测逻辑
场景验证
暂无大范围学生测试，欢迎各位老师、家长带孩子测试，感谢先！！！
测试问题反馈，可关注我的公众号：碳话硅。**
下一步计划
-
更多基础内容：增加化合价、相对原子量等必要知识
-
打造账号系统：建立班级，PK机制、排行榜
-
接入AI智能导师：已预留
AI_Mentor_API接口，计划接入大模型实现对话式引导 -
微信小程序版：利用CloudBase移植，进一步降低乡村学生使用门槛
一句话总结：把初中化学元素记忆从「痛苦的死记硬背」变成「停不下来的宇宙冒险」，让每一位乡村教师都拥有一位不知疲倦的化学教学助手。
