0

こんにちは、私は次のように車の形の長方形を描く車のゲームを作っています。xP と yP は JavaScript のキーボード イベントから動的に取得され、ローテーションも同様です。

ctxDrift.clearRect(0, 0, 426, 754);
ctxDrift.save();
ctxDrift.beginPath();
ctxDrift.translate(xP-car.getWidth()/2, yP-car.getHeight()/2);
ctxDrift.rotate((Math.PI / 180) * car.getRotation());
ctxDrift.translate(-xP, -yP);
ctxDrift.rect(xP-car.getWidth()/2, yP-car.getHeight()/2, car.getWidth(), car.getHeight());
ctxDrift.fillStyle = 'yellow';
ctxDrift.fill();
ctxDrift.restore();

現在、回転していない長方形の障害物がいくつかあります。これら 2 つのオブジェクト間のヒットを確認するにはどうすればよいでしょうか。または、回転した場合に、長方形の点が別の長方形の内側にあることを確認する方法を教えてください。

4

4 に答える 4

1

最も簡単な方法は、長方形のバウンディング ボックスを回転させることです。これにより、衝突チェックを行う前に、基本的に回転しなくなります。次に、画像が描画される前にそれらを元に戻します。

さらに良いことに、広いフェーズのテストに使用できる回転しない境界ボックスを用意します (狭いフェーズのチェックを行う必要があるかどうかを確認するための迅速で安価なチェック)。

これは、軸に沿った境界ボックス、または略して AABB として知られています。これにより、衝突検出コードが大幅に簡素化されます。

更新:役に立つかもしれないこのリンクを見つけました。

于 2013-02-20T21:55:15.160 に答える
1

これは私がこのクエリを探しているものです

http://www.rgraph.net/blog/2012/october/new-html5-canvas-features.html

canvas に addHitRegion() 関数が追加され、これを簡単に追跡できます。

新しいものと最高

http://www.playmycode.com/blog/2011/08/javascript-per-pixel-html5-canvas-image-collision-detection/

于 2013-02-21T10:59:28.210 に答える
1

衝突テストを始める前であっても、 Canvas はオブジェクトがキャンバス上のどこにあるかを追跡しません。ユーザーが行った蓄積された .translate() および .rotate() を手動で追跡する必要があります。これを行うには、ユーザーのキーボード イベントごとに変換マトリックスの変更をキャプチャします。次に、ヒット テストを開始するために使用できる 1 つの最終的な変換マトリックスに変換を蓄積します。

そこから、衝突テストの計算はすぐに複雑になります!

最も単純な衝突テストは、各長方形を円で囲み、円の中心点が 2 つの円半径の合計内にあるかどうかを計算することです。コードは次のようになります。

function CirclesCollide(x1,y1,radius1,x2,y2,radius2){
    return ( Math.sqrt( ( x2-x1 ) * ( x2-x1 )  + ( y2-y1 ) * ( y2-y1 ) ) < ( radius1 + radius2 ) );
}

より良い衝突テストが必要で、大量の数学を進んで処理したい場合は、3 つの衝突テストの良いソースを次に示します: http://www.sfml-dev.org/wiki/en/sources/simple_collision_detection

おそらく最良の解決策は、オブジェクトがキャンバス上のどこにあるかを追跡し、ヒット テストを提供する FabricJs のようなキャンバス ライブラリを使用することです。このように簡単！

var theyAreColliding = myCar.intersectsWithObject(myObstical);
于 2013-02-21T01:10:24.857 に答える
0

私は最終的にここにある独自のロジックを追加しました

http://jslogic.blogspot.in/2013/02/javascript-bound-rectangle-area-while.html

于 2013-02-26T14:10:18.357 に答える