14、HTML5 游戏开发：动画帧、类型化数组与画布的运用

HTML5 游戏开发：动画帧、类型化数组与画布的运用

1. requestAnimationFrame 的使用策略

在游戏开发中， requestAnimationFrame 是一个重要的工具。我们应该让 requestAnimationFrame 调用处理游戏渲染的代码，而非更新游戏状态的代码。这样做的好处是，即使浏览器没有进行渲染，动画相关的值仍会持续变化，同时避免了在不可见内容上浪费 CPU 和 GPU 资源。当浏览器标签再次激活时，会立即渲染最新的数据状态，就好像一直在渲染一样。

这种技术在游戏中尤为有用，因为我们不希望用户切换浏览器标签时整个游戏暂停。而且，通过避免不必要的屏幕渲染，还能节省用户的电池电量。

需要注意的是， requestAnimationFrame 会将动画循环的帧率限制为显示器的刷新率。因此，它并不打算取代原生定时器的实现，特别是在我们希望回调函数以独立于显示器刷新率且可能更高的速率被调用的情况下。

2. 类型化数组：高效的数据处理方案

随着时间的推移，JavaScript 引擎的处理速度有了显著提升，但仅仅处理数据更快并不意味着就能做更强大的事情。例如在 WebGL 中，浏览器虽然能够理解 OpenGL ES，但开发者可能缺乏充分利用这一能力的工具。

为了满足这些需求，JavaScript 引入了一种新的数据类型：类型化数组。类型化数组的结构与 JavaScript 中的普通数组类似，但更加高效，并且是为处理二进制数据而设计的。

2.1 类型化数组与普通数组的对比