1

更新：キャンバスのピクセルごとの衝突検出について説明しているこの非常に役立つ記事を見つけました。

HTML5キャンバスを使用したJavaScriptゲームの衝突システムに取り組んでいます。各オブジェクトにはスプライトとしての画像があり、あるオブジェクトの不透明なピクセルが別のオブジェクトと重なると、衝突コードがトリガーされます。しかし、何よりもまず、オブジェクトが互いに接触し、衝突を引き起こさないように、オブジェクトを移動する必要があります。1つをそれに応じて移動するには、xとyに関して任意の2つのオブジェクトのオーバーラップを計算するのに助けが必要です。これが私たちが知っていることです：

  • 各オブジェクトを基準にした衝突点の座標
  • オブジェクトの位置（したがって、オブジェクト間の距離）
  • オブジェクトの幅と高さ
  • x方向とy方向のオブジェクトの速度（ベクトル）

別の注意：これらのオブジェクトの画像は不均一な形状であり、完全な円はありませんが、中心から衝突点までの半径は計算できます。

編集：私は多くの応答を見ていませんので、より具体的にします。下の画像では、2つのオブジェクトが衝突しています。オーバーラップ領域は赤で表示されます。緑の線の長さをどのように見つけますか？ ここに画像の説明を入力してください

4

2 に答える 2

2

HTML 5と、純粋なHTML 5でゲームを作成する方法については正直なところわかりません。ただし、速度（つまり、方向。このようにして、元の場所から逆方向に送信することもできます）も知っておく必要があります。

標準のプログラミング言語の場合、1つの方法は、whileループを使用することです（衝突== falseになるまでスプライトを戻します）。もう1つの方法は、交差の距離をより複雑に計算し、個々のx値とy値を減算して、それらが衝突しないようにすることです。

編集：次に、私が言ったように、最も簡単な方法は、衝突がfalseになるまで、各軸で1ピクセル後方に移動するwhileループに移動するオブジェクトを配置することです。例：

    int x1 = 500; //x location on screen
    int y2 = 500; //y location

    public boolean fixOffSetX(Sprite s) {
         int x2 = s.getX();
         int y2 = s.getY();

         //not writing the whole thing
         //enter a while loop until its not colliding anymore

         while(collision is still true) {
            x--;  or x++; 

            //depending on direction 
            //(which is why you need to know velocity/direction of your sprites)
            //do the same for the Y axis. 
        }
    }


    //This method will return if the 2 sprites collided, you do this one
    public boolean collisionTest(Sprite s1, Sprite s2) {}

プログラミングの非常に複雑な部分であるため、非常に基本的な衝突の実行を検討する必要があります

于 2012-07-29T06:23:52.507 に答える
0

それでも問題が解決しない場合は、このテーマに関する情報を、Foundation Game Design with HTML5enJavascriptという電子書籍で見つけました。ここ：関連するページへのリンク。これが将来誰かに役立つことを願っています。

于 2013-07-26T13:38:52.033 に答える