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

是这样吗？
（来自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>

您需要专注于页面（单击页面）以控制游戏！

我希望这会对您有所帮助！

Answer 2

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");
}

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

2 个答案: