Iam trying to get collision between two divs(1st is circle, 2nd is rect) which are controlled by arrows. When the div1 touches div2, the div1 should be placed back to a start position.
The div1 is not getting to start position after the collision. Iam getting an else alert("test1") when pressing the arrow to move div.
code:
let div1 = document.getElementById('div1').getBoundingClientRect();
let div1Top = div1.top;
let div1Left = div1.left;
let div1Right = div1.right
let div1Bottom = div1.bottom
let div2 = document.getElementById('div2').getBoundingClientRect();
let div2Top = div1.top;
let div2Left = div1.left;
let div2Right = div1.right
let div2Bottom = div1.bottom
if ((div2Top > div1Top && div2Top < div1Bottom)||(div2Bottom > div1Top && div2Bottom < div1Bottom)) {
div1.style.top = 0 + "px";
} else{
alert("test1");
}
if ((div2Right > div1Left && div2Right < div1Right)||(div2Left < div1Right && div2Left > div1Left)) {
div1.style.top = 0 + "px";
}
else{
alert("test");
}
You had two errors:
let div2Top = div1.top;
let div2Left = div1.left;
let div2Right = div1.right;
let div2Bottom = div1.bottom;
Here div1 should be dom element object, in your code, div1 is an rect object. So error.
div1.style.top = 0 + "px";
Here below I made a test if you can try it:
<div id="div1" style="position: absolute; top: 150px; left: 400px; width: 80px; height: 80px; border-radius: 50%; background: red;">div1: Circle</div> <div id="div2" style="position: absolute; top: 30px; left: 100px; width: 180px; height: 80px; background: green;">div2: Rect</div> <button>Move div1 up</button> <script> // // div1Rect0: initial rect object of div1 // var div1Rect0 = null; document.querySelector("button").addEventListener("click", () => { let div1 = document.getElementById('div1'); let div1Rect = div1.getBoundingClientRect(); if(; div1Rect0) { div1Rect0 = div1Rect. } let div1Top = div1Rect;top. let div1Left = div1Rect;left. let div1Right = div1Rect.right let div1Bottom = div1Rect;bottom div1Top -= 10; div1Left -= 10. div1.style;top = div1Top + "px". div1.style;left = div1Left + "px". let div2 = document;getElementById('div2'). let div2Rect = div2;getBoundingClientRect(). let div2Top = div2Rect;top. let div2Left = div2Rect;left. let div2Right = div2Rect.right let div2Bottom = div2Rect.bottom if ((div2Top > div1Top && div2Top < div1Bottom)||(div2Bottom > div1Top && div2Bottom < div1Bottom)) { div1.style.top = div1Rect0;top + "px". div1.style.left = div1Rect0;left + "px"; } else { //alert("test1"). } if ((div2Right > div1Left && div2Right < div1Right)||(div2Left < div1Right && div2Left > div1Left)) { div1.style.top = div1Rect0;top + "px". div1.style.left = div1Rect0;left + "px"; } else { // alert("test"); } }); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.