[JAVASCRIPT/HTML (canvas)] fade out effect resolved

[Nightron]

Buna am o mica probleam si nu inteleg de ce nu functioneaza  sa incerc sa explic.

Pe scurt dorect sa modific opacity la classa Particle toate particle sunt salvate in array particlesData.

In functia draw am folosit ctx.save() si ctx.restore() le-am  facut ca sa afecteze doar codul dintre draw() si restore() ,in draw() am definit 

ctx.globalAlpha = this.alpha 

 unde this.alpha este definit in constructor 1

Dupa aceaa in functia update() am definitt 

this.alpha -= 0.02

unde se scade din alpha -0.02 in asa fel ar trebui sa creeze un efect si dispare in timp 

Apoi iau toate particle si in  animatia fac forEach ca sa accesezz toate particulele si pun conditiade mai jos

DAR NU MERGE si nu inteleg de ce .

Apoi cand se lovesc daca particle.alpha<=0 adica or disparut de pe ecran le sterg din particlesData

 

Sper sa se inteleaga ce dorect sa fac am incercat sa explic logica mea sper sa fie si buna

 

daca cineva poate intelege problema ar fi dragut din partea voastra sa ma ajutati

 

 

 

Orice ajutor este bine venit  multumesc

 

const ctx = canvas.getContext("2d");

class Particle {

  constructor(x, y, radius, color, velocity) {

    this.x = x;

    this.y = y;

    this.radius = radius;

    this.color = color;

    this.velocity = velocity;

    this.alpha = 1;

  }

  draw() {

    ctx.save();

    ctx.globalAlpha = this.alpha;

    ctx.beginPath();

    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);

    ctx.fillStyle = this.color;

    ctx.fill();

    ctx.restore();

  }

  update() {

    this.draw();

    this.x = this.x + this.velocity.x;

    this.y = this.y + this.velocity.y;

    this.alpha -= 0.01;

  }

}

  particlesData.forEach((particle, index) => {

    if (particle.alpha <= 0) {

      //delete particles if they are not visible >> particle.alpha <= 0 alpha

      particlesData.splice(index, 1);

    } else {

      particle.update();

    }

  });

 

Edited February 11, 2021 by Nightron

[Nightron]

sa rezolvat am gasit problema pur si simplu nu mai stiu sa scriu in forr loop eu facem push la  Projectile nu la Particle scuze deranju

 

 

for (let i = 0; i < 8; i++) {

            particlesData.push(

              new Particle(projectile.x, projectile.y, 3, enemies.color, {

                x: Math.random() - 0.5, //random x and y

                y: Math.random() - 0.5,

              })

            );