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

Question

好的，所以红色方块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" />

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

Answer 1

这是更平滑的性能的一个例子。

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" />

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

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