Estoy tratando de agregar detección de colisión en mi código arrastrable que funciona bastante bien, supongo, pero cuando intento arrastrar el rectángulo naranja sobre el verde, no sucede nada. ¿Es correcta mi lógica de colisión? Esto es lo que traté de hacer.
//HTML code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href = "stl.css" rel = "stylesheet" type = "text/css"> </head> <body> <div class="item1"></div> <div class="item2"></div> <script src = "js.js" type = "text/javascript"></script> </body> </html>Usé getBoundingClientRect() para obtener la posición de los rectángulos.
//JAVASCRIPT code const el1 = document.querySelector(".item1"); const el2 = document.querySelector(".item2"); var rect1,rect2; rect2 = el2.getBoundingClientRect(); el1.addEventListener("mousedown", mousedown); function mousedown(e) { window.addEventListener("mousemove", mousemove); window.addEventListener("mouseup", mouseup); let prevX = e.clientX; // x cursor position let prevY = e.clientY;//y cursor position function mousemove(e) { let newX = prevX - e.clientX; let newY = prevY - e.clientY; rect1 = el1.getBoundingClientRect(); el1.style.left = rect1.left - newX + "px"; el1.style.top = rect1.top - newY + "px"; prevX = e.clientX; prevY = e.clientY; //a simple rectangle collision logic funcion if (rect1.left < rect2.left + rect2.weight && rect1.left + rect1.weight > rect2.left && rect1.top < rect2.top + rect2.height && rect1.height + rect1.top > rect2.top) { item2.style.color="#FF0006"; } } //function which stops the mousedown event function mouseup() { window.removeEventListener("mousemove", mousemove); window.removeEventListener("mouseup", mouseup); } }Sé que item1 requiere una posición absoluta para la acción arrastrable
//CSS code .item1{ height:50px; width:50px; position:absolute; background:orange; } .item2{ height:220px; width:220px; position:absolute; background:green; top:300px; left:500px; z-index:-2; } //JAVASCRIPT code const el1 = document.querySelector(".item1"); const el2 = document.querySelector(".item2"); var rect1,rect2; rect2 = el2.getBoundingClientRect(); el1.addEventListener("mousedown", mousedown); function mousedown(e) { window.addEventListener("mousemove", mousemove); window.addEventListener("mouseup", mouseup); let startX = e.clientX; // x cursor position let startY = e.clientY; //y cursor position const { left: rectX, top: rectY } = el1.getBoundingClientRect(); function mousemove(e) { rect1 = el1.getBoundingClientRect(); const diffX = e.clientX - startX; const diffY = e.clientY - startY; el1.style.left = (rectX + diffX) + "px"; el1.style.top = (rectY + diffY) + "px"; // https://gamedev.stackexchange.com/questions/586/what-is-the-fastest-way-to-work-out-2d-bounding-box-intersection // function IntersectRect(r1:Rectangle, r2:Rectangle):Boolean { // return !(r2.left > r1.right // || r2.right < r1.left // || r2.top > r1.bottom // || r2.bottom < r1.top); // } //a simple rectangle collision logic funcion if (rect1.left < rect2.left + rect2.width && rect1.left + rect1.width > rect2.left && rect1.top < rect2.top + rect2.height && rect1.top + rect1.height > rect2.top) { el2.style.background ="#FF0006"; } else { el2.style.background ="black"; // put original color } } //function which stops the mousedown event function mouseup() { window.removeEventListener("mousemove", mousemove); window.removeEventListener("mouseup", mouseup); } } //CSS code .body { position: relative; } .item1{ height:50px; width:50px; position:absolute; background:orange; } .item2{ height:120px; width:120px; position:absolute; background:green; top:300px; left:500px; z-index:-2; } //HTML code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href = "stl.css" rel = "stylesheet" type = "text/css"> </head> <body> <div class="item1"></div> <div class="item2"></div> <script src = "js.js" type = "text/javascript"></script> </body> </html>