如何无延迟地处理 100 多个移动矩形

How to deal with over 100 moving rectangles without lag

本文关键字：移动 何无 延迟 处理      更新时间：2023-09-26

>我有这个小提琴：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不是处理如此大量的移动数据的最佳语言？

您的主要问题在于update函数：

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

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

将事件侦听器添加移到站点外update，您就是黄金。

你在帧循环中分配按钮按下，所以当你按下它时，它实际上是在调用按钮按下，无论循环运行了多少次。

将此代码移到外面：

$('#newEnemy').click(function() {
  console.log("createEnemy");
  createNewEnemy()
});
相关文章：