Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Определение столкновения элементов на js (https://javascript.ru/forum/misc/30301-opredelenie-stolknoveniya-ehlementov-na-js.html)

Антон Крамолов 30.07.2012 23:51

Определение столкновения элементов на js
 
Есть старенькая проверенная ф-ия(я ей столкновение спрайтов проверял, работает)

function collisionDetection(x1, y1, w1, h1, x2, y2, w2, h2) { 
    return x1 < (x2 + w2) && y1 < (y2 + h2) && (x1 + w1) > x2 && (y1 + h1) > y2; 
}


function realWidth(el) {
    return parseInt(getStyle(el, 'border-left-width')) + parseInt(getStyle(el, 'margin-left')) + parseInt(getStyle(el, 'width')) + parseInt(getStyle(el, 'margin-right')) + parseInt(getStyle(el, 'border-right-width')); 
}

function realHeight(el) {
    return parseInt(getStyle(el, 'border-top-width')) + parseInt(getStyle(el, 'margin-top')) + parseInt(getStyle(el, 'height')) + parseInt(getStyle(el, 'margin-bottom')) + parseInt(getStyle(el, 'border-bottom-width')); 
}

function isCollide(a, b) { 
    var p1 = absolutePosition(a), p2 = absolutePosition(b); 
    return collisionDetection(p1.left, p1.top, realWidth(a), realHeight(a), p2.left, p2.top, realWidth(b), realHeight(b)); 
}


И такую хрень написал чот не определяет

Антон Крамолов 30.07.2012 23:56

http://gyazo.com/8865ca0528970902280a40c29574fe0c тут например формула работает

А тут так определяет столкновение

http://gyazo.com/aab7bc9cf253117634ab06919e6d8276

а так нет

http://gyazo.com/416b4f192277d98ff76beb148cde91b9

формулу саму тыщу раз проверил, и остальное тоже вроде правильно
Моя не понимать

Антон Крамолов 31.07.2012 00:01

Епать я дебил вместо паддинга маргин написал вот и неправильно считало, надо так

function realWidth(el) {
    return parseInt(getStyle(el, 'border-left-width')) + parseInt(getStyle(el, 'padding-left')) + parseInt(getStyle(el, 'width')) + parseInt(getStyle(el, 'padding-right')) + parseInt(getStyle(el, 'border-right-width')); 
}

function realHeight(el) {
    return parseInt(getStyle(el, 'border-top-width')) + parseInt(getStyle(el, 'padding-top')) + parseInt(getStyle(el, 'height')) + parseInt(getStyle(el, 'padding-bottom')) + parseInt(getStyle(el, 'border-bottom-width')); 
}

vovang 30.01.2013 13:58

А как определить столкновение таких элементов:
<div style="position: absolute; left: 0; top: 100;" id="PerSonag">
<IMG SRC="stand/stand.gif" NAME = "btn1">
</div>
<div style="position: absolute; right: 0; top: 100;" id="brick">
<IMG SRC="car.jpg" NAME = "btn2">
</div>

ksa 30.01.2013 14:37

Цитата:

Сообщение от vovang
А как определить столкновение таких элементов:

У любого элемента есть координаты верхнего левого угла и размеры - от этого и "пляши"...

vovang 30.01.2013 17:22

Да уже месяц пляшу.:)

ksa 31.01.2013 10:02

Цитата:

Сообщение от vovang
уже месяц пляшу

Где тогда видеоролик тестовый пример?

ksa 31.01.2013 16:31

Вот мой вариант...
http://javascript.ru/forum/showpost....36&postcount=6

Генерит непересекающиеся произвольные прямоугольники в произвольной прямоугольной области.

vovang 02.02.2013 00:24

Нет.Мне нужно немного другое.У меня есть управляемый объект.Его можно перемещать курсорами клавиатуры.При перемещении объект сталкивается с другим объектом.Вот это столкновение и нужно определить.Додумался до следующей формулы:
(obj1.offsettop + obj1.offsetheight >= obj2.style.top && obj1.offsettop <= obj2.offsettop + obj2.offsetheight)
.При столкновении она должна возвращать true.Теперь нужно как-то к скрипту управления приладить,что бы obj1 остановился.Пока что не получается.:no:

ksa 03.02.2013 15:11

Цитата:

Сообщение от vovang
Вот это столкновение и нужно определить

Да какое бы нибыло... Пересечение прямоугольников определяется всегда одинаково. :)

melky 03.02.2013 21:04

document.elementFromPoint


Часовой пояс GMT +3, время: 21:51.