How To Add Collision Detection?

Question

I am going to make two rectangles in svg, how do I check if there is a collision?

Answer 1

No

Answer 2

Yes

Answer 3

I have their size

Answer 4

do you have their x and y positions ?

Answer 5

do you have their x and y size? I should have mention it on my first comment 😂

Answer 6

where (0,0) located ?
top left ?
middle canvas ?

Answer 7

Idk I’m new to canvas

Answer 8

add a rectangle at (0,0), where is he located ?

Answer 9

Can I just show you my code and you show me how to add collision

Answer 10

yea do it, sorry for the questions I don't program in JS...

Answer 11

<svg height="200” width=“200”>
<rect height="50" width="50">
<animate attributeName="x" from="0" to="300" dur="3s" repeatCount="1"/>
</rect>
</svg>

Answer 12

what programming language are you using for displaying it ?

Answer 13

Html

Answer 14

the <animate> is moving the rectangle am I right ?

Answer 15

Yes

Answer 16

this is not HTML, look's like css.
just wait for a moment, I'll get up to my PC to check where (0,0) is located.

Answer 17

Ok, but this is html. Not css

Answer 18

true, my bad, so as I can see the (0,0) starting from top left, which is good.
let me write a little lecture.

Answer 19

K

Answer 20

wait, I came across an issue, you cannot get the rectangle size and position, because you declaring it right away, so you don't have any variable to store their position and size.
you should be using js instead to store their values.