技能介绍

打破“静态演示”的交互壁垒

在教育仿真开发中，常见的痛点是“伪交互”——用户只能拖动预设滑块观看固定动画，无法真正参与模型搭建。这种模式不仅限制了探索空间，也给单文件 HTML 的交互验证带来挑战：按钮失效或拓扑错乱往往难以肉眼排查。本技能旨在将“被动观看”升级为“主动构建”，提供一套零依赖的 PhET 风格仿真台开发范式。

高自由度交互的工程实现

核心工作流分为四个阶段：

骨架搭建：内联 core-runtime.js，获得全局 sims 注册表、Tab 切换及 localStorage 存取等基础设施。
模块组装：物理实验封装为独立 IIFE 并注册，保证模块化。
高自由度改造：电路等有拓扑关系的模块采用画布编辑器型，利用 makeEditor() 引擎，严格遵循单一状态、sync() 单一闭环等“六件套”规范；滑轮组、平面镜等几何模块则采用实体数组型，动态增删实体并自动重算几何关系。
自动化验证：引入六道关卡与 E2E 点击测试，拒绝“凭感觉测试”。

避坑指南与适用边界

处理高自由度交互时，必须牢记几条铁律：跨结构引用必须存 id 字符串而非对象引用，否则手动搭建的电路会恒报错；结构变更必须走 sync() 闭环；SVG 画布坐标必须用 getScreenCTM().inverse() 映射。
本技能要求交付物严格遵循单文件、全内联标准。若仅需展示简单数值变化，这套引擎会显得过重；它更适合需要用户真正“动手连线、摆放元件”的硬核交互场景。