我的碰撞检测有什么问题？

Question

我试图在我的网页上创建一个简单的互动游戏：

1. 这是一款基于地图的游戏。有一个蓝色的盒子和一个红色的盒子。
2. 使用箭头键（向左，向右，向上和向下）移动地图上的蓝色框。 （我已经这样做了。）

3. 当蓝框（ID名称＆＃34; hehao ＆＃34;）重叠时，红色框（ID名称＆＃34; > london ＆＃34;），一个隐藏的div，其类名为＆＃34; londonClass ＆＃34;会弹出来的。这是我的问题：隐藏的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>