鼠标移动时粒子跟随光标移动(Javascript - Canvas)

<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 2 + 1;
    this.opacity = 1;
    this.directionX = Math.random() * 2 - 1;
    this.directionY = Math.random() * 2 - 1;
  }

  update() {
    this.x += this.directionX;
    this.y += this.directionY;
    if (this.opacity > 0.1) {
      this.opacity -= 0.1;
    }
    if (this.radius > 0.1) {
      this.radius -= 0.1;
    }
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
    ctx.fill();
  }
}

const particles = [];

function createParticles(e) {
  const x = e.clientX;
  const y = e.clientY;
  for (let i = 0; i < 5; i++) {
    particles.push(new Particle(x, y));
  }
}

canvas.addEventListener('mousemove', createParticles);

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach((particle, index) => {
    if (particle.opacity <= 0.1) {
      particles.splice(index, 1);
    } else {
      particle.update();
      particle.draw();
    }
  });
  requestAnimationFrame(animate);
}

animate();