javascript - HTML5 Canvas : Thousand of moving Images = Huge FPS loss

Question

我正在尝试使用 Canvas 2D 构建 HTML5 游戏(仅适用于计算机作为设备)。但有一个问题，我有数千张移动图像，并且大约有 4000 多张图像(敌人)，我无法获得超过 10 FPS 的帧率。使用 Java2D 工作正常，现在我正在尝试将游戏导入 HTML5。有人有一些技巧可以在 HTML5 中实现这一点吗？一些代码优化？对于任何帮助，我将非常感激。

http://jsfiddle.net/LtlFdl/tzd8z/

ctx.clearRect(0, 0, 320, 320); // <- Maybe just Clear the Enemy Square Position?

顺便说一句: fiddle 上只有一个玩家区域，最后有 4 个玩家区域(旋转 90、180 和 270 度)、背景图像、塔楼和很多效果。所以我必须将所有内容乘以 4。

Answer 1

首先...同上 @enhzflep 在他的评论中已经提到的好想法。

我想补充一点，设置 fillStyle 是一个有点昂贵的操作，因此为 4000 个敌人绘制中的每一个设置 fillStyle 变得非常昂贵。我建议您每秒显示一次文本和运行状况信息，而不是每次 Update_Map1 都显示一次。

在我的开发桌面上，我可以以每秒 45 次的速度执行 4000 X drawImage(img,0,0)。这让我相信转换(平移、旋转)正在减慢你的速度。也许可以创建 4 个版本的敌人图像——朝上、朝下、朝左和朝右。然后通过绘制适当的面向图像来完全替换变换。

我发现您正在使用删除 Enemys_P1[i]。 “回收”现有的敌人会更有效地利用资源。您可以通过将敌人标记为“不活动”并且不处理该敌人来做到这一点。当您需要新的敌人时，您可以将不活动的敌人更改为“事件”，并将其属性设置为"new"敌人值。

祝您的项目顺利!