javascript 拼接导致 Canvas 滞后

标签 javascript canvas

我有一个简单的运行游戏,平台从右向左滚动。这些平台存储在一个数组中,当它们离开屏幕时,我使用 array.splice(index, 1) 将其删除。然而,这会导致调用第二个拼接时出现轻微的延迟。我也使用过 Array.shift() 但我仍然可以看到帧速率略有下降,因为这被称为。有更好的方法来删除/销毁某些东西吗?

for(var x = 0; x < platforms.length; x++){
    var platform = platforms[x];

    platform.x -= 10;

    if(platform.x + platform.width < 0){
        platforms.shift();
    }
}

最佳答案

您不能从数组中删除项目。

使用固定大小的数组(足够大以存储您需要的所有项目)并将您不想再渲染的项目标记为已取消,您可以稍后重用这些标记的插槽。

或者,如果您的问题领域允许,您可以直接覆盖这些元素。

[编辑]

针对评论的一些更多考虑:

附加标志的评估是及时稳定的计算,这意味着您可以预见它们将需要多少时间,并查看它们是否适合以特定帧速率渲染的帧。另一方面,Array.splice 可能会触发垃圾收集,并且可能比其他语言控制流构造长某个数量级

垃圾收集是一项密集型任务,应在游戏的主循环中不惜一切代价避免,以实现流畅的帧速率。这里有一些关于 SO 的资源和其他问题详细说明了这一点,例如:http://buildnewgames.com/garbage-collector-friendly-code/

关于javascript 拼接导致 Canvas 滞后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26340808/

相关文章:

javascript - 将状态与 props 同步,实现 ReactJS 中表单输入的双向绑定(bind)

javascript - Array.map 在 IE9 中不工作

javascript - 使用 Selenium 在 IE10 中移动到元素

JavaScript FORTNITE API 请求

javascript - 这是 html 5 中的错误还是我生气了?

javascript - 有没有办法在函数范围内迭代公共(public)方法?

javascript - html5矩阵变换的功能

javascript - 如何计算避开物体的贝塞尔曲线控制点?

javascript - Linux 的图标容器文件?从js Canvas 到这个容器文件

javascript - 为我的游戏设置计时器