как узнать, находятся ли два объекта в одной позиции

Question

Я хочу знать, находится ли первый объект в том же положении, что и второй объект, чтобы предупредить сообщение.

Я пытаюсь создать простую игру, чтобы увидеть, касается ли падающий объект объекта, который ядвигайтесь с моей клавиатурой, чтобы остановить игру и написать «игра окончена».

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

var pos = 10 ;
var posleft =0;
var postop = 0;
var divh = 350 ;
var divwidth = 300;


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

       

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





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


    }

});


 
 
 var t = setInterval(move,30);

function move(){

	 var b = document.getElementById("ball");
     var u = document.getElementById('obj') ;
    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";

  
 

      
  }




 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))

if (touch(b,u)||touch(s,b)) {
	alert("gameover");
}

Answer 2

Как-то так?
(Пример из 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>

Вам нужно сосредоточиться на странице (щелкнуть по ней), чтобы управлять игрой!

Я надеюсь, что это поможет вам!