キャンバス画像とサイド検出の衝突

Question

私はオンラインゲームを作っています。私は自分のゲームを構築するためにHTML5キャンバスとJavascriptを使用しています。
私はいくつかの形と1つのボールが動いていて、形が衝突したときに形が消えてしまいます。私の形状は長方形、三角形、多角形と...例えばあるため
形状とボールはイメージであり、私の大きな問題点は、ボールと形状との衝突を検出する方法である：This Shape

これは、衝突を検出するために私のコードですが、それはちょうど長方形のために働く：

function collide(r1, r2) { 
var dx = (r1.x + r1.width/2) - (r2.x + r2.width/2); 
var dy = (r1.y + r1.height/2) - (r2.y + r2.height/2); 
var width = (r1.width + r2.width)/2; 
var height = (r1.height + r2.height)/2; 
var crossWidth = width * dy; 
var crossHeight = height * dx; 
var collision = 'none'; 

if (Math.abs(dx) <= width && Math.abs(dy) <= height) { 
    if (crossWidth > crossHeight) { 
     collision = (crossWidth > (-crossHeight)) ? 'bottom' : 'left'; 
    } else { 
     collision = (crossWidth > -(crossHeight)) ? 'right' : 'top'; 
    } 
} 

return (collision); 

}

Answer 1

ただ、三角形のために動作するようにし、それはすべての形のために働くあなたの衝突コードを入手します！ここでは、（ほとんど）this questionから取られた、それを行うためのJavascriptコードの式です。 pはポイントがボールやサークルとの形状のコーナーのそれぞれは、単にいくつかのポイントをテストするだろう衝突検出では、のためのあなたのテストここであなただけの、inTriangle(p, v1, v2, v3)、実行する必要があり、このコードで

function sign(p1, p2, p3) { 
    return (p1[0] - p3[0]) * (p2[1] - p3[1]) - (p2[0] - p3[0]) * (p1[1] - p3[1]); 
} 

function inTriangle(point, trip1, trip2, trip3) { 
    var b1 = sign(point, trip1, trip2) < 0.0; 
    var b2 = sign(point, trip2, trip3) < 0.0; 
    var b3 = sign(point, trip3, trip1) < 0.0; 

    return ((b1 == b2) && (b2 == b3)); 
} 

円周上に、v1; v2; v3はあなたがテストする三角形の3つの点です。

矩形の衝突をテストする方が効率的ですので、矩形のように分割できるシェイプを持つ場合は、三角形に分割するのではなく、分割する必要があります。