コンポーネントをクリックして関数を呼び出す方法は？

Question

function component(width, height, source, x, y) { 
    this.image = new Image(); 
    this.image.src = source; 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y;  
    this.update = function() { 
     ctx = myGameArea.context; 
     ctx.drawImage(this.image, 
      this.x, 
      this.y, 
      this.width, this.height); 
    } 
    this.newPos = function(a, b, image, h) { 
     this.x = a; 
     this.y = b; 
     this.image.src = image; 
     this.height = h; 
    } 
} 

コンポーネントでクリックが行われたときに関数を呼び出すにはどうすればよいですか？ クリックの座標を記録し、コンポーネントのものと比較するだけでいいですか？

Answer 1

HTML5 Canvasで作業する場合、クリックイベントを登録できる個々のノードはありません。実際に唯一のオプションは、<canvas>要素自体にclickイベントを登録し、XとYの座標を使用してクリックされたコンポーネントを特定することです。

Answer 2

私はあなたがバニラJSや特殊なエンジンを使用している場合は知らないが、あなたはjQueryのを使用することができれば、多分あなたは、このhttps://api.jquery.com/click/を見なければならない、それは機能をあなたのコンポーネントが コードをクリックするたびに実行することができます以下は、その機能がどのように使用できるかの例です。これが確実に機能することをテストしてください。

function component(width, height, source, x, y) { 
    this.image = new Image(); 
    this.image.src = source; 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y;  
    this.update = function() { 
     ctx = myGameArea.context; 
     ctx.drawImage(this.image, 
      this.x, 
      this.y, 
      this.width, this.height); 
    } 
    this.newPos = function(a, b, image, h) { 
     this.x = a; 
     this.y = b; 
     this.image.src = image; 
     this.height = h; 
    } 
    $(this).click(function(){ 
     //Code here 
    }); 
}