Can anyone help me if red box hits orange one game over 😭😭

Question

https://code.sololearn.com/WCUCQirB3zzc/?ref=app

Answer 1

Nice practice.

Instead of using getComputedStyle, you could simplify by using a JavaScript variable to store the position of red rectangle and orange rectangle.

There are two ways of collision testing, distance approach versus edge approach, as your items are rectangular, you can check four conditions:

left edge of red compared with right edge of orange
right edge of red compared with left edge of orange
top edge of red compared with bottom edge of orange
bottom edge of red compared with top edge of orange

you can also use corner position to check collision.

Explaining Rectangular Collision Testing Visually:
https://code.sololearn.com/WOSkh92TwAYI/

If the above does not help, here is

my video tutorial about collision testing:
https://youtu.be/JkfxEXUXGzY

The video is based on a code of another sololearner who asked for help last time. But the mathematics are the same.

Answer 2

乂۝丹ⓨㄩک廾۝乂〖թг๏〗
Kirti
Nirmal Sinh Vala
Kalyug
John Wells
Aad Hoogenboom
Aditya Pardeshi ✔️
AZHAGESAN S
Namit Jain
MiCaVi 👑 Director Animator Website.

Answer 3

Use the formula given in this link
https://gamedev.stackexchange.com/questions/26004/how-to-detect-2d-line-on-line-collision

Answer 4

Namit Jain i don't understand

Answer 5

Namit Jain not working https://code.sololearn.com/WCUCQirB3zzc/?ref=app 😭😭😭

Answer 6

You know the vertices of the two rectangles.
From that you can find out their sides and their co-ordinates.
And just apply this formula on each side

Answer 7

Namit Jain bro group me Hindi me samjhado 😅😅

Answer 8

Aad Hoogenboom please help