충돌 감지에 문제가 있습니까?

Question

나는 내 웹 페이지에서 간단한 대화 형 게임을 만들려고 해요 :

1. 이지도 기반의 게임이다. 파란색 상자와 빨간색 상자가 있습니다.
2. 지도의 파란색 상자를 이동하려면 화살표 키 (왼쪽, 오른쪽, 위, 아래)를 사용하십시오. (나는 이미 그 일을했다.)

3. 파란색 상자 (ID 이름 "hehao") 는 빨간색 상자 중복 때 (ID 이름을 "런던"), 클래스 이름을 가진 숨겨진 DIV "londonClass "이 튀어 나옵니다. 이것은 내 문제입니다 : 숨겨진 div가 튀어 나오지 않습니다.

   function checkOverlap() { 
   
   //get the position of the blue box 
   var hh = document.getElementById('hehao'); 
   var rect1 = hh.getBoundingClientRect(); 
   
   //get the position of the red box 
   var london = document.getElementById('london'); 
   var rect2 = london.getBoundingClientRect(); 
   
   //compare the positions of two boxes 
   var overlap = !(rect1.right < rect2.left || 
          rect1.left > rect2.right || 
          rect1.bottom < rect2.top || 
          rect1.top > rect2.bottom); 
   
   //if the two boxes overlap, then display the hidden div. 
   var londonClass = document.getElementsByClassName('londonClass'); 
   if(overlap) { 
       londonClass.style.display = "block"; 
   } 
   } 
   
   document.ready = checkOverlap(); 
   

Answer 1

중첩을 계산하는 로직은 잘못된 것이다. 이것은 올바른 하나입니다

(rect1.right > rect2.left && rect2.right > rect1.left) && 
(rect1.bottom > rect2.top && rect2.bottom > rect1.top) 

그리고 여기에 (그냥 실행하고 X/Y 값으로 재생) 을이를 찾는 예입니다 :

var interval1 = setInterval(function() { 
 
\t var rect1 = document.querySelector('.rect1'); 
 
\t var rect2 = document.querySelector('.rect2'); 
 
\t 
 
\t (function updatePosition() { 
 
\t \t rect1.style.left = document.querySelector('.rect1inputLeft').value + "px" 
 
\t \t rect1.style.top = document.querySelector('.rect1inputTop').value + "px"; 
 
\t \t rect2.style.left = document.querySelector('.rect2inputLeft').value + "px"; 
 
\t \t rect2.style.top = document.querySelector('.rect2inputTop').value + "px"; 
 
\t })(); 
 
\t 
 
\t (function updateRectangleValues() { 
 
\t \t var rect1rectangle = rect1.getBoundingClientRect(); 
 
\t \t var rect2rectangle = rect2.getBoundingClientRect(); 
 
\t \t 
 
\t \t var newrect1 = '<span style="position: absolute; top: 2px; left: 50%; transform: translateX(-50%);">' + rect1rectangle.top + "</span>" 
 
\t \t \t + '<span style="position: absolute; top: 50%; right: 2px; transform: translateY(-50%);">' + rect1rectangle.right + "</span>" 
 
\t \t \t + '<span style="position: absolute; top: 50%; left: 2px; transform: translateY(-50%);">' + rect1rectangle.left + "</span>" 
 
\t \t \t + '<span style="position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);">' + rect1rectangle.bottom + "</span>"; 
 
\t \t var newrect2 = '<span style="position: absolute; top: 2px; left: 50%; transform: translateX(-50%);">' + rect2rectangle.top + "</span>" 
 
\t \t \t + '<span style="position: absolute; top: 50%; right: 2px; transform: translateY(-50%);">' + rect2rectangle.right + "</span>" 
 
\t \t \t + '<span style="position: absolute; top: 50%; left: 2px; transform: translateY(-50%);">' + rect2rectangle.left + "</span>" 
 
\t \t \t + '<span style="position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);">' + rect2rectangle.bottom + "</span>"; 
 
\t \t \t \t \t \t 
 
\t \t if(rect1.innerHTML !== newrect1) { 
 
\t \t \t rect1.innerHTML = newrect1; 
 
\t \t } 
 
\t \t if(rect2.innerHTML !== newrect2) { 
 
\t \t \t rect2.innerHTML = newrect2; 
 
\t \t } 
 

 
\t \t (function checkIfOverlapping() { 
 
\t \t \t document.querySelector('.overlapping').checked = ((rect1rectangle.right > rect2rectangle.left && rect2rectangle.right > rect1rectangle.left) && (rect1rectangle.bottom > rect2rectangle.top && rect2rectangle.bottom > rect1rectangle.top)); 
 
\t \t })(); 
 

 
\t })(); 
 
\t 
 
}, 50);

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.rect { 
 
    width: 100px; 
 
    height: 80px; 
 
    position: absolute; 
 
    opacity: 0.7; 
 
    color: white; 
 
} 
 
.rect1 { 
 
    background: green; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.rect2 { 
 
    background: blue; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.rect1input { 
 
    background: green; 
 
    color: white; 
 
    border: 1px solid black; 
 
} 
 
.rect2input { 
 
    background: blue; 
 
    color: white; 
 
    border: 1px solid black; 
 
} 
 

 
.rect1input, .rect2input { 
 
    width: 50px; 
 
    height: 20px; 
 
    padding-left: 3px; 
 
    margin-top: 5px; 
 
}

<div class="rect rect1"></div> 
 
<div class="rect rect2"></div> 
 
x <input type="number" class="rect1input rect1inputLeft" value="100"> 
 
y <input type="number" class="rect1input rect1inputTop" value="60"> &nbsp; &nbsp; 
 
x <input type="number" class="rect2input rect2inputLeft" value="100"> 
 
y <input type="number" class="rect2input rect2inputTop" value="132"> 
 
&nbsp; &nbsp; 
 
overlapping? <input type="checkbox" class="overlapping" disabled>