how to know if two objects are in the same position

user_10833160 0
Viewed 440

I want to know if the first object is in the same position of the second object to alert a message.

I am trying to create a simple game to see if the falling object touches the object that I move with my keyboard to stop the game and write "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");
    }
}

collision-detection javascript
1 Answers

Something like this?
(Example from 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>

EDIT:

And there is the full snippet:

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>

You need to focus on the page (click it) to control the game!

I hope that this will help you!

user_83761840
Related