如何处理超过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，您就会变得很黄金。

Answer 2

你正在框架循环中分配按钮推送，所以当你按下它时，它实际上调用了按钮按钮，但循环运行了很多次。

将此代码移到外面：

$('#newEnemy').click(function() {
  console.log("createEnemy");
  createNewEnemy()
});