javascript - 如何处理超过100个移动矩形而不卡顿

Question

我有这个 fiddle :https://jsfiddle.net/reko91/e6uwqnof/2/

按下按钮时，它会创建 50 个矩形，所有矩形都会向下移动到屏幕底部。

for(i=0;i<50;i++){
enemyArray.push(new enemy(normalBullet.x+i*5, normalBullet.y, normalBullet.speed, 1, 10, "#F00"));
}

第一次点击时效果很好，但是一旦我开始添加更多，它就真的开始滞后了。是否有处理数百个移动元素的最佳实践方法？或者 HTML 和 Javascript 不是处理如此大量移动数据的最佳语言吗？

Answer 1

您的主要问题是在 update 函数中:

function update() {
  //  enemy.update();
  //if (keystate[SpaceBar]) {
  $('#newEnemy').click(function() {
    createNewEnemy()
  })
  //...
}

可能是一个错误，但是您每次调用 update 时都会附加事件，即每秒 60 次! (直到它不能再这样做为止。)这意味着每次按下按钮时，都会在 Canvas 中生成大量元素。

将事件监听器添加移出站点更新，这样您就成功了。