how to know if two objects are in the same position

3

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

    }

}

javascript collision-detection

share|improve this question

edited Dec 27 '18 at 22:41

pushkin

4,073112753

asked Dec 25 '18 at 23:14

Marwan mezziMarwan mezzi

182

add a comment | 

3

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

    }

}

javascript collision-detection

share|improve this question

edited Dec 27 '18 at 22:41

pushkin

4,073112753

asked Dec 25 '18 at 23:14

Marwan mezziMarwan mezzi

182

add a comment | 

3

3

3

1

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

    }

}

javascript collision-detection

share|improve this question

edited Dec 27 '18 at 22:41

pushkin

4,073112753

asked Dec 25 '18 at 23:14

Marwan mezziMarwan mezzi

182

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

    }

}

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

    }

}

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

    }

}

javascript collision-detection

javascript collision-detection

share|improve this question

edited Dec 27 '18 at 22:41

pushkin

4,073112753

asked Dec 25 '18 at 23:14

Marwan mezziMarwan mezzi

182

share|improve this question

edited Dec 27 '18 at 22:41

pushkin

4,073112753

asked Dec 25 '18 at 23:14

Marwan mezziMarwan mezzi

182

share|improve this question

share|improve this question

edited Dec 27 '18 at 22:41

pushkin

4,073112753

edited Dec 27 '18 at 22:41

pushkin

4,073112753

edited Dec 27 '18 at 22:41

pushkin

4,073112753

4,073112753

asked Dec 25 '18 at 23:14

Marwan mezziMarwan mezzi

182

asked Dec 25 '18 at 23:14

Marwan mezziMarwan mezzi

182

asked Dec 25 '18 at 23:14

Marwan mezziMarwan mezzi

182

182

add a comment | 

add a comment | 

2 Answers
2

active

oldest

votes

1

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!

share|improve this answer

edited Jan 1 at 21:38

answered Dec 25 '18 at 23:33

FZsFZs

2,15131125

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  but what should i do with the return ? i want a condition if they touch each other return false or true . and thankx for your answer
  
  – Marwan mezzi
  Dec 27 '18 at 21:04
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarvanMezzi if(touch(obj1,obj2)) {/*conditional*/}
  
  – FZs
  Dec 27 '18 at 21:22
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh thank you , but i did it to an alert condition and it keeps alerting even if the objects didn't touch each other
  
  – Marwan mezzi
  Dec 27 '18 at 21:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarwanMezzi I edited my answer, now it should work, but let me know, if it isn't working!
  
  – FZs
  Dec 27 '18 at 23:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i answerd my code down look at it and tell if i did something wrong
  
  – Marwan mezzi
  Dec 29 '18 at 21:04
  

  
  
  
  

 | 
show 6 more comments

0

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

}

share|improve this answer

answered Dec 30 '18 at 20:55

Marwan mezziMarwan mezzi

182

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To fix it: 1. Add HTML! 2. Use if(touch(b,u)) { alert("game over"); } to detect gameover; separator is only for demonstration! 3. Make sure that your two objects aren't touch themselves!
  
  – FZs
  Dec 30 '18 at 21:24
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  what is html ! and where to add it ?
  
  – Marwan mezzi
  Jan 1 at 20:53
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53926218%2fhow-to-know-if-two-objects-are-in-the-same-position%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

1

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!

share|improve this answer

edited Jan 1 at 21:38

answered Dec 25 '18 at 23:33

FZsFZs

2,15131125

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  but what should i do with the return ? i want a condition if they touch each other return false or true . and thankx for your answer
  
  – Marwan mezzi
  Dec 27 '18 at 21:04
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarvanMezzi if(touch(obj1,obj2)) {/*conditional*/}
  
  – FZs
  Dec 27 '18 at 21:22
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh thank you , but i did it to an alert condition and it keeps alerting even if the objects didn't touch each other
  
  – Marwan mezzi
  Dec 27 '18 at 21:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarwanMezzi I edited my answer, now it should work, but let me know, if it isn't working!
  
  – FZs
  Dec 27 '18 at 23:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i answerd my code down look at it and tell if i did something wrong
  
  – Marwan mezzi
  Dec 29 '18 at 21:04
  

  
  
  
  

 | 
show 6 more comments

1

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!

share|improve this answer

edited Jan 1 at 21:38

answered Dec 25 '18 at 23:33

FZsFZs

2,15131125

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  but what should i do with the return ? i want a condition if they touch each other return false or true . and thankx for your answer
  
  – Marwan mezzi
  Dec 27 '18 at 21:04
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarvanMezzi if(touch(obj1,obj2)) {/*conditional*/}
  
  – FZs
  Dec 27 '18 at 21:22
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh thank you , but i did it to an alert condition and it keeps alerting even if the objects didn't touch each other
  
  – Marwan mezzi
  Dec 27 '18 at 21:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarwanMezzi I edited my answer, now it should work, but let me know, if it isn't working!
  
  – FZs
  Dec 27 '18 at 23:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i answerd my code down look at it and tell if i did something wrong
  
  – Marwan mezzi
  Dec 29 '18 at 21:04
  

  
  
  
  

 | 
show 6 more comments

1

1

1

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!

share|improve this answer

edited Jan 1 at 21:38

answered Dec 25 '18 at 23:33

FZsFZs

2,15131125

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!

 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>

 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>

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>

share|improve this answer

edited Jan 1 at 21:38

answered Dec 25 '18 at 23:33

FZsFZs

2,15131125

share|improve this answer

share|improve this answer

edited Jan 1 at 21:38

edited Jan 1 at 21:38

edited Jan 1 at 21:38

answered Dec 25 '18 at 23:33

FZsFZs

2,15131125

answered Dec 25 '18 at 23:33

FZsFZs

2,15131125

answered Dec 25 '18 at 23:33

FZsFZs

2,15131125

2,15131125

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  but what should i do with the return ? i want a condition if they touch each other return false or true . and thankx for your answer
  
  – Marwan mezzi
  Dec 27 '18 at 21:04
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarvanMezzi if(touch(obj1,obj2)) {/*conditional*/}
  
  – FZs
  Dec 27 '18 at 21:22
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh thank you , but i did it to an alert condition and it keeps alerting even if the objects didn't touch each other
  
  – Marwan mezzi
  Dec 27 '18 at 21:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarwanMezzi I edited my answer, now it should work, but let me know, if it isn't working!
  
  – FZs
  Dec 27 '18 at 23:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i answerd my code down look at it and tell if i did something wrong
  
  – Marwan mezzi
  Dec 29 '18 at 21:04
  

  
  
  
  

 | 
show 6 more comments

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  but what should i do with the return ? i want a condition if they touch each other return false or true . and thankx for your answer
  
  – Marwan mezzi
  Dec 27 '18 at 21:04
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarvanMezzi if(touch(obj1,obj2)) {/*conditional*/}
  
  – FZs
  Dec 27 '18 at 21:22
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  oh thank you , but i did it to an alert condition and it keeps alerting even if the objects didn't touch each other
  
  – Marwan mezzi
  Dec 27 '18 at 21:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @MarwanMezzi I edited my answer, now it should work, but let me know, if it isn't working!
  
  – FZs
  Dec 27 '18 at 23:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  i answerd my code down look at it and tell if i did something wrong
  
  – Marwan mezzi
  Dec 29 '18 at 21:04
  

  
  
  
  

but what should i do with the return ? i want a condition if they touch each other return false or true . and thankx for your answer

– Marwan mezzi
Dec 27 '18 at 21:04

but what should i do with the return ? i want a condition if they touch each other return false or true . and thankx for your answer

– Marwan mezzi
Dec 27 '18 at 21:04

@MarvanMezzi if(touch(obj1,obj2)) {/*conditional*/}

– FZs
Dec 27 '18 at 21:22

@MarvanMezzi if(touch(obj1,obj2)) {/*conditional*/}

– FZs
Dec 27 '18 at 21:22

oh thank you , but i did it to an alert condition and it keeps alerting even if the objects didn't touch each other

– Marwan mezzi
Dec 27 '18 at 21:35

oh thank you , but i did it to an alert condition and it keeps alerting even if the objects didn't touch each other

– Marwan mezzi
Dec 27 '18 at 21:35

@MarwanMezzi I edited my answer, now it should work, but let me know, if it isn't working!

– FZs
Dec 27 '18 at 23:14

@MarwanMezzi I edited my answer, now it should work, but let me know, if it isn't working!

– FZs
Dec 27 '18 at 23:14

i answerd my code down look at it and tell if i did something wrong

– Marwan mezzi
Dec 29 '18 at 21:04

i answerd my code down look at it and tell if i did something wrong

– Marwan mezzi
Dec 29 '18 at 21:04

 | 
show 6 more comments

0

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

}

share|improve this answer

answered Dec 30 '18 at 20:55

Marwan mezziMarwan mezzi

182

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To fix it: 1. Add HTML! 2. Use if(touch(b,u)) { alert("game over"); } to detect gameover; separator is only for demonstration! 3. Make sure that your two objects aren't touch themselves!
  
  – FZs
  Dec 30 '18 at 21:24
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  what is html ! and where to add it ?
  
  – Marwan mezzi
  Jan 1 at 20:53
  

  
  
  
  

add a comment | 

0

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

}

share|improve this answer

answered Dec 30 '18 at 20:55

Marwan mezziMarwan mezzi

182

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To fix it: 1. Add HTML! 2. Use if(touch(b,u)) { alert("game over"); } to detect gameover; separator is only for demonstration! 3. Make sure that your two objects aren't touch themselves!
  
  – FZs
  Dec 30 '18 at 21:24
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  what is html ! and where to add it ?
  
  – Marwan mezzi
  Jan 1 at 20:53
  

  
  
  
  

add a comment | 

0

0

0

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

}

share|improve this answer

answered Dec 30 '18 at 20:55

Marwan mezziMarwan mezzi

182

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

}

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

}

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

}

share|improve this answer

answered Dec 30 '18 at 20:55

Marwan mezziMarwan mezzi

182

share|improve this answer

share|improve this answer

answered Dec 30 '18 at 20:55

Marwan mezziMarwan mezzi

182

answered Dec 30 '18 at 20:55

Marwan mezziMarwan mezzi

182

answered Dec 30 '18 at 20:55

Marwan mezziMarwan mezzi

182

182

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To fix it: 1. Add HTML! 2. Use if(touch(b,u)) { alert("game over"); } to detect gameover; separator is only for demonstration! 3. Make sure that your two objects aren't touch themselves!
  
  – FZs
  Dec 30 '18 at 21:24
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  what is html ! and where to add it ?
  
  – Marwan mezzi
  Jan 1 at 20:53
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To fix it: 1. Add HTML! 2. Use if(touch(b,u)) { alert("game over"); } to detect gameover; separator is only for demonstration! 3. Make sure that your two objects aren't touch themselves!
  
  – FZs
  Dec 30 '18 at 21:24
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  what is html ! and where to add it ?
  
  – Marwan mezzi
  Jan 1 at 20:53
  

  
  
  
  

To fix it: 1. Add HTML! 2. Use if(touch(b,u)) { alert("game over"); } to detect gameover; separator is only for demonstration! 3. Make sure that your two objects aren't touch themselves!

– FZs
Dec 30 '18 at 21:24

To fix it: 1. Add HTML! 2. Use if(touch(b,u)) { alert("game over"); } to detect gameover; separator is only for demonstration! 3. Make sure that your two objects aren't touch themselves!

– FZs
Dec 30 '18 at 21:24

what is html ! and where to add it ?

– Marwan mezzi
Jan 1 at 20:53

what is html ! and where to add it ?

– Marwan mezzi
Jan 1 at 20:53

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53926218%2fhow-to-know-if-two-objects-are-in-the-same-position%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here