Jak sprawdzić czy div dotyka innego diva?

Question

Witam raz jeszcze.

Od 3 godzin siedzę w necie i szukam rozwiązania, które nie będzie zajmowało 100 linijek kodu i będzie funkcjonalne.

Mam div'a którym poruszam za pomocą WSAD'u o id pipcio, jeżeli ten div zetknie się z innym divem np. "klockiem" to chciałbym, wykonać pewne instrukcje (powiedzmy np. alert). Pytanie jak to zrobić najlepiej bez jquery.

Answer 1

Sprawdzaj za pomocą offsetów (left/top oraz width/height).

Krawędzie:

• prawą wyznaczysz poprzez różnicę szerokości (width) i lewego offsetu
• dolną wyznaczysz poprzez różnicę wysokości (height) i górnego offsetu.

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

Wtedy, jeśli np. prawa krawędź pierwszego elementu jest w tym samym miejscu, co lewa krawędź drugiego elementu, to zetknęły się ze sobą. Taka sama analogia, jeśli górna krawędź pierwszego elementu == dolna krawędź drugiego elementu, to również się ze sobą zetknęły.

Tu masz przykład: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection

A tu demo: http://jsfiddle.net/knam8/

Comments

Super, a powiedz mi. Potrzebne jest do tego jquery?

---

Nie jest. Aczkolwiek, w bardziej skomplikowanych przypadkach jQuery może być pomocne.