更新一次状态，导出显示
当收集到硬币时，在游戏事件或模拟步骤中更新 model.score 。在 UI 更新点，渲染 model.score 中显示的值，而不是单独向标签添加 1。对于 DOM HUD，当值改变时更新 textContent；对于画布 HUD，从同一模型字段中绘制数字。视觉计数可以向已确认的分数过渡动画。
对于影响多个标签的事件使用单个转换。如果失去生命也会暂停播放并打开面板，记录一次状态变化，然后让渲染一起反映生命、状态和可用操作。避免让面板回调独立更改碰撞处理程序已更改的相同变量。
测试快速更新和最终状态
快速连续触发两次拾取并验证 HUD 是否显示结果总数而不是跳过更新。暂停，完成运行，然后重新启动；确认计时器停止，最终分数按预期保持可见，并且下一次运行从其定义的值开始。如果您使用 requestAnimationFrame 进行显示，请将其视为渲染计划：MDN 指出其回调是一次性的，并且必须为另一帧再次请求，因此请不要在每帧意外运行两次的代码中进行状态转换。
减少不必要的界面更新
对于 DOM 文本，如果更新频繁，请在写入之前将下一个格式化值与当前值进行比较。对于画布 HUD，在模拟后进行分组绘制，而不是从每个事件回调中绘制一个标签。在开发过程中，在可见的 HUD 旁边添加模型的调试读数；如果这些值不同，则错误出在渲染中，而将具有错误结果的值匹配回模型更新。
关于同步游戏HUD的常见问题
分数标签是否应该在碰撞处理程序内更新？
处理程序可以更新权威分数状态；让同一条渲染路径负责格式化并显示该状态。不要在标签中另行维护一个独立递增的分数。
为什么 HUD 显示上次运行的值？
重新启动可能会重置模拟状态而不触发 HUD 渲染，或者面板可能会保留陈旧的副本。通过一次转换重置模型并立即渲染新状态。
延伸阅读
发现信息过时了？ 报告需要更正的内容