javascript - パーティクルをクリック可能にすることはできますか?

Question

私は次の粒子スクリプトを持っています（ウェブから見つけて編集してください！）： http://jsfiddle.net/neuroflux/hSkFX/1/

各パーティクルを「クリック可能」にする最も簡単な方法は何ですか?

これらは要素ではなく、x/y/半径のポイントであることを理解しています。

最も簡単な方法は何だと思いますか?

乾杯！

[編集]この質問は、クリック イベントではなくクリック領域に関するものです....

Answer 1

キャンバス内の要素をクリックしたことを実際に知る方法はありません。あなたが知っているのは、ユーザーがキャンバス オブジェクト上でクリックした x/y 位置です。その x/y 位置を取得して、そこに何かがあるかどうかを調べることができます。別のオプションは、そこでピクセルの色をチェックして、色が付いているかどうかを確認することです。

Answer 2

このチュートリアルは特に役に立ちました。 http://simonsarris.com/blog/510-making-html5-canvas-useful これは必要な関連部分です。

// Determine if a point is inside the shape's bounds
    Shape.prototype.contains = function(mx, my) {
// All we have to do is make sure the Mouse X,Y fall in the area between
// the shape's X and (X + Height) and its Y and (Y + Height)
    return  (this.x <= mx) && (this.x + this.w >= mx) &&
          (this.y <= my) && (this.y + this.h >= my);
    }

.contains 関数を Circle() オブジェクトに実装する必要がありますが、円の中心からのカーソル位置の距離を円の半径と比較してメソッドを変更し、小さい場合は 1 を返す必要があります。