11.線と点との当たり判定
線と点との当たり判定を行います。
線は無限の点をもつので、どう判定するのか一瞬迷いますが、
線のベクトル方向と点と線を結んだベクトルの方向が同じであれば
同一線状にあると判断できることを利用して、
線と点との当たり判定を行うことができます。
では、点と線との当たり判定を行うプログラムです。
まずは、処理の負担を減らすために点と点の当たり判定を行い、
次に点と線のベクトルを求めて平行であるかをチェックします。
/**
chapter11
collision line with point
*/
function linePointCollision(line,point){
if(pointPointCollision(line.base,point)){
return true;
}
// 点と線のベクトルの向き
var lp = subtractVector(point,line.base);
return isParallelVector(lp,line.direction);
}
ここで、点と点との当たり判定を行なっています。
点を表すクラスを作成しました。Vector2Dクラスと変わりはありませんが、
描画関数を新たに定義しています。
/**
chapter11
collision point with point
*/
function pointPointCollision(point1,point2){
if(equalFloats(point1.x,point2.x) && equalFloats(point1.y,point2.y)){
return true;
}
return false;
}
/**
chapter11
point class
*/
var Point2D = class Point2D {
constructor(x,y,color){
this.x = x;
this.y = y;
this.color = color;
}
}
Point2D.prototype.draw = function(ctx){
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.moveTo(this.x,this.y);
ctx.lineTo(this.x + 1,this.y + 1);
ctx.stroke();
}
線と点の当たり判定のサンプル
では、最後にサンプルです
ドラッグで線を動かすことができます。