Клик в canvas по разным элементам

[Negotiant]

//Есть у меня такое задание: "Необходимо отловить клик по картинкам-'спутникам', к-е вращаются вокруг десяти "планет"(particles)", -  по 'планетам'  получилось легко, а по летающим вокруг не получается..), буду рад какому-нибудь примеру или пояснению, что поможет реализовать задуманное.. Фрагмент кода:

          var canvas = document.getElementById('canvas');
          var context = canvas.getContext('2d');
 
         var W = window.innerWidth,
         H = window.innerHeight;
    canvas.width  = W;
    canvas.height = H;
 
    var angle = 0;
    
    var currentAngle = 0;
    var TO_RADIANS = Math.PI / 180;
    var particles = [];
    var Lradius = 20;
    var radius = 80;
    var data = { 
cartoons: ['img/1.png','img/2.png','img/3.png','img/4.png', 'img/5.png ]};
    //  картинки-"спутники", произвольное кол-во

    function Particle() {
    this.images = data.cartoons[i];
    this.radius = 20;
    this.radis = 80;
    this.x = Math.floor((Math.random() * canvas.width / 2) + this.radius*1.5);
    this.y = Math.floor((Math.random() * canvas.height / 2) + this.radius*1.5);
    
    this.speedx = Math.round((Math.random() * 101) + 0) / 100;
    this.speedy = Math.round((Math.random() * 101) + 0) / 100;
 
    this.move = function() {
 
    
        context.beginPath();
        context.globalCompositeOperation = "source-over";
 
        context.save();
        context.translate(this.x, this.y);
        context.rotate(Gangle * TO_RADIANS);
        var image = new Image();                //основная картинка
        image.src = 'img/8.png';
        context.drawImage(image,20, -20, 40, 40);
        context.restore();
        angle+=0.1;

        for (var m = 0; m < this.images.length; m++) {  //картинки-"спутники" 
          var image2 = new Image();
          image2.src = this.images[m];
          var dist = Math.PI*2 /this.images.length;
          var pattern2 = context.createPattern(image2, "no-repeat");
          context.fillStyle = pattern2;
          var vx = Math.cos(dist*m+currentAngle) * (this.radius - 5);
          var vy = Math.sin(dist*m+currentAngle) * (this.radius - 5);
          context.drawImage(image2, (this.x -  this.Lradius) + vx, (this.y -  this.Lradius) + vy, this.Lradius*2, this.Lradius*2);
        
        }
    }
    };
 
    for (var i = 0; i < 10; i++) {
      var particle = new Particle();
        particles.push(particle);
    }
 
    function animate() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < particles.length; i++) {
        particles[i].move();
 
    }
      requestAnimFrame(animate);
    }
    animate();
    
    canvas.addEventListener('mousedown', function (e) {
// клик по 'главным' картинкам. Пробовал так же достучаться до картинок-"спутников", не получается..
        var xCoord = e.offsetX;
        var yCoord = e.offsetY;
  for( var i = 0; i < particles.length; i++ ){
  if((xCoord >= particles[i].x - particles[i].radius && xCoord <= particles[i].x + particles[i].radius) && (yCoord >= particles[i].y - particles[i].radius && yCoord <= particles[i].y + particles[i].radius)){

                var div = document.getElementById("div");
                div.innerHTML = 'click';// проверка
  
            }
  
        }
  
    });

[Alexandroppolus]

Negotiant,
Просто запоминай координаты, где эти спутники были нарисованы, потом в mousedown так же проверяй.

[Rise]

Negotiant,
С точки зрения абстракции класса, спутник это та же планета (particle) - спутник вращается вокруг планеты, планета вращается вокруг звезды (солнца), у них абсолютно одинаковый интерфейс: x, y, radius, image, move и тд, осталось добавить type чтобы их отличать и hasClick(clickX, clickY) чтобы клик проверять:

function Particle(type/*, ...*/) {
    this.type = type;
    // ...
}
Particle.prototype.hasClick = function(x, y) {
    return Math.hypot(x - this.x, y - this.y) <= this.radius;
};

particles.push(new Particle('planet'/*, ...*/), new Particle('sputnik'/*, ...*/)/*, ...*/);

canvas.addEventListener('click', function (e) {
    for (var i = 0; i < particles.length; i++) {
        if (particles[i].hasClick(e.offsetX, e.offsetY)) {
            alert(particles[i].type);
        }
    }
});

[Negotiant]

Ага, спасибо, буду пробовать..

[Negotiant]

Уважаемый Rise, а можно немного подробнее - у меня получается только удвоить кол-во "планет", запушивая new Particle с новым type, хоть и присвоенный "спутникам"..

[Rise]

Negotiant,
Не знаю что подробнее, сначала делают на простых фигурах.