Jump to content
Nightron

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

Recommended Posts

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 :D multumesc

 

const ctx = canvas.getContext("2d");
class Particle {
  constructor(x, y, radius, color, velocity) {
    this.= x;
    this.= 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.= this.+ this.velocity.x;
    this.= this.+ 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 by Nightron
Link to comment
Share on other sites

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 :D

 
 
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,
              })
            );
  • Upvote 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...