JavaScript游戏会快速启动并随着时间的推移而减慢速度

Question

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

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

我尝试了许多尝试加速游戏的事情。

它开始很快，然后随着时间的推移变得越来越慢，越慢越好，它并不令人愉快。

我并不是要展示我拥有的所有代码。我没有展示每一堂课，但我会向主要班级展示一切都在发生的事情。

有人能看到这个并告诉我你是否看到了什么重大事件？

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

谢谢。

＆＃13;

＆＃13;

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 
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

• 每个阵列的长度是多少？它们会不断增长吗？
• 实际帧率是多少？帧速率下降，还是看起来更慢？
• 什么时候变慢？尝试对不同的值进行硬编码，看看发生了什么。

请注意，我不是要求您告诉我这些问题的答案。这些是你需要问自己的问题。 （事实上​​，在Stack Overflow上发布问题之前，你应该拥有所有这些答案！）

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