2.1 钠与水的反应 动画 -2026-2027学年高一上学期化学人教版必修第一册

《钠与水的反应》交互动画 —— 完整流程点设计文档 适用：人教版 高中化学 必修第一册 第二章 第一节「活泼的金属单质——钠」 文件：01_钠与水的反应（交互动画）.html ==================================================================== 一、总体设计目标 -------------------------------------------------------------------- 1. 用鼠标拖拽完成一次「真实实验室级别」的钠与水反应操作全流程。 2. 完整复现五大实验现象：浮、熔、游、响、红（含声音与颜色扩散）。 3. 交互具备多样性：拖拽 / 点击 / 滑块 / 开关 / 悬停 / 长按 / 键盘。 4. 用「错误操作沙盒」明确警告违规操作的严重后果，错误一旦触发即演示 事故动画并扣安全分，强化安全意识（错误可撤销、可重来）。 5. 全程生成操作日志与实验报告，可复盘。 二、界面区域划分 -------------------------------------------------------------------- [顶栏] 标题 / 步骤进度条（10 步）/ 安全分（初始 100）/ 音效开关 / 重置 [左栏] 器材与试剂架（拖拽源） - 镊子、小刀、滤纸、玻璃片(表面皿) - 煤油试剂瓶（内含钠块） - 酚酞试液滴瓶 - 250mL 烧杯（盛水） - 短颈漏斗 + 试管（收集 H2） - 火柴（点火用） - 护目镜、橡胶手套（防护装备） - 【危险区】徒手、密封瓶、垃圾桶、热水壶 [中栏] 实验台（Canvas 主舞台） - 放置台：滤纸区 / 切割板区 / 烧杯区 / 废钠回收区 - 反应实时动画渲染层 - 飞溅、火焰、碎裂、烟雾等事故特效层 [右栏] ① 现象观察记录（浮/熔/游/响/红 逐条点亮） ② 操作日志（时间戳 + 行为 + 判定） ③ 知识卡（方程式、原理、离子方程式） ④ 安全警告弹窗区 [底栏] 参数控制：钠块大小滑块 / 水温滑块 / 酚酞用量 / 通风开关 三、正确操作主流程（10 步，必须按序完成） -------------------------------------------------------------------- 步骤 0 · 安全准备 操作：把「护目镜」拖到人物头像上；把「橡胶手套」拖到手图标上； 点击打开「通风」开关。 判定：三项齐全 → 安全分 +5，解锁后续步骤。 未做防护直接实验 → 后续每次操作额外扣分，并在飞溅时触发眼部伤害动画。 提示语：钠与水反应剧烈放热，可能飞溅强碱溶液，必须佩戴护目镜。 步骤 1 · 观察钠的保存方式 操作：鼠标悬停/点击煤油试剂瓶，瓶身放大，显示钠块沉在煤油底部。 现象：钠块呈灰白色，静置于煤油液面之下。 知识点：钠密度 0.97 g/cm³ > 煤油(约0.8)，故沉底； 钠易与 O2、H2O 反应，须隔绝空气与水，保存在煤油(或石蜡油)中。 步骤 2 · 用镊子取出钠块 操作：把「镊子」拖到煤油瓶上 → 镊子夹住钠块 → 再把镊子拖到滤纸区松开。 判定： · 用镊子取 → 正确，+5 分。 · 用手拿（拖「徒手」图标到钠上）→ 触发【错误 E1】。 · 用镊子夹了钠却直接拖进烧杯（跳过吸干煤油）→ 触发【错误 E2】。 提示语：只能用镊子取用，切不可用手直接接触。 步骤 3 · 滤纸吸干表面煤油 操作：钠块落在滤纸上后，按住鼠标左键在钠块上左右擦拭（拖动 3 次以上）。 现象：滤纸出现油渍印，钠块表面变干、露出金属光泽。 判定：擦拭次数 ≥3 → 完成，+5 分；未擦拭就继续 → 触发【错误 E2】。 步骤 4 · 切割钠块并观察切面 操作：把「小刀」拖到钠块上，点击落刀；用滑块选择切下的大小 （米粒 / 绿豆 / 黄豆 / 半块 / 整块）。 现象：切面呈银白色金属光泽 → 约 3 秒后逐渐变暗（生成 Na2O）。 判定： · 选「绿豆大小」→ 正确，+10 分。 · 选「黄豆」→ 反应过猛，警告一次，仍可继续（现象加剧）。 · 选「半块/整块」→ 触发【错误 E3】烧杯炸裂事故。 知识点：4Na + O2 = 2Na2O（常温，表面变暗）；钠质软，可用小刀切开。 步骤 5 · 剩余钠放回原瓶 操作：把大块剩余钠用镊子拖回煤油瓶。 判定： · 放回煤油瓶 → 正确，+5 分。 · 拖到垃圾桶/水槽 → 触发【错误 E6】。 · 一直不处理，放任其暴露在空气中超 20 秒 → 表面变暗并冒白霜（潮解）， 提示「未及时回收，钠已被氧化变质」，-5 分。 知识点：用剩的钠必须放回原试剂瓶，不得随意丢弃。 步骤 6 · 向烧杯滴加酚酞 操作：把「酚酞滴瓶」拖到烧杯上方，点击/长按挤压滴 2~3 滴。 现象：滴入无色，溶液仍为无色（水显中性）。 判定：滴 1~3 滴正确；滴超过 8 滴 → 提示「试剂浪费，用量过多」，-2 分。 作用：作对照，反应后变红才能证明生成了碱。 步骤 7 · 投入钠块 —— 反应开始（核心动画） 操作：用镊子夹起绿豆大钠块，拖到烧杯上方松开鼠标。 ★ 五大现象逐一演示（右栏对应条目依次点亮）： ① 浮 —— 钠块入水后立刻上浮至水面。 原因：ρ(Na)=0.97 g/cm³ < ρ(水)=1.0 g/cm³。 ② 熔 —— 钠块 0.8 秒内熔化成一个光亮的银白色小球。 原因：反应放热，且钠熔点低（97.8 ℃）。 ③ 游 —— 小球在水面四处游动、乱窜，逐渐变小直至消失。 原因：产生的 H2 从一侧逸出，气体反冲推动小球。 ④ 响 —— 发出"嘶嘶"响声（Web Audio 实时合成白噪声，可关闭）。 原因：H2 快速逸出、水汽冲击。 ⑤ 红 —— 以钠球轨迹为中心，红色由浅入深扩散至整杯溶液。 原因：生成 NaOH，酚酞遇碱变红。 伴随细节：水面涟漪、气泡串、白雾、烧杯内壁挂珠、液面轻微升温标记。 方程式弹出：2Na + 2H2O = 2NaOH + H2↑ 离子方程式：2Na + 2H2O = 2Na+ + 2OH- + H2↑ 电子转移：Na 失 1e- 作还原剂，H2O 中 +1 价 H 得电子被还原。 步骤 8 · 收集并检验氢气（拓展，可选） 操作：反应前把「短颈漏斗＋试管」拖到烧杯上倒扣罩住反应区。 现象：试管内水面下降，收集到无色气体。 操作：拖「火柴」到试管口，点击点燃。 现象：发出尖锐爆鸣声（不纯）或轻微"噗"声并有淡蓝色火焰（纯净）。 判定：收集时间 <5 秒 → 不纯，爆鸣；≥8 秒 → 纯净，安静燃烧，+10 分。 知识点：验纯是点燃可燃性气体前的必要步骤。 步骤 9 · 检验产物并整理 操作：拖「pH 试纸」（或直接看酚酞）→ 显示 pH ≈ 12~13，呈碱性。 拖「废液」到指定回收桶；把器材归位。 判定：全部归位 → +5 分，生成实验报告。 步骤 10 · 生成实验报告 内容：完成步骤数、安全分、触发的错误清单、五大现象记录、方程式、 结论（钠能与水在常温下剧烈反应，生成 NaOH 和 H2）。 可重置重来。 四、错误操作沙盒（多样性警告，共 10 类） -------------------------------------------------------------------- 每条错误：触发条件 → 事故动画 → 红色警告弹窗 → 扣分 → 正确做法提示。 E1【徒手取钠】 -20 分 触发：把"手"拖到钠块上，或未戴手套直接点击钠。 动画：手指发红、冒白烟、皮肤灼伤纹理，屏幕震动。 后果：钠与皮肤表面水分剧烈反应生成 NaOH 并放热，造成化学灼伤 + 热灼伤。 正确：必须用镊子夹取，全程不得徒手接触。 E2【未吸干煤油直接投水】 -10 分 触发：跳过步骤 3 直接投钠。 动画：水面漂浮一层彩色油膜，钠在油膜下反应，油膜被引燃出现橙红火焰。 后果：煤油浮于水面且可燃，遇反应热量易被点燃，引发火灾。 正确：先用滤纸吸干表面煤油再投入。 E3【钠块过大】 -30 分（最严重） 触发：切割时选「半块」或「整块」并投入。 动画：剧烈爆燃 → 黄色火焰（钠焰色反应）→ 烧杯玻璃碎裂四射 → 强碱液飞溅 → 屏幕出现裂纹特效 → 播放爆炸声。 后果：反应过于剧烈，放热引燃 H2 并发生爆炸，玻璃碎片与强碱飞溅伤人。 正确：每次只取绿豆（黄豆）大小，宁少勿多。 E4【投入热水/沸水】 -15 分 触发：底部水温滑块拉到 80 ℃ 以上再投钠。 动画：反应速率骤增，钠球疯狂乱窜，大量白雾，液滴飞出杯口。 后果：温度升高反应速率剧增，飞溅风险成倍上升。 正确：使用常温水。 E5【敞口处明火/凑近点火】 -15 分 触发：反应进行中把「火柴」拖到烧杯正上方点燃。 动画：杯口 H2 被引燃，蓝紫色火焰蹿起，回火至液面产生小规模爆燃。 后果：H2 与空气混合达爆炸极限（4%~75.6%）遇明火即爆炸。 正确：反应区域严禁明火；需检验氢气应用倒置试管收集并验纯。 E6【剩余钠丢入垃圾桶/水槽】 -20 分 触发：把剩余钠拖到垃圾桶或水槽图标。 动画：垃圾桶内窜出火苗并冒浓烟，火警灯闪烁；水槽则发生剧烈鼓泡爆响。 后果：钠遇纸屑、遇水均会燃烧，极易引发实验室火灾。 正确：剩余钠必须放回原煤油试剂瓶。 E7【密闭容器中反应】 -25 分 触发：把钠拖入带塞的密封试剂瓶（危险区图标）。 动画：瓶内压力表飙红 → 瓶身鼓胀 → 炸裂，碎片飞散。 后果：H2 无法逸出，内压急剧升高导致容器爆炸。 正确：必须在敞口容器中进行，保持通风。 E8【未戴护目镜 / 俯身近距离观察】 -10 分 触发：跳过步骤 0，或反应进行中点击"凑近看"按钮。 动画：视角急速拉近 → 液滴飞溅至镜头 → 屏幕被红色液滴糊住 → 显示眼部刺痛提示。 后果：飞溅的 NaOH 溶液进入眼睛可致严重损伤甚至失明。 正确：佩戴护目镜，保持安全距离，不得俯身正对反应容器。 E9【徒手接触反应后溶液】 -10 分 触发：反应结束后把"手"拖入烧杯。 动画：手指出现滑腻感提示、皮肤泛白起皱、腐蚀特效。 后果：生成的 NaOH 为强碱，具有腐蚀性，有滑腻感即已腐蚀皮肤角质层。 正确：不得接触，若溅到立即大量流水冲洗并涂硼酸溶液。 E10【把钠投入其他溶液（CuSO4）】 -5 分（拓展警示，非致命） 触发：切换烧杯为 CuSO4 溶液并投钠。 现象：产生气泡 + 蓝色絮状沉淀，无红色铜析出。 说明：2Na+2H2O=2NaOH+H2↑，2NaOH+CuSO4=Cu(OH)2↓+Na2SO4。 钠先与水反应，不能置换出溶液中的金属，破除"活泼金属置换"误区。 五、交互方式清单（多样性保证） -------------------------------------------------------------------- 1. 鼠标拖拽（自定义实现，非 HTML5 DnD）：取钠、移动器材、投料、回收。 2. 拖拽擦拭：按住左键在钠块上往复移动，吸干煤油。 3. 点击：落刀切割、挤压滴管、点燃火柴、打开通风。 4. 长按：持续挤压滴瓶滴加酚酞（松开停止）。 5. 滑块：钠块大小（5 档）、水温（0~100 ℃）、酚酞滴数。 6. 开关：护目镜、手套、通风橱、音效。 7. 悬停：器材名称与用途气泡提示；钠块显示实时质量。 8. 键盘：R 重置，Space 暂停/继续动画，Esc 关闭弹窗。 9. 视角按钮：正常视角 / 近距离观察（触发 E8）。 10. 报告导出：一键生成文字版实验报告并可复制。 六、评分与反馈机制 -------------------------------------------------------------------- 初始安全分 100。正确步骤累计加分（最高 +50），错误按上表扣分。 90~100 分：A 级 —— 规范操作，可独立完成实验 75~89 分：B 级 —— 基本规范，个别细节需注意 60~74 分：C 级 —— 存在明显安全隐患，需重做 <60 分：D 级 —— 严重违规，禁止进入实验室，必须重新学习安全规程 右栏操作日志实时刷新：[时间] 行为描述 → 判定（正确 / 警告 / 严重违规）。 七、知识点小结（动画内嵌） -------------------------------------------------------------------- · 化学方程式：2Na + 2H2O = 2NaOH + H2↑ · 离子方程式：2Na + 2H2O = 2Na+ + 2OH- + H2↑ · 氧化还原：Na 化合价 0→+1，失电子，被氧化，作还原剂； H2O 中 H 由 +1→0，得电子，被还原，H2O 作氧化剂。 · 现象口诀：浮（密度小）、熔（放热+熔点低）、游（气体反冲）、 响（气体逸出）、红（生成 NaOH 使酚酞变红）。 · 钠的保存：隔绝空气和水，保存在煤油或石蜡油中。 · 钠的物理性质：银白色、有金属光泽、质软、密度小于水、熔点低、 导电导热性良好。 · 与氧气反应对比：常温 4Na+O2=2Na2O（白色）； 点燃 2Na+O2=(点燃)Na2O2（淡黄色）。 · 易错辨析：钠投入盐溶液时，先与水反应生成 NaOH， 再由 NaOH 与盐反应，不能置换出溶液中的金属单质。 八、技术实现要点 -------------------------------------------------------------------- · 单文件 HTML，零外部依赖，双击即可离线运行。 · Canvas 2D 渲染烧杯、水体、钠球、气泡、颜色扩散、火焰与碎裂粒子。 · requestAnimationFrame 主循环，粒子系统实现气泡/飞溅/烟雾/碎片。 · Web Audio API 实时合成音效：嘶嘶声（滤波白噪声）、爆鸣（脉冲）、 玻璃碎裂（噪声+高频）、滴水声。可一键静音。 · 自定义拖拽层：mousedown/mousemove/mouseup + 命中检测（drop zone）。 · 状态机管理 10 个步骤，非法跳步即判为错误操作并给出提示。 · 事故特效：屏幕震动（CSS transform）、闪红、玻璃裂纹 SVG 叠加。 · 深色实验室主题，字体使用系统无衬线字体，适配 1280×720 以上屏幕。 （完） $null