Ajouter un auditeur d'événement à un objet dessiné sur le canevas html5

Je fais un jeu où les bulles (cercles) apparaissent sur l'écran et se déplacent vers le haut et j'utilise HTML5 et JavaScript uniquement, ce qui signifie qu'aucun cadre comme la cinétique et aucun jQuery n'est du tout.

Je suis arrivé à un point où je veux ajouter un auditeur d'événements à la bulle elle-même, maintenant je comprends que, parce que la bulle est un objet sur la toile, elle n'a pas de méthode 'addEventListener', donc je ne peux pas directement ajouter un clic Événement à la bulle, je me demandais si quelqu'un pourrait m'aider avec ce problème que j'ai? Voici un violon de ce qui se passe jusqu'à présent …

Bulles

J'ai essayé d'ajouter l'auditeur d'événements à la bulle comme spécifié précédemment en faisant cela …

bubbles[i].addEventListener('click', function); 

J'ai également essayé d'ajouter des événements de souris tels que

 bubbles[i].onmouseenter = function () { console.log("blah") } 

Mais maintenant, je suis sérieusement en perte

Merci d'avance!

J'ai mis à jour votre échantillon sur jsfiddle démontrant les tests de succès. Cet exemple utilise un gestionnaire d'événements onmousemove lié à la toile et effectue le test de succès réel lorsque cet événement se produit. Le test de réussite dans votre cas est "Est-ce que la souris se coordonne dans le cercle de la bulle?"

Sommaire des changements:

  • Une «bulle» a une propriété de couleur pour démontrer l'effet d'un test de succès.
  • function hitTest(x, y) { ... } utilisé pour tester si les coordonnées passées sont dans la bulle.
  • function getMouse(e, canvas) ... utilisé pour transformer les coordonnées de la souris en coordonnées relatives aux canvas. C'est-à-dire que la coordonnée de la souris doit être relative au coin supérieur gauche de la toile pour être précise.