如何知道两个物体是否在同一个位置

Question

我想知道第一个对象是否与第二个对象处于相同位置以提醒消息。

我正在尝试创建一个简单的游戏，看看掉落的物体是否接触到我用键盘移动的物体以停止游戏并写入 "game over"。

var t = setInterval(move,50);
var b = document.getElementById("ball");
var u = document.getElementById('obj') ;
function move() {
    var pob = parseInt(b.style.top);

    if (pob + 30 >=350){
        pob = 0;  
        var p = Math.floor(Math.random()*320);
     b.style.left = p + "px";
    }
         
    pob += 10;

    b.style.top=pob+"px";
    var f = parseInt(b.style.top) ;
    var box = parseInt(u.style.top);

    if (f == box) {
        alert("stop");
    }
}

Answer 1

是这样的吗？
（示例来自 https://www.w3schools.com/graphics/game_obstacles.asp）

 function touch(obj1,obj2) {
    var myleft = obj1.offsetLeft;
    var myright = obj1.offsetLeft+obj1.offsetWidth;
    var mytop = obj1.offsetTop;
    var mybottom = obj1.offsetTop+obj1.offsetHeight;
    var otherleft = obj2.offsetLeft;
    var otherright = obj2.offsetLeft+obj2.offsetWidth;
    var othertop = obj2.offsetTop;
    var otherbottom = obj2.offsetTop+obj2.offsetHeight;

    return !((mybottom < othertop) ||
    (mytop > otherbottom) ||
    (myright < otherleft) ||
    (myleft > otherright))
  }
  


    var b = document.getElementById("ball");
    var u = document.getElementById('obj') ;
    var s = document.getElementById('sep') ;


console.log(touch(b,u),touch(s,b))

<div id='ball'>b</div>
<div id='sep'>separator</div>
<div id='obj'>u</div>

编辑：

还有完整的片段：

var t = setInterval(move,50);
var b = document.getElementById("ball");
var u = document.getElementById('obj') ;
var pos = 10 ;
var posleft =100;
var divwidth = 300;


document.addEventListener('keydown', function(event) 
{
    if(event.keyCode == 37) {

       
    posleft = posleft - pos ;
     if (posleft<0) {posleft = 0;}
     u.style.left=posleft+'px';





    }
    else if(event.keyCode == 39) {
        
    posleft = posleft + pos;
    if (posleft>divwidth) {posleft = divwidth}
     u.style.left=posleft+'px';


    }

});
 function touch(obj1,obj2) {
    var myleft = obj1.offsetLeft;
    var myright = obj1.offsetLeft+obj1.offsetWidth;
    var mytop = obj1.offsetTop;
    var mybottom = obj1.offsetTop+obj1.offsetHeight;
    var otherleft = obj2.offsetLeft;
    var otherright = obj2.offsetLeft+obj2.offsetWidth;
    var othertop = obj2.offsetTop;
    var otherbottom = obj2.offsetTop+obj2.offsetHeight;

    return !((mybottom < othertop) ||
    (mytop > otherbottom) ||
    (myright < otherleft) ||
    (myleft > otherright))
  }
function move() {

    if (touch(b,u)) {
        alert("stop");
        clearInterval(t)
    }else{
    var pob = parseInt(b.style.top);

    if (pob + 30 >=200){
        pob = 0;  
        var p = Math.floor(Math.random()*320);
     b.style.left = p + "px";
    }
         
    pob += 5;

    b.style.top=pob+"px";
    }

}

<div id="obj" style="position:absolute;left:100px;top:180px;border:solid green 1px;">obj</div>
<div id="ball" style="position:absolute;top:0px;border:solid red 1px;">ball</div>

您需要关注页面（点击它）才能控制游戏！

希望对您有所帮助！

如何知道两个物体是否在同一个位置

how to know if two objects are in the same position

javascript

collision-detection