物理直觉这东西背再多公式也背不出来得动手调。课本给的是静态图视频是别人调好的参数你只能看不能动。我想给初中生做一个能拖滑块、立刻看结果的玩意儿九个模拟器一个文件双击就开断网也行手机上也自适应。为什么非得是能动手调的我见过太多孩子把45° 抛得最远背得滚瓜烂熟但你问他30° 和 60° 谁远他愣住。因为课本只画了一张 45° 的图他没亲手把角度从 0 拖到 90没看到射程先涨到 45° 再回落。这个先涨后落的形状才是直觉。视频解决不了这件事。视频里的参数是作者调好的你只能看别人调。我要的是孩子自己把弹簧拉硬一点看到小球弹得更快把摆长拉长一倍看到周期变慢。而且这个变化得是即时的拖一下滑块画面立刻变。这就把技术路线定死了必须能在任何电脑、手机上直接打开不装环境、不联网、不依赖服务器。能拷进 U 盘、能微信发文件、能传手机浏览器。排除了一圈方案最后落在最朴素的东西上单个 HTML 文件。为什么是初中生、是这九个初中物理有个特点公式开始出现但孩子还没建立公式对应什么画面。高中的难点在综合应用初中的难点恰恰在这个对应。sin(2θ)背得出但 2θ 是什么、为什么是 2 倍角、45° 为什么是顶点全靠想象。所以我把九个都选在公式简单、但需要画面才能真懂的点上抛体、匀变速、弹簧、单摆、波的叠加、共振、行星、碰撞、双缝。每一个都是课本里老师画静态图、学生靠脑补的典型正好是模拟器最能帮上忙的地方。九个模拟器每个都是独立的小世界每个模拟器是一个完整的 HTML 文件自己带 Canvas 画图、滑块调参、requestAnimationFrame 动画循环还有物理积分。九个共享一套深色板岩主题手机端用 ResizeObserver 盯着容器大小、用 devicePixelRatio 处理高分屏所以手机上不糊。每个模拟器里都嵌了一句点题和一段可折叠的详解。点题是一句话把生活现象和物理挂钩详解是从生活讲到公式、再给动手试试的引导。比如波的叠加那句点题两列波叠在一起峰对峰变高、峰对谷抵消——这就是干涉。点开详解能看到降噪耳机、肥皂泡的彩色、两块石头扔水里都是干涉再往下是公式yA·sin(2π(ft-x/λ))、拍频f_拍|f₁-f₂|、驻波y2A·sin(kx)·cos(ωt)。九个分四组我挨个说做了什么、卡在哪、公式是什么。运动学两个。抛体运动拖角度滑块能看到射程Rv₀²sin(2θ)/g先涨后落45° 是顶点拖初速度轨迹整体放大。匀变速直线运动重点是 v-t 图上那块面积就是位移xx₀v₀t½at²预设了自由落体、刹车两种场景孩子能直观看到踩油门加速、踩刹车减速速度图上的面积就是走过的路。振动与波四个最费劲。弹簧振子用了 RK4 积分m·x-k·x-b·x还做了子步长保证稳定能量柱实时显示守恒周期靠过零点实测去对T2π√(m/k)。拖重物周期变长换硬弹簧周期变短实测值和公式对得上才算过关。这里有个细节显式欧拉法积分弹簧会越积越发散能量不守恒画面上小球振幅越来越大换成 RK4 加子步长每帧切 8 小步能量曲线才平。单摆同理T2π√(L/g)但大角度要加修正T≈T₀(1θ₀²/16)所以摆角拉到 60° 时实测周期会比小角公式长一点。这个偏差本身就是教学点告诉孩子公式有适用范围小角才准。波的叠加做了相长、相消、拍频、驻波四个预设勾上拍频包络能清楚看到幅度一胀一缩胀缩频率正好等于两波频率差。共振画了幅频曲线AF₀/√((k-mω²)²(bω)²)推力频率扫过固有频率f₀½π√(k/m)时振幅飙升预设里还放了塔科马大桥的案例。1940 年那座桥就是被风以接近固有频率的涡旋激振振幅越积越大最后垮了。力学两个。行星轨道靠初速度区分圆、椭圆、抛物、双曲v_c√(GM/r)是圆轨道v_e√(2GM/r)是逃逸超过就一去不返还能验证开普勒第三定律T²/a³4π²/GM。动量碰撞做了一维对撞动量m₁u₁m₂u₂m₁v₁m₂v₂永远守恒恢复系数e(v₂-v₁)/(u₁-u₂)可调从完全弹性到完全粘在一起能量损失实时显示。弹得越脆能量越省粘在一起能量最亏。光学一个。双缝干涉最反直觉的那个光像波会干涉但粒子一个一个打、打到屏幕上累积最后也出条纹这就是波粒二象性。条纹间距ΔyλL/d强度分布是sinc²·cos²的乘积。这个模拟器我特意做了逐个粒子累积的模式让条纹是一颗一颗长出来的。真正的难点九个文件怎么塞进一个文件九个模拟器单独跑都没问题但用户要的是一个文件双击即用。最直觉的做法是把九份 HTML 拼一起。一试就崩。九套 CSS 变量同名都叫--accent、--panel九个 IIFE 各自启动 requestAnimationFrame 循环互相覆盖、九个动画一起跑、CPU 飙满。我最后用的办法是把每个模拟器原样塞进一个script typetext/html模板标签里。typetext/html这个类型浏览器不认识所以它不解析、不执行只把内容当纯文本存着。点哪个卡片就取出对应模板的文本用 iframe 的 srcdoc 属性注入进去运行。这个方案的好处很实在。iframe 是独立文档九套 CSS、九个 JS 各管各的谁也不污染谁同一时刻只有当前那个模拟器在跑动画循环返回首页就清空 srcdoc、停掉循环手机上省电九个模拟器的源文件一行都不用改构建脚本只做读取、塞进模板、拼接三件事。为什么不用别的方案我对比过几个。把九个模拟器的 JS 全塞进一个全局作用域、靠命名空间隔开九套代码挤一起一个变量名撞了全崩维护噩梦。用 Shadow DOM 隔离的话CSS 能隔但 JS 的 requestAnimationFrame 还是共享一个事件循环九个动画一起跑的问题没解决。每个模拟器单独一个 HTML 文件、用链接跳转倒也行但那就不叫一个文件了分发还是九个文件。iframe srcdoc 是唯一同时解决隔离、省电、源文件不改、单文件分发四件事的方案。代价是 iframe 内外跨域通信麻烦但这个项目里子页面不需要和外壳通信各跑各的代价为零。那个让点卡片没反应的坑合并完双击打开点卡片什么都没发生。这种 bug 最难受因为没报错就是没反应。我用 Chrome 无头模式跑chrome --headlessnew --dump-dom --virtual-time-budget2000 文件路径把渲染后的 DOM dump 出来发现首页的卡片按钮上根本没绑 click 事件。往上追是那个负责绑事件的 IIFE 没执行。再往上是主script块提前关闭了后面的代码全没解析。根因藏在一行看起来人畜无害的代码里。模板内容里有/script每个模拟器自己有 script 标签直接放进去会提前结束外层 script所以我用占位符__SCR_END__替换掉它注入 iframe 时再还原。还原那行 JS 是这么写的var doc tpl.textContent.replace(/__SCR_END__/g, /script);问题在这HTML 解析器不懂 JS 字符串字面量。它扫到一个script块就一路往后找字面的/script来结束这个块它不管这个/script是在正则里、在字符串里、还是在注释里。这行 JS 里的/script是个字符串对 JS 来说没毛病但对 HTML 解析器来说它就是主 script 块到此结束。于是主脚本提前关闭IIFE 没解析点击没反应。修法就一个字符把/script写成\/script。反斜杠在这里不是为了 JS 转义JS 里\/就是/而是为了骗过 HTML 解析器。它扫到\/时因为不是/不认为是结束标签继续往后等 JS 真正运行时\/script和/script完全等价。更稳妥的写法是拆开字符串拼接把结束标签拆成两段用加号连回去让这个结束标签的字面量永远不在源码里连在一起。两种都行我选了反斜杠因为只多一个字符、可读性更好。这是个挺典型的两层语言叠在一起的坑。HTML 解析永远在 JS 之前script 块里只要出现字面的结束标签字串哪怕在字符串里、在正则里、在注释里块就提前结束。这是 HTML 规范定的行为不是 bug但坑过的人应该不少。同样的坑在 PHP 里嵌 JS、在模板引擎里输出 JS 时都会出现。只要外层语言负责把内层代码当文本读又拿这个结束标签当收尾标记就躲不开。用到的工具和能复用的部分整个过程用的工具其实不多。Claude Code 本身干了大头读九个源文件、写构建脚本、跑无头验证、迭代修 bug。Chrome 无头模式用来验证 DOM 和动画--dump-dom看结构--virtual-time-budget让虚拟时间推进、动画跑几秒再 dump。有个坑值得记一笔file:// 协议下iframe 的 contentDocument 是跨域的外部脚本读不到 iframe 里的内容。所以验证模拟器有没有真的跑起来不能从外面读 iframe得在页面里自己探测往 iframe 里塞一段自报状态的代码让它把结果写回父页面。这种绕过跨域限制做自探测的思路做离线工具时会反复用到。这套流程是能复制的。任何多个独立页面 → 单个文件分发的需求都能套这个模板教学课件把十个实验塞一个文件、产品 Demo 把几个界面打包发客户、离线工具集不依赖服务器。核心就三步每个子页面塞进script typetext/html模板、点击时用 iframe srcdoc 注入、/script用占位符加转义处理。成品长什么样能拿来干嘛最后产出三个东西物理模拟器.html约 192 KB单文件双击即用离线手机自适应九个独立的模拟器源文件想单独用也行一个构建脚本改了源文件跑一下就重新合并。用法很朴素拷到 U 盘、微信发文件、传手机浏览器都直接开。还能用 URL 记忆物理模拟器.html#pendulum直接跳到单摆刷新也留在原地。适合谁用呢物理老师上课拖一下滑块演示比画图强家长陪初中生孩子玩比刷题有意思自学的人验证公式把背的变成看到的做科普短视频的录屏就是素材。我做这事的体会是物理直觉是动手养出来的不是背出来的。AI 帮你把从公式到能动手调的模拟器这条路一次性跑通省下的是写前端、调动画、处理高分屏那些杂活留下的是真正该花时间的部分把物理讲清楚。你学物理的时候哪个概念最缺手感评论区说说下一批模拟器我照着做。有用的话点个在看让更多想给孩子做教具的人看到。标签Claude Code物理模拟器Canvasiframe srcdoc前端工程教育工具RK4 积分单文件分发
