如何处理超过100个没有滞后的移动矩形

Question

我有这个小提琴: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次!(直到它不能再这样做了,就是这样.)这意味着每次按下按钮,你都会在画布上生成大量元素.

将事件监听器添加到场外update,你就是金色的.