JavaScript 游戏开始很快，随着时间的推移变慢

Question

我的简单 JavaScript 游戏是 Space Invaders 的克隆。

我正在使用 p5.js 客户端库。

我尝试了很多方法来尝试加快游戏速度。

一开始很快，然后随着时间的推移越来越慢，越来越慢，没有那么愉快了。

我并不是要展示我所有的代码。我不会展示每个 class，但我会展示主要的 class 一切都在发生的地方。

有人可以观察一下这个并告诉我你是否发现了什么重要的东西吗？

我是JS的新手，也是制作游戏的新手，我知道有一个叫update()的东西人们在脚本中使用但我不熟悉它。

谢谢。

var ship;
var flowers = []; // flowers === aliens 
var drops = [];
var drops2 = [];


function setup() {
 createCanvas(600, 600);
 ship = new Ship();
 for (var i = 0; i < 6; i ++) {
  flowers[i] = new Flower(i * 80 + 80, 60);
 }

 flower = new Flower();

}


function draw() {
 background(51);
 ship.show();
 ship.move();
 shipDrops();
 alienDrops();
 dropsAndAliens();
 dropDelete();
 drop2Delete();
}

 // if 0 drops, show and move none, if 5, etc..
 function shipDrops() {
    for (var i = 0; i < drops.length; i ++) {
    drops[i].show();
    drops[i].move();
  for (var j = 0; j < flowers.length; j++) {
  if(drops[i].hits(flowers[j]) ) {
    flowers[j].shrink();
    if (flowers[j].r === 0) {
     flowers[j].destroy();
    }
   // get rid of drops after it encounters ship
     drops[i].evaporate();
   }
     if(flowers[j].toDelete) {
   // if this drop remove, use splice function to splice out of array
     flowers.splice(j, 1); // splice out i, at 1
     }

  }
 }
  
}

 function alienDrops() {
  // below is for alien/flower fire drops 2
  for (var i = 0; i < drops2.length; i ++) {
   drops2[i].show();
   drops2[i].move();
  if(drops2[i].hits(ship) ) {
   ship.shrink();
   drops2[i].evaporate(); // must evap after shrink
   ship.destroy();
   if (ship.toDelete) {
    delete ship.x;
    delete ship.y;
    } // above is in progress, deletes after ten hits?
   
   }

  }
}

 function dropsAndAliens() {
 var randomNumber; // for aliens to shoot 
 var edge = false;
 
 // loop to show multiple flowers 
 for (var i = 0; i < flowers.length; i ++) {
  flowers[i].show();
  flowers[i].move();
  // ******************************************
    randomNumber = Math.floor(Math.random() * (100) );
      if(randomNumber === 5) {
    var drop2 = new Drop2(flowers[i].x, flowers[i].y, flowers[i].r);  
    drops2.push(drop2);
     }

  //**************** above aliens shooting 

  // below could be method, this will ensure the flowers dont 
  //go offscreen and they move 
  //makes whtever flower hits this space become the farther most
  //right flower,
  if (flowers[i].x > width || flowers[i]. x < 0 ) {
   edge = true;
  }

 }
  // so if right is true, loop thru them all again and reset x
  if (edge) {
   for (var i = 0; i < flowers.length; i ++) {
   // if any flower hits edge, all will shift down
   // and start moving to the left 
   flowers[i].shiftDown();
  }
 }



}


function dropDelete() {

 for (var i = drops.length - 1; i >= 0; i--) {
   if(drops[i].toDelete) {
   // if this drop remove, use splice function to splice out of array
    drops.splice(i, 1); // splice out i, at 1
   }

  }

}

function drop2Delete() {
  for (var i = drops2.length - 1; i >= 0; i--) {
   if(drops2[i].toDelete) {
   // if this drop remove, use splice function to splice out of array
    drops2.splice(i, 1); // splice out i, at 1
   }
     }

}


function keyReleased() {
 if (key != ' ') {
 ship.setDir(0); // when i lift the key, stop moving
 } 
}

function keyPressed() {
 // event triggered when user presses key, check keycode
 if(key === ' ') {
  var drop = new Drop(ship.x, height); // start ship x and bottom of screen 
  drops.push(drop); // when user hits space, add this event to array
 }


 if (keyCode === RIGHT_ARROW) {
  // +1 move right
  ship.setDir(1);
 } else if (keyCode === LEFT_ARROW) {
  // -1 move left
  ship.setDir(-1);
 } // setir only when pressing key, want continuous movement 
}

Answer 1

请 post 使用 MCVE 而不是我们无法运行的断开连接的代码段。请注意，这应该 而不是 是您的整个项目。它应该是一个小示例草图，仅显示问题而无需任何额外代码。

但是要弄清楚发生了什么，您需要调试您的程序。你需要找出这样的东西：

每个数组的长度是多少？它们会随着时间的推移不断增长吗？
实际帧率是多少？帧率是在下降，还是只是看起来更慢？
什么时候变慢了？尝试对不同的值进行硬编码以查看发生了什么。

请注意，我并不是要你告诉我这些问题的答案。这些是您需要问自己的问题。（事实上，您应该在 post 在 Stack Overflow 上提问之前得到所有这些答案！）

如果您仍然无法理解，请 post 在新问题 post 中回答 MCVE，我们将从那里开始。祝你好运。

JavaScript 游戏开始很快，随着时间的推移变慢

JavaScript game starts fast and slows down over time

javascript

performance

p5.js