オブジェクトの衝突の基本理論、Javascriptのスプライト

この記事では、次のようなテクニックを検討します。

• オブジェクトの寸法の共通部分
• ポリゴンポイントアクセサリー

そして、ゲーム「Asteroids」の仕組みの実装例を考えてみましょう。

オブジェクトの寸法の共通部分

ほとんどすべてのオブジェクト/スプライトを長方形に刻むことができ、その長さと幅は元のオブジェクトの寸法です。 寸法の交点を見つけることが、衝突を判断する最初のステップです。 この操作は多くのリソースを必要としないため、ほとんどの場合、この関数は衝突が必要なオブジェクトのペアを見つけるために使用されます。

function MacroCollision(obj1,obj2){ var XColl=false; var YColl=false; if ((obj1.x + obj1.width >= obj2.x) && (obj1.x <= obj2.x + obj2.width)) XColl = true; if ((obj1.y + obj1.height >= obj2.y) && (obj1.y <= obj2.y + obj2.height)) YColl = true; if (XColl&YColl){return true;} return false; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ソースコードからわかるように、衝突の定義は、X軸とY軸上の長方形の投影の交差の定義に基づいています。交差する場合、関数はtrueを返します。

ポリゴンポイントアクセサリー

小惑星のようなゲームを作っていると想像してみましょう。 各小惑星は不規則な多角形（多角形）です。 プレイヤーの弾丸は円です。 小惑星と弾丸のスケールの比率を考えると、弾丸のサイズを無視して、円の中心点まで縮小することができます。 したがって、衝突を見つけることは、ポイントがポリゴンに属するかどうかを判断することになります。

 function pointInPoly(polyCords, pointX, pointY) { var i, j, c = 0; for (i = 0, j = polyCords.length - 1; i < polyCords.length; j = i++) { if (((polyCords[i][1] > pointY) != (polyCords[j][1] > pointY)) && (pointX < (polyCords[j][0] - polyCords[i][0]) * (pointY - polyCords[i][1]) / (polyCords[j][1] - polyCords[i][1]) + polyCords[i][0])) { c = !c; } } return c; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

関数の入力パラメーターとして-多角形の頂点の配列とポイントの座標。 この機能の説明は、 ここで英語で説明されています 。



したがって、弾丸と小惑星の衝突を簡単に判断できます。 計算の数を減らすために、最初にディメンションの交差点を見つけ、次にポリゴンに入る点を見つけます。



例：

 Bullet = function(x,y) { // this.x=x; this.y=y; // this.width=10; this.height=10; this.tick = function (){ //  for (var i=0; i<Asteroids.length; i++){ if (MacroCollision(this,Asteroids[i])){ if (pointInPoly(Asteroids[i].shapeXY, this.x+5, this.y+5)) { … // … } } } } … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

何が起こったかはここからダウンロードでき、実例はここからダウンロードできます 。 WSAD +スペースを管理し、マップをクリックします-小惑星を追加します。



更新：例として終わったもののスクリーンショット。