Jsで画像同士の当たり判定

質問

タイトルの通りですが、Aという画像がBに当たると当たり判定がなされBという画像が消えるというJavascriptを書きたいです。
Jsの知識が全くないため、どのように書くのかわからないです。
どのように書くのかなどでも良いのでアドバイスお願いします。

回答No.1

AsarKingChang

JSの知識というより、プログラム全般で使いますね。
x1,y1,w1,h1 画像Aの位置とサイズ
x2,y2,w2,h2 画像Bの位置とサイズ
が当然必要ですが。
----------------------------**********--------------------　画像A
---------------**********---------------------------------　画像B
画像Aが移動するとしたら、
画像Bの位置に画像Bの長さを加えたものが、画像Aの開始位置を下回れば接触

----------------**********--------------------------------　画像A
----------------------------------**********--------------　画像B
これと、画像A+画像Aの大きさを加えたものが画像Bの開始位置より大きいか？
の2点をANDしたものが、X軸のみ１次元での、交差判定なので、
これを、Y軸に対しても行えば、2次元判定。（３次元も増やすだけで同じ）
ってのを関数化して、hit_check()とでもすれば、完成です。
なお、w=width,h=heightの略として書かせてもらいました。
基本的なアルゴリズムなので、おそらく一生使う概念だと思いますよ。

ちなみ、アンカーポイントといって、
画像A、画像Bの中心点を求めておき、差分を求めて、
その値が、画像Aと画像Bのサイズの半分か？
だけでも、求まります。