Question

在this笔中，我遇到的问题是阵列中的最后一个球没有显示一瞬间。我相信这是因为在移动阵列时，对象必须重新渲染，但我似乎无法找到解决方案。

function draw() {
  background(0);
  noStroke();

  console.log(balls);
  balls.forEach((i) => {
    i.show();
    i.radius += 1;
    i.opacity -= 1;
    if (i.opacity == 150) {
      let newBall = new Ball(canvas.width/2, canvas.height/2, size, opacity);
      balls.push(newBall);
    }
    if (i.opacity == 0) {
      balls.shift();
    }
  });

Answer 1

使用forEach()函数迭代时，不应在数组中添加或删除对象。

来自MDN：

forEach()处理的元素范围在第一次调用callback之前设置。 forEach()将不会访问在callback调用开始后附加到数组的元素。如果更改了数组现有元素的值，则传递给callback的值将是forEach()访问它们时的值;访问之前删除的元素不会被访问。如果在迭代期间删除了已访问过的元素（例如，使用shift()），则将跳过后面的元素

换句话说，要更加思考这个if语句正在做什么：

if (i.opacity == 0) {
  balls.shift();
}

在这里，您检查i（当前球）的不透明度是否为零，如果是，则删除第一个球。这几乎肯定不是你想要做的。

谷歌搜索“forEach期间的javascript修改数组”将返回大量结果。提示：您可以考虑将其分为两个步骤：一个循环遍历数组并添加新球，另一个循环遍历数组并删除要删除的球。基本的for循环会让你在这里相当远。

移动数组后，p5对象呈现奇怪的效果

1 个答案: