当我创建许多对象时，动力学会变慢

Question

我是使用 javascript 和 kineticJs 的新手。而且我有一个小问题，当我创建了许多对象时，动画会变慢。我以为我已经用 .destory() 删除了这些对象，但我认为不是因为项目进展缓慢。

这是我的代码：

var framesSegundo = 1000/20; //1000 seconds 20 frames
var stage, fondo;
var personaje;
var intv;
// calculate the time between one enemy and the oher one
var SegEneCreado = 0 ;
var layer = new Kinetic.Layer();
//Group with the chrachters
var grupoPersonajes = new Kinetic.Group({});
var grupoEnemigos = new Kinetic.Group({});
// screen create
var stage = new Kinetic.Stage({
        container: 'game',
        width: 960,
        height: 640
      });

//Level Create
function creaNivel(){
    //creamos un personaje
    personaje = new Kinetic.Rect({
      width: 100,
      height: 50,
      x: 10,
      y: stage.getHeight()/2,
      fill: 'red'    
    });
    grupoPersonajes.add(personaje);
    layer.add(grupoPersonajes);    
    stage.add(layer);
}

//Create the enemies
function creaEnemigos(){   
   // we left the time of one second to create enother enemy
   if (SegEneCreado <= 0){      
      if (aleatorio(0,1000)>970){  
         SegEneCreado = framesSegundo;
         //create the enemies
         var tipoEnemigo = parseInt(aleatorio(0,3));
         if (tipoEnemigo == 0){
            var enemigo = createEnemy(stage.getWidth() + 10, 0, 'green');            
         }
         else if (tipoEnemigo == 1){
            var enemigo = createEnemy(stage.getWidth() + 10, 0, 'blue');                        
         }
         else if (tipoEnemigo == 2){
            var enemigo = createEnemy(stage.getWidth() + 10, 0, 'yellow');            
         }
         else {
            var enemigo = createEnemy(stage.getWidth() + 10, 0, 'C48BD9');            
         }
         enemigo.setY(aleatorio(0,stage.getHeight() - enemigo.getHeight()));         
         grupoEnemigos.add(enemigo);
         layer.add(grupoEnemigos);    
         stage.add(layer);
      }
   }
   else{
      SegEneCreado--;
   }
}

function MoverEnemigos(){
   for (i in grupoEnemigos.children){
      var asset = grupoEnemigos.children[i];
      asset.move(-5,0);
      if (asset.getX() + asset.getWidth()<0){
        console.log(asset.getX() + asset.getWidth()<0);
        asset.move(0,0);         
        asset.remove();
      }
   }

}

//random value
function aleatorio(inferior, superior){
   var posibilidades = superior - inferior;
   var random = Math.random() * posibilidades;
   random = Math.floor(random);   
   return inferior + random;
}

function createEnemy(x, y, color){
  var enemy = new Kinetic.Rect({
      width: 100,
      height: 50,
      x: x,
      y:0,
      fill: color    
    });
  return enemy
}

creaNivel();
intv = setInterval(frameLoop,framesSegundo); 

function frameLoop(){
   creaEnemigos();
   MoverEnemigos();
   stage.draw();
}

我也是论坛的新手......我发现了一些关于变慢的事情，但我认为这是一个不同的问题。

谢谢

Answer 1

asset.remove 会将敌人从画布上带走，但不会摧毁敌人的物体。

使用asset.destroy 移除敌方对象使用的资源。

“回收”你的敌人比重新创造一个新敌人更有效：

当敌人离开舞台时，将其 X 属性设置为 -100 表示它处于非活动状态

function MoverEnemigos(){
   for (i in grupoEnemigos.children){
      var asset = grupoEnemigos.children[i];
      if(asset.x()==-100){
          // enemy is inactive, do nothing
      }else{
          // enemy is active
          asset.move(-5,0);
          if (asset.getX() + asset.getWidth()<0){
              // enemy is offstage so make enemy inactive
              asset.x(-100);
      }
   }
}

然后当你需要一个新的敌人时，你可以找到一个不活跃的敌人并重置它的属性。

function createEnemy(x, y, color){

    // see if there is an inactive enemy to reuse
    for (i in grupoEnemigos.children){
      var asset = grupoEnemigos.children[i];
      if(asset.x()==-100){
          // this enemy is inactive, reuse it
          asset.x(x);
          asset.y(0);
          asset.fill(color);

          // this enemy is already in groupoEnemigos so don't add it
          // Don't add it again in creaEnemigos
          return(asset);
      }
    }

    // no available inactive enemy so create a new enemy
    var enemy = new Kinetic.Rect({
        width: 100,
        height: 50,
        x: x,
        y:0,
        fill: color    
      });

    // this enemy is not in groupoEnemigos so add it
    grupoEnemigos.add(enemy);
    return enemy
}