当一个生命结束时，所有粒子都会被删除

All particles get deleted when one life ends

本文关键字：粒子 删除 一个 结束 生命      更新时间：2023-09-26

https://jsfiddle.net/zwkdf0cg/12/

class Emitter {
    constructor(settings) {
        for (let key in settings) {
            this[key] = settings[key];
        }
        this.particle = undefined;
        this.parts = [];
    }
    grab_parts(particle_settings) {
        this.particle = particle_settings;
        return this.particle;
    }
    load_parts() {
        if (this.counters.rate >= this.rate) {
            for (let i = 0; i < this.particles.max; i++) {
                this.parts.push(new Particle(this.particle));
            }
            this.counters.rate = 0;
        }
        this.counters.rate += this.timer();
    }
    draw_parts() {
        for (let i = 0; i < this.parts.length; i++) {
            let p = this.parts[i];
            let can = this.canvas;
            let con = this.context;
            con.beginPath();
            con.arc(p.x, p.y, p.radius, 0, 2 * Math.PI);
            let gradient = con.createRadialGradient(p.x, p.y, p.radius, p.x, p.y, 0);
            gradient.addColorStop(0,'hsla(20, 80%, 50%, 0)');
            gradient.addColorStop(1,'hsla(20, 80%, 50%, 0.5)');
            con.fillStyle = gradient;
            con.fill();            
        }
    }
    update_parts() {
        let can = this.canvas;
        let con = this.context;
        for (let i = 0; i < this.parts.length; i++) {
            let p = this.parts[i];
            if (p.x < -5 || p.x > can.width || p.y < -5 || p.y > can.height || p.counters.life < 0) {
                let s = this.parts.splice(i, 1);
            } else {
                this.parts[i].update();
            }
        }        
    } 
}

class Particle {
    constructor(settings) {
        for (let key in settings) {
            this[key] = settings[key];
        }
        this.initialize = {
            angle: false
        }
        this.life.range = number_range(this.life.min, this.life.max);
        this.counters.life = this.life.range;
    }
    update() {
        if (!this.initialize.angle) {
            this.angle = radians(number_range(160, 180));
            this.initialize.angle = true;
        }
        this.x += 1 * Math.cos(this.angle);
        this.y += 1 * Math.sin(this.angle);
        this.counters.life -= this.timer();        
    }
}

每当创建粒子时，我都会将其寿命设置为介于2和8之间的数字。在从发射器的update_parts（）方法调用的粒子的update（）方法中，它的寿命计数器会减少它的timer（）属性，该属性返回自上次更新以来经过的时间。发射器的update_parts（）方法有一个条件，如果粒子越界或寿命<每当单个粒子的寿命<0，屏幕上所有的粒子都拼接在一起了，我不明白为什么。我尝试过反转数组的迭代，创建一个只包含活粒子的新数组，并将发射器的parts[]数组分配给它，标记死粒子，并创建一个新函数，在调用update_parts（）并随机调整后删除它们。我在将particle_settings对象传递到粒子的构造函数的方式上遇到了一些问题，但我不知道它们是否相关。ET打电话回家。

这段代码是罪魁祸首：

for (let key in settings) {
    this[key] = settings[key];
}

当您将counters对象传递到那里时，它不会被复制，而是在实例之间共享。

使用lodash的cloneDeep检查更新版本：

_.assign(this, _.cloneDeep(settings));

_.assign将属性分配给this，类似于原始代码
CCD_ 5执行CCD_ 6对象的深度复制。

您正在迭代的数组上调用.splice()，这是个坏主意；splice()会更改它所调用的数组的大小，因此循环的测试条件不会总是像您认为的那样工作。如果将update_parts()中的for()循环替换为以下内容会发生什么：

this.parts = this.parts.filter(function(part) {
  // filter out the ones we don't want...
  return !(p.x < -5 || p.x > can.width || p.y < -5 || p.y > can.height || p.counters.life < 0);
}).forEach(function(part) {
  // ...and update the rest
  part.update();
});
相关文章：