问题描述
我正在尝试创建一个移动的装饰圆阵列,一旦圆从屏幕边缘移开,我想将其从阵列中移除。我已经尝试从数组中进行拼接和过滤——但是,一旦我这样做,所有数组中的圆圈都会被删除,而不仅仅是预期的圆圈。检查了多个来源并尝试了不同的想法,但我根本无法弄清楚出了什么问题。您可以在 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;
}
}
}
提前致谢!!
解决方法
您的问题并不是世界上最明显的问题,而是来自您的 for 循环以及您如何更新圈子的 x 位置:
for (let i = circles.length - 1; i >= 0; i--) {
circles[i].update(i * 200)
当您删除一个圆时,随后的圆都会在您的数组中向下移动一个索引,这意味着如果您删除索引 0
处的圆,则索引 1 处的圆现在变成索引 0 处的圆,当您在下一次调用 cricles[i].update(i * 200)
时应用您的 draw()
,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
(因为 circleNum 将保持一致,与 i
不同):
this.pos = this.xPos + (this.circleNum*dist) / 1.8;