排版听起来怎么样？

你可以在下面的图示中直接测试 HALMA 的交互式启动界面！

大放异彩：屏幕上的大电影

HALMA 启动屏幕的基础是一个 HTML canvas 元素，动画将在其上投影。为了实现所需的效果，我们决定使用物理引擎 Matter.js。

物理引擎示例

第一步，文本的下划线将被动画化。为此，我们使用 Matter.js 创建了单个球体，这些球体由多个“弹簧”固定在原位。一个函数负责沿文本的下划线（稍后将在此处添加下划线）进行正确放置，该函数以均匀的间隔自动将这些物体放置在两个坐标之间。

愿原力与你——和你的鼠标指针——同在

现在，通过一种围绕鼠标指针位置的“力场”，可以使物体振动。由于它们相互连接，它们开始振荡。这样就产生了所需的“摆动”效果。为了避免出现混乱的行为，我们通过简单的向量计算将与原点的最大距离限制住。

调整，或者说：“修修补补”

通过质量、重力、拉力和阻尼等各种参数的相互作用，我们可以有针对性地影响和微调模拟。

这里你可以看到各个矢量点的初步构建。

显示在屏幕上：现在开始渲染

这样计算出来的动画还不可见，它们目前只以坐标和矢量的形式虚拟存在。为了让这一切具体地在屏幕上以漂亮的动画形式呈现，下一步必须将它们渲染成具体的像素。为此，我们不使用Matter.js内置的渲染器，而是使用P5.js库，因为它能够绘制样条曲线。

利用各个物体的坐标，可以在Canvas元素上输出一条线，但如果没有进一步的计算，这条线会非常生硬。最初尝试用贝塞尔曲线平滑边缘的实验表明，贝塞尔曲线更适合锚点较少的情况。它们需要接下来三个坐标的位置，这使得计算非常复杂和耗时。

因此，为了生成一条弯曲的曲线，我们转而使用了三次Hermite样条的公式，它更容易应用于线的各个矢量点。由于它必须在每一帧中重新计算，并且应该在每台设备上以至少30 FPS的帧率运行，因此保持此函数尽可能高效非常重要。我们让物理引擎在自己的动画循环中运行，这样就不受帧率的限制，可以避免模拟中出现可疑行为。

现在，由Javascript动态生成的内容还需要根据屏幕尺寸和分辨率进行缩放，正确放置在Canvas上，并在浏览器窗口每次调整大小时重新计算。

前端中的成品应用

没有声音是好声音

最后，一旦鼠标的力场与其中一个物体碰撞，“只需”播放一个声音。由于传统的 <audio> 元素在播放声音之前会先进行缓冲，因此需要另一种解决方案。为了使整个过程跨浏览器工作，所有声音在页面加载时都会无声播放一次，从而有效地实现预加载。这样，声音文件的加载和缓冲就提前了。

众所周知，未经用户明确同意，不播放声音是一种好习惯。在某些浏览器和几乎所有移动设备上，这甚至是强制性的，只有在用户交互后才能播放声音。因此，我们添加了一个按钮，可以用来选择打开或关闭声音输出。

一个烦人的Bug：想“不打扰”，就得感受

启动屏幕终于完成了，我们开始了测试阶段。很快就发现，视觉效果在几乎所有设备上都如预期般运行。然而，一些测试人员报告说他们的iOS设备听不到声音。这真是一个挫折，因为声音是整个想法的基础部分！接下来的几周里，我们一直在困惑和调试：问题无法重现和缩小范围，它似乎完全随机出现。唯一的共同点是它出现在iOS设备上，但iOS或Safari版本，甚至设备本身，似乎都没有影响。

我们写了无数令人沮丧的代码行。为了寻找答案，或者至少是关于如何重现这个Bug的小线索，我们查阅了文档，浏览了互联网论坛。所有的HALMA成员，甚至他们的家人和朋友都被招募为测试人员，进行了大量的测试。一切都无济于事。我们差点放弃了整个想法。但后来，纯属偶然，我们终于找到了这个错误：完全符合“这不是Bug，这是功能”的说法，iOS上动态声音的播放不像其他设备那样通过媒体通道，而是通过铃声通道！这意味着，只要手机静音或“勿扰”功能开启，就无法播放声音。因此，现在所有iPhone和iPad用户都必须记住：关闭“勿扰”，然后打开声音！

在iPad上完成的启动界面，并附有相应提示，需在设备设置中取消静音