如何将淡化onclick事件添加到canvas系统中的特定粒子（数据对象）？

Question

我想点击其中一个浮动粒子，点击它后，我希望粒子颜色从浅灰色变为蓝色然后褪色。粒子数量设置为100，因为点击粒子可以消除粒子数量减少。我不熟悉js，昨天开始学习画布和粒子系统，这是笔的代码我已经改变了一点，想通过添加 fade onclick添加更多更改事件。我知道画布中的粒子是在一个完全定义它们的变量之下，我不知道如何在画布中隔离一个粒子来工作，因为我需要知道它的确切{{1}坐标。

那么我是否必须找到所有100个粒子的坐标并为每个粒子添加元素 - 我该如何做？

x,y

$(document).ready(function() {
  var PARTICLE_QUANT = 100;
  var FPS = 60;
  var BOUNCE = -1;
  var PARTICLE_COLOR = '#ced4d4';
  var ARC_RADIUS = 12;

  var Particles = function($element) {
    if ($element.length === 0) {
      return;
    }
    this.$element = $element;
    this.lastTimeStamp = null;
    this.particles = [];
    this.init();
  };

  var proto = Particles.prototype;
  proto.init = function() {
    this.createChildren()
    .layout()
    .enable();
  };

  proto.createChildren = function() {
    this.canvas = this.$element[0];
    this.context = this.canvas.getContext('2d');
    this.canvasWidth = this.canvas.width;
    this.canvasHeight = this.canvas.height;
    this.lastTimeStamp = new Date().getTime();

    return this;

  };


  proto.layout = function() {
    window.requestAnimFrame = (function() {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame;
    })();

    return this;
  };

  proto.removeChildren = function() {
    this.context = null;
    this.canvasWidth = null;
    this.canvasHeight = null;
    this.lastTimeStamp = null;

    return this;
  };

  proto.enable = function() {
    this.createParticleData();
    this.renderLoop();
  };

  proto.createParticleData = function() {
    var i = 0;
    var l = PARTICLE_QUANT;

    for (; i < l; i++) {
      this.particles[i] = {};
      this.setParticleData(this.particles[i]);
    }
  };


  proto.setParticleData = function(particle) {
    particle.x = Math.random() * this.canvasWidth;
    particle.y = Math.random() * this.canvasHeight;
    particle.vx = (Math.random()) - 0.5;
    particle.vy = (Math.random()) - 0.5;
  };

  proto.update = function() {
    var i = 0;
    var l = PARTICLE_QUANT;

    for (; i < l; i++) {
      var particle = this.particles[i];

      particle.x += particle.vx;
      particle.y += particle.vy;

      if (particle.x > this.canvasWidth) {
        particle.x = this.canvasWidth;
        particle.vx *= BOUNCE;
      } else if (particle.x < 0) {
        particle.x = 0;
        particle.vx *= BOUNCE;
      }

      if (particle.y > this.canvasHeight) {
        particle.y = this.canvasHeight;
        particle.vy *= BOUNCE;
      } else if (particle.y < 0) {
        particle.y = 0;
        particle.vy *= BOUNCE;
      }
    }
  };


  proto.draw = function() {
    var i = 0;

    if (!this.context) {
      return;
    }

    this.context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    this.context.fillStyle = PARTICLE_COLOR;

    for (; i < PARTICLE_QUANT; i++) {
      var particle = this.particles[i];
      this.context.save();
      this.context.beginPath();
      this.context.arc(particle.x, particle.y, ARC_RADIUS, 0, Math.PI * 2);
      this.context.fill();
      this.context.restore();
    }
  };

  proto.renderLoop = function() {
    requestAnimationFrame(this.renderLoop.bind(this));
    this.update();
    this.draw();
  };

  var particles = new Particles($('#js-particles'));

  //Everything above works, it is what comes next (below), is this the right  approach?

  var elem = document.getElementById('js-particles'),
      elemLeft = elem.offsetLeft,
      elemTop = elem.offsetTop,
      context = elem.getContext('2d'),
      elements = [];

  // Add event listener for `click` events.
  elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    elements.forEach(function(element) {
      if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width)
        });

    }, false);

    // Add element.
    elements.push({
      colour: '#05EFFF',
      width: 150,
      height: 100,
      top: 20,
      left: 15
    });

    // Render elements.
    elements.forEach(function(element) {
      context.fillStyle = element.colour;
      context.fillRect(element.left, element.top, element.width, element.height);
    });