1人の人生は、私はそれが作成されるたび2と8の間の数であるように、粒子の寿命を設定

Question

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();   
    } 
} 

終了時にすべての粒子が削除されます。エミッタのupdate_parts（）メソッドから呼び出されたパーティクルのupdate（）メソッドでは、最後の更新から経過した時間を返すtimer（）プロパティによって寿命カウンタが減少します。エミッタのupdate_parts（）メソッドには、エミッタのparts []配列から粒子をスプライスする条件があります。範囲外であるか寿命が<であれば0になります。単一のパーティクルの寿命が<である場合、私は理由を理解できません。私は配列の反復を試み、生きているパーティクルのみを持つ新しい配列を作成し、エミッタのparts []配列をこれに割り当て、死んだパーティクルにフラグを立て、update_parts（）が呼び出された後にそれらを削除する新しい関数を作成しようとしました。ランダムな微調整。私はparticle_settingsオブジェクトをパーティクルのコンストラクタに渡す方法にいくつかの問題がありましたが、これらが関連しているかどうかはわかりません。 ET電話のホーム。

Answer 1

このコードは責任がある：あなたがcountersオブジェクトが渡したよう

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

それがコピーされますが、インスタンス間で共有されていない、あなたはこれでupdate_parts()にfor()ループを交換する場合はどうなります。

チェックupdated versionlodashの使用cloneDeep代わり：

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

_.assignがあなたの元のコードに似てthisにプロパティを割り当てます。
_.cloneDeepは、settingsオブジェクトのディープコピーを実行します。

Answer 2

あなたが反復している配列には.splice()が呼び出されています。これは悪い考えです。 splice()changes the size of the array it's called onあなたのループのテスト条件は、あなたが思うように常に動作するとは限りません。

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(); 
});