javascript - 我的碰撞检测出了什么问题？

Question

我正在尝试在我的网页上创建一个简单的互动游戏:

1. 这是一款基于 map 的游戏。有一个蓝色盒子和一个红色盒子。
2. 使用箭头键(左、右、上、下)移动 map 上的蓝色框。 (我已经这样做了。)

3. 当蓝色框(id name“hehao”)重叠红色框(id name“london”)时，将弹出一个类名为“londonClass”的隐藏 div。这是我的问题:隐藏的 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() {
	var rect1 = document.querySelector('.rect1');
	var rect2 = document.querySelector('.rect2');
	
	(function updatePosition() {
		rect1.style.left = document.querySelector('.rect1inputLeft').value + "px"
		rect1.style.top = document.querySelector('.rect1inputTop').value + "px";
		rect2.style.left = document.querySelector('.rect2inputLeft').value + "px";
		rect2.style.top = document.querySelector('.rect2inputTop').value + "px";
	})();
	
	(function updateRectangleValues() {
		var rect1rectangle = rect1.getBoundingClientRect();
		var rect2rectangle = rect2.getBoundingClientRect();
		
		var newrect1 = '<span style="position: absolute; top: 2px; left: 50%; transform: translateX(-50%);">' + rect1rectangle.top + "</span>"
			+ '<span style="position: absolute; top: 50%; right: 2px; transform: translateY(-50%);">' + rect1rectangle.right + "</span>"
			+ '<span style="position: absolute; top: 50%; left: 2px; transform: translateY(-50%);">' + rect1rectangle.left + "</span>"
			+ '<span style="position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);">' + rect1rectangle.bottom + "</span>";
		var newrect2 = '<span style="position: absolute; top: 2px; left: 50%; transform: translateX(-50%);">' + rect2rectangle.top + "</span>"
			+ '<span style="position: absolute; top: 50%; right: 2px; transform: translateY(-50%);">' + rect2rectangle.right + "</span>"
			+ '<span style="position: absolute; top: 50%; left: 2px; transform: translateY(-50%);">' + rect2rectangle.left + "</span>"
			+ '<span style="position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);">' + rect2rectangle.bottom + "</span>";
						
		if(rect1.innerHTML !== newrect1) {
			rect1.innerHTML = newrect1;
		}
		if(rect2.innerHTML !== newrect2) {
			rect2.innerHTML = newrect2;
		}

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

	})();
	
}, 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>