javascript - How do I test if two are touching each other -

javascript - How do I test if two <img> are touching each other -

i'm trying create mini-game fighting each other. used 2 <img>s characters , got motion downwards on both of <img>s but, want create when <img>s touching have alternative punch them.

all i'm asking how test if touching. i'm pretty sure can handle else , if not can whatever up. i've tried looking hundreds of times, none of them talking <img>s divs. if talk <img>s it's confusing.

one way check if 2 <img> elements touching or overlapping each other utilize $.position(), $.height() , $.width() functions retrieve top-left position, height , width of each element, respectively.

using these functions, can calculate 4 coordinates, top-left, top-right, bottom-left , bottom-right, of image element. each coordinate should have x-coordinate , y-coordinate. have implement overlap algorithm check image elements' coordinates see if touching or overlapping each other.

you can take @ fiddle.

the coordinates function calculates 4 coordinates of element. the incomplete overlap function checks coordinates of 2 element. you can slide sec image horizontally changing value of right css property.

like said, overlap function incomplete; checks if top x-coordinates of both elements touch/overlaps. (not gonna whole thing :-))

there may other simpler ways this, works game built.

javascript jquery image