我的项目进度
登录后可标记此项目的跟进状态与进度，跨设备保留最高进度。
技术栈
Next.js 14React 18TypeScriptTailwind CSSFramer Motion
项目介绍
一个面向九年级学生的化学基础练习游戏，覆盖前 20 号元素、元素符号、化学式、方程式配平、常用仪器与实验规范。
包含答题闯关、配对、拼写/填空三种核心玩法，以及周期表浏览与小测、仪器识别、实验规范判断等学习模式。所有题目均带中文解析，成绩仅保存在浏览器本地，不采集个人信息。
核心功能
- ✓答题闯关：20 道选择题，答错即时解析
- ✓配对玩法：元素、化学式、仪器与实验规范配对
- ✓拼写填空：元素符号大小写与配平最简比判定
- ✓前 20 号元素周期表：浏览、卡片模式与找符号小测
- ✓16 种常用仪器：用途、禁止操作与安全提示
- ✓实验规范场景：顺序与错误操作判断，带安全提示
- ✓本地进度：最高分与错题记录（localStorage，可清除）
- ✓移动端、键盘、深色模式与减弱动画支持
技术挑战
如何让化学符号大小写判定既不放过错误又不误伤输入？
挑战描述
元素符号和化学式必须大小写敏感（Co ≠ CO、Cl ≠ CI），但用户输入常带空格或全角字符。
解决方案
实现 normalize.ts 纯函数：只处理空白与全角差异，大小写原样保留；配平题解析系数数组并做最大公约数约分，按最简整数比判定。
如何保证移动端周期表可读且本地进度不丢失？
挑战描述
18 列长式周期表在 320px 宽度下无法完整显示，localStorage 可能被禁用或数据损坏。
解决方案
周期表采用受控横向滚动与卡片列表双模式；本地进度使用 schemaVersion 迁移与双层 try/catch，损坏时安全回退为空进度。