javascript - 为什么红色块会跳过p5.js中的块？

好的，所以红色方块dangers[]应该在画布上顺滑地掉下来，但是它们跳过并且动作怪异。它与show();的for循环有关系吗？

这是代码：

var dangers = [];

function setup() {
	createCanvas(1060, 480);
	createDanger();
}
var x = 0;

function createDanger() {
	var randomWidth = (floor(random(980)) * 80) % 980;
	dangers[x] = new Danger(randomWidth, -80);
	dangers.forEach(function(obj) {
		setInterval(function() {
			obj.fall();
		}, 1000);
	});
	x++;
	console.log(dangers);
}

function draw() {
	background(0);


	for (danger of dangers) {
		danger.show();
	}


}

setInterval(createDanger, 3000)



//Danger


function Danger (x, y) {
	this.x = x;
	this.y = y;
	var size = 80;
	this.fall = function () {
		this.y += size;
	}
	this.update = function () {
	}
	this.show = function () {
		fill(255,0,0);
		noStroke();
		rect(this.x, this.y, size, size);



	}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<meta charset="utf-8" />

如果您对我的代码有其他建议，请随时提供帮助。谢谢。

最佳答案

这是更平滑性能的示例。

var dangers = [];

function setup() {
	background(0);
	createCanvas(1060, 480);
	createDanger();
}

function createDanger() {
	var randomWidth = (floor(random(980)) * 80) % 980;
	dangers.push(new Danger(randomWidth, -80));
}

var lastRenderTime;

function update() {
  var now = Date.now();
  if (lastRenderTime) {
    var elapsed = (now - lastRenderTime) / 1000;
    dangers.forEach(function(obj) {
			obj.fall(elapsed);
		});
  }

  dangers = dangers.filter(d => d.y < 400);

  lastRenderTime = now;
}

function draw() {
  update();

  background(0);
	for (danger of dangers) {
		danger.show();
	}
}

setInterval(function () {
   createDanger();
}, 500)


//Danger


function Danger (x, y) {
	this.x = x;
	this.y = y;
  this.speed = 40 + random(50); // pixels per second
	var size = 80;
	this.fall = function (time) {
		this.y += this.speed * time;
	}
	this.update = function () {
	}
	this.show = function () {
		fill(255,0,0);
		noStroke();
		rect(this.x, this.y, size, size);



	}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
<meta charset="utf-8" />

这与原始版本很接近，只不过我做了一些不同的事情：


创建新对象时，我摆脱了为每个对象设置更新功能的想法。那只是没有道理。
我更新了每个对象在每一帧上的位置。我通过添加从update函数调用的draw函数来完成此操作。这样可以保证动画在渲染每一帧之前都是最新的。
我使用绝对实时时钟来调整每帧所经过的时间。我使用lastRenderTime变量跟踪此情况，并减去now减去lastRenderTime以计算经过的时间。经过的时间作为参数传递给更新功能。
我使用了一种基于物理的方法来更新对象的位置。
我以像素每秒为单位定义了每个对象的速度。根据自动画的最后一帧以来经过的实际时间量，不更新位置而不是每帧更新固定位置量，而是更新可变位置。这样可以确保对象实时一致地移动，而不管渲染它的机器的性能如何。因此this.y += size变为this.y += this.speed * time。
我更改了对数组的访问，以使用push，它是您要执行的操作的一种与语言无关的描述，而不是依靠JavaScript的古怪“在注销数组末尾时延长数组的长度”的行为。
我添加了一个filter函数，以删除过期的对象，直到它们到达窗口的底部，以确保数组不会随着绑定的增长而增长，并且会随着时间的推移而消耗资源。
我将创建对象的频率从每3000毫秒一次增加到每500毫秒一次。也许只是因为我有点急躁。 :)
我还决定为每个对象选择一个随机速度，只是为了一些视觉上的变化，并明确每个对象都有自己的速度。

关于javascript - 为什么红色块会跳过p5.js中的块？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52839079/