JS中如何判断一个对象是否接触到另一个对象答案

【问题标题】：How to find out if an object is touching another object in JSJS中如何判断一个对象是否接触到另一个对象
【发布时间】：2021-06-07 16:17:43
【问题描述】：

（请原谅我的英语不好，我今年 13 岁）好吧，尽管我今天刚加入 stackoverflow，但我已经编码了一段时间。我正在尝试制作一个简单的游戏（以后可能会变得更大）并且我希望锤子（玩家精灵）不能穿过盒子朝向屏幕中间，但我不知道如何.这是我所拥有的：

var sq = document.getElementById("box"); 
  var posX = 0;
  var posY = 0;
  var rot = "rotate(0deg)";
var id = null;
  function move(object, pixels, xa){          
    if(xa == true) {
      posX+=pixels;
      object.style.left = posX + 'px'; 
    }else{
      posY+=pixels;
      object.style.top = posY + 'px'; 
    }
  }
   OBJect.style.left = "200px"; 
  OBJect.style.top = "200px"; 
document.addEventListener('keydown', logKey);
    function logKey(e) {
      if (`${e.code}` == "ArrowRight") {
        rot = "rotate(90deg)";
         sq.style.transform = rot;
     move(sq, 5, true);
                     if(posX > 470){
        posX = 5;
      }
      }
          if (`${e.code}` == "ArrowLeft") {
            rot = "rotate(270deg)";
            sq.style.transform = rot;
                    move(sq, -5, true);
                         if(posX < 0){
        posX = 465;
      }
      }
          if (`${e.code}` == "ArrowDown") {
            rot = "rotate(180deg)";
            sq.style.transform = rot;
         move(sq, 5, false);
                  if(posY > 465){
        posY = 5;
      }
      }
          if (`${e.code}` == "ArrowUp") {
            rot = "rotate(0deg)";
            sq.style.transform = rot;
        move(sq, -5, false);
                  if(posY < 0){
        posY = 470;
      }
      }
    }
setInterval(function(){
         xaxis.innerHTML = "x: " + posX;
      yaxis.innerHTML = "y: " + posY;
  rotate.innerHTML = rot;
},1);

#myContainer {
  width: 500px;
  height: 500px;
  position: relative;
  background: black;
 outline: red solid 10px;
}
#box {
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: gray;
}
#OBJect {
  width: 30px;
  height: 30px;
  position: absolute;
  background-color: gray;
}

<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<style>
/*style would go here/*
</style>
<body>
<div id="myContainer">
<img src="https://cdn.glitch.com/7f9c2ae2-9b45-42a1-a387-380de7f5d3bd%2Fhammer.png?v=1615308683807" alt="hammer" id="box">
  <div id="OBJect"></div>
</div>
  <br><br>
  <div id="xaxis"></div>
  <div id="yaxis"></div>
  <div id="rotate"></div>
<script>
  //script would go here
</script>

</body>
</html>

是的，是的，我知道。我可以明确改进，但我只知道基本的东西，其中一些来自 Stackoverflow 或 w3schools，是的，我知道这个问题有很多已解决的答案，但我对因为它们对我来说太复杂了。我只是要求易于理解的简单代码（如果不是，请标记内容以便我知道）。

对不起，如果这太多了，我只是需要帮助：/

【问题讨论】：

对两个元素都使用getBoundingClientRect，并使用自定义逻辑来查找第二个或第一个的x 或y 是否覆盖x + width 或y + height

标签： javascript html jquery css dom

【解决方案1】：

为此，您需要知道每个元素的 4 个角，然后您需要检查其他对象是否在玩家范围内

它们都是矩形，要触及这些陈述中的 1 个必须为真

方块的左上角在玩家左上角的右边，方块的左上角在玩家右上角的左边，而方块的左上角小于顶边的y，大于底边的y
正方形的右上角在玩家右上角的左侧，正方形的右上角在玩家左上角的右侧，而正方形的右上角小于顶边的y，大于底边的y
与 1 和 2 相同，但具有左下角和右下角
如果其中一个角与另一个对象上的角具有相同的 x 和 y，或者如果一个对象的位置与另一个相同

第二种方法是使用毕达哥拉斯定理得到两点之间的距离

a^2 + b^2 = c^2

在代码中的样子

let c = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + Math.pow(Math.abs(x2, y2), 2))

这有点棘手，但从某种意义上说，两点之间的距离是一个三角形，所以 x 和 y 上的距离形成两条腿，然后为了得到实际距离，我们需要斜边，这就是毕达哥拉斯定理得到的。所以要得到 a 和 b 我们需要得到第一个减去第二个 x 和 y 的绝对值来得到 x 和 y 上的距离然后我们将它们与Math.pow() 平方并相加，但是这给了我们 c^2 我们只是想要c，所以我们得到Math.sqrt() 的平方根，这给了我们距离然后我们要做的另一件事是让对象的中心用作a 和b。由于您在网页上使用 javascript，因此 X 和 Y 值用于左上角，因此您需要将宽度和高度的一半适当地添加到 x 和 y 以获得对象的中心，然后您可以使用距离公式。这种方法的唯一问题是它最适合圆形，因为边缘周围的每个点与中心的距离都相等，而方形则不是这样。

所以我个人会使用第一种方法，你可以通过使用宽度和高度添加到左上角的位置来获取其他角的位置。它比距离更代码但更精确，因为您正在检查每个对象的边界而不是检查距中心的距离

【讨论】：

【解决方案2】：

我今天也加入了，我12岁。由于锤子是img，你可以使用css：

我认为你的问题是你想移动锤子，如果是的话：

var left = 0; /*left and top can be edited in your code but*/
var top = 0;/*you have to reset them using the code below*/
var hammer = document.querySelector('#hammer');
hammer.style.left = left + 'px';
hammer.style.top = top + 'px';

#hammer {
  position: absolute;
  left: 0px;
  right: 0px;
}/*set left and right via js*/

&lt;!--just add an id like #hammer to the hammer--&gt;

【讨论】：