Функция обнаружения коллизий не работает в javascript
Я делаю небольшую игру на javascript, яйца падают, и когда они попадают в корзину, я хочу отправить яйца в исходное состояние и увеличить счет, но моя функция столкновения не работает, я новичок в javascript, и не прошло и месяца с тех пор, как я начал его изучать, поэтому я мало что знаю.
Что я уже пробовал:
вот эти переменные
var basket = document.getElementById("basketDiv"); var basketScore = document.getElementById("basketScore"); var egg1 = document.getElementById("egg1"); var egg2 = document.getElementById("egg2"); var egg3 = document.getElementById("egg3"); var egg = document.getElementsByClassName("egg"); var scoreInp = document.getElementById("Score"); var score = Number(scoreInp.innerHTML);
здесь я зацикливаюсь на яйцах, так как var egg return array-like
for(var i=0;i<egg.length;i++){ if(checkEggHitsTheBasket(egg[i])) { setEggIntialState(egg[i]); dropdownEggs(egg[i]); }
вот моя функция столкновения я также попробовал в условии if проверить не сталкиваются ли они но также не работают
function collision(div1,div2){ var rectX1_left = div1.offsetLeft; //left var rectY1_top = div1.offsetTop; //top var rectHeight1 = div1.offsetHeight; var rectWidth1 = div1.offsetWidth; var rect1_bottom = rectY1_top + rectHeight1; // bottom var rect1_right = rectX1_left + rectWidth1; //right var rectX2_left = div2.offsetLeft; //left var rectY2_top = div2.offsetTop; //top var rectHeight2 = div2.offsetHeight; var rectWidth2 = div2.offsetWidth; var rect2_bottom = rectY2_top + rectHeight2; //bottom var rect2_right = rectX2_left + rectWidth2; //right if(rect1_right>rectX2_left &&rectX1_left<rect2_right&& rect1_bottom > rectY2_top&& rectY1_top <rect2_bottom){ return true; } else { return false; } }
вот я чечк если они столкнутся
function checkEggHitsTheBasket(egg){ if(collision(egg,basket)){ score++; scoreInp.innerHTML=score; basketScore.innerHTML=score; } }
а также яйца и корзина у них есть позиция абсолютная и левый атрибут на %, а не px это нормально?