p5.js 数组：拼接多个对象而不是单个对象

Question

我正在尝试创建一个移动的装饰圆阵列，一旦一个圆移出屏幕边缘，我想将其从阵列中移除。我已经尝试从数组中进行拼接和过滤——但是，一旦我这样做，所有数组中的圆圈就会被删除，而不仅仅是预期的圆圈。检查了多个来源并尝试了不同的想法，但我根本无法弄清楚出了什么问题。您可以在 p5.js 编辑器中查看演示：https://editor.p5js.org/devalladares/sketches/v6bWAiISM

这里的主要代码如果有帮助的话：

function setup() {

   //Create new Circle
   for (let i = 0; i < circleNumber; i++) {
     circles.push(new createCircle())
   }
 }

 function draw() {

   for (let i = circles.length - 1; i >= 0; i--) {

     circles[i].update(i * 200)

     //This is the problem: Simply cannot figure it out

     //Splicing

     if (circles[i].isDead()) {
       circles.splice(i, 1)
     }
   }

   //Filtering
   // circles = circles.filter(x => !x.isDead())
 }

//Class to create Circle

class createCircle {

   constructor() {
     this.circle = []
       this.origin = i * gap + emptySpace2
     this.pos = 0
     this.xPos = width / 5
     this.create()
   }

   create() {
     for (let i = 0; i < ringNumber; i++) {
       this.circle.push(new circleRing())
     }
   }

   update(dist) {

     push()
     this.xPos -= xSpeed
     this.pos = this.xPos + dist / 1.8

     translate(this.pos, this.origin / 1.15)
     scale(0.6, 0.6)

     for (let circles of this.circle) {
       circles.update()
     }
     pop()
   }

   isDead() {
     if (this.pos < 40) {
       return true;
     } else {
       return false;
     }
   }
 }

提前致谢！！

Answer 1

你的问题不是世界上最明显的问题，但它来自你的 for 循环以及你如何更新圈子的 x 位置：

for (let i = circles.length - 1; i >= 0; i--) {
     circles[i].update(i * 200)

当你删除一个圆时，后续的圆都会在你的数组中向下移动一个索引，这意味着如果你删除索引 0 处的圆，索引 1 处的圆现在变成索引 0 处的圆，当你在下一次调用 draw() 时应用你的 cricles[i].update(i * 200)，i*200 将评估为 0，这会导致你的圈子转移到“杀戮区”。

相反，您在创建圈子时会在圈子中存储一个内部 circleNum 属性，并根据此调整您的位置：

class createCircle {
  constructor(circleNum) {
    this.circle = [];
    this.pos = 0;
    this.xPos = width / 5;
    this.circleNum = circleNum;
    this.create();
  }
  ...
}

然后在创建圈子时，传入索引：

//Create new Circle
for (let i = 0; i < circleNumber; i++) {
  circles.push(new createCircle(i))
}

另外，改变你的称呼方式 .update():

circles[i].update(200);

最后，在计算新位置时使用 circleNum（因为与 i 不同，circleNum 将保持一致）：

this.pos = this.xPos + (this.circleNum*dist) / 1.8;

p5.js 数组：拼接多个对象而不是单个对象

p5.js Array: Multiple Objects getting Spliced instead of Single

javascript

arrays

filter

splice

p5.js