2 つの fill.Rect 関数間の衝突を検出します。

Question

1 人のプレイヤーが矢印キーで制御され、もう 1 人のプレイヤーが WSAD キーで制御されるゲームがあります。 600x600 のキャンバスにマップを設定しており、ゲームの塗りつぶしに 2 人のプレイヤー間の衝突を追加したいと考えています。2 人のプレイヤーが特定の半径内にいるときにプログラムを終了するか、「ゲーム終了」のようなテキストを表示します。

以下は私の js、HTML、Css コードです (コード スニペットを表示するには、「全画面表示」に移動する必要があります):

リーリー リーリー リーリー

Answer 1

I've wrote you a function that checks the collision.

We do that by first checking if the left edge of rect1 is further to the right than the right edge of rect2. We also check if the right edge of rect1 is further to the left than the left edge of rect2.

Same thing for bottom edge.

if all of those are false, the rectangles must be overlapping.

const checkCollision = (rect1, rect2) => {
  return rect1.x < rect2.x + rect2.w &&rect1.x + rect1.w > rect2.x &&rect1.y < rect2.y + rect2.h &&rect1.y + rect1.h > rect2.y 
}