javascript(jQuery)で四角形と円の当たり判定をする

開発環境は、Windows7 Professional(32bit)+firefox 57.0.2(32bit)+jQuery3.2.1。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
	var canvas = $("#rect")[0];
	if(canvas.getContext){
		var context = canvas.getContext('2d');

		context.fillRect(20,40,50,100);
	}

	$("#rect").mousemove(function(e){
		var x = e.offsetX;
		var y = e.offsetY;

		if((x >= 20 && x <= 70) && (y >= 40 && y <= 140)){
			$("#t").text("当たりました");
		}else{
			$("#t").text("当たってません");
		}
	});
});
</script>
</head>
<body>
<h1>四角形の当たり判定</h1>
<div id="t"></div>
<canvas id="rect">
</canvas>
</body>
</html>

四角形(正方形、長方形)は簡単なんですが、円や複雑な多角形の場合、どう表現すればいいか・・・。

(追記)
・円の場合、ちょっと考えた後に調べてみると、実に簡単なことでした。単に、円の中心の座標と、マウスカーソルの位置座標から、三平方の定理で距離を求めて、円の半径以下になったら、当たっている、そうじゃなければ、当たっていないというだけでした。
・効率的な受験勉強法と同じで、考えるんじゃなくて、すぐに答えを見て、単位時間当たりに、できるだけ多くのテクニックを頭の中に暗記したほうが良いのかもしれません。でも、"自分の頭で"考えたくなるんですよね。
・以下にコードを書いておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
	var canvas = $("#rect")[0];
	if(canvas.getContext){
		var ctx = canvas.getContext('2d');

  		ctx.arc(70, 70, 60, 0, Math.PI*2, true);
  		ctx.fill();
	}

	$("#rect").mousemove(function(e){
		var x = Math.abs(e.offsetX - 70);
		var y = Math.abs(e.offsetY - 70);
		range = Math.sqrt((x * x) + (y * y)); // 三平方の定理

		if(range <= 60){
			$("#t").text("当たっています");
		}else{
			$("#t").text("当たっていません");
		}
	});
});
</script>
</head>
<body>
<h1>円の当たり判定</h1>
<div id="t"></div>
<canvas id="rect">
</canvas>
</body>
</html>

基本的なコードは四角形の段階で書いていたので、円の段階では、単に、
　1.描画する図形の変更
　2.mousemoveイベント時の処理の変更
の2点だけなので、短い時間で済みました。

あとは、複雑な多角形(円と違って中心までの距離が部分的に違うケース)だけだ・・・。

参考リンク
当たり判定のアルゴリズム（2D 四角×四角） - Qiita
矩形同士の当たり判定
 円と円の当たり判定
 さまざまな図形を描く - Canvas - HTML5.JP
abs関数 - Mathクラス - JavaScript入門
 Math.sqrt - 平方根を得る - JavaScriptリファレンス

k01ken’s b10g

He110 W0r1d!

javascript(jQuery)で四角形と円の当たり判定をする