Jump to content
brooke_theperson

jQuery finding position

Recommended Posts

Hey, so this is my code:

 

<!DOCTYPE html><html><head>    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>    <script src='script.js'></script><style>.character{    height: 10px;    width: 10px;    background-color: red;    margin-top: 50px;    border: 3px solid black;    border-radius: 100%;    position: relative;    margin-left: 10px;}.character2{    height: 10px;    width: 10px;    background-color: blue;    margin-top: -16px;    border: 3px solid black;    border-radius: 100%;    position: relative;    margin-left: 10px;}.outerbox{    width: 400px;    height: 400px;    border: 2px solid black;}.innerbox{    width: 200px;    height: 200px;    border: 2px solid black;    margin-left: 95px;    margin-top: 20px;}</style><script>$(document).ready(function(){        var thing = $(".character");        var position = thing.position();        var thing2 = $( ".character2" );        var position2 = thing2.position();                if (position == position2){            $("#collision").text("Colliding!");            $('.character').animate({left:'+=30px'}, 200);        }        else{            $("#collision").text("Not colliding!");        }        $(document).keydown(function(e){        if (e.keyCode == 37){            $('.character').animate({left:'-=30px'}, 200);        }        if (e.keyCode == 38){            $('.character').animate({top:'-=30px'}, 200);        }        if (e.keyCode == 39){            $('.character').animate({left:'+=30px'}, 200);        }        if (e.keyCode == 40){            $('.character').animate({top:'+=30px'}, 200);        }        if (e.keyCode == 65){            $('.character2').animate({left:'-=30px'}, 200);        }        if (e.keyCode == 87){            $('.character2').animate({top:'-=30px'}, 200);        }        if (e.keyCode == 83){            $('.character2').animate({left:'+=30px'}, 200);        }        if (e.keyCode == 90){            $('.character2').animate({top:'+=30px'}, 200);        }        if (position == position2){            $("#collision").text("Colliding!");            $('.character').animate({left:'+=30px'}, 200);        }        else{            $("#collision").text("Not colliding!");        }    });});</script></head><body>    <div class = "outerbox">    <div class = "character"></div>    <div class = "character2"></div>    <div class = "innerbox">        <p id = "thing">Hello</p>        <p id = "other"></p>        <p id = "other2"></p>        <p id = "collision"></p>    </div>    </div></body></html>

 

What I want to do is for something to happen when the positions of the two character divs are the same, but I am not quite sure how. Please help.

Share this post


Link to post
Share on other sites

You need to get the positions inside the keydown handler. You're only getting the positions when the page loads. Also, the position method returns an object with left and top properties. You can't directly compare the objects to see if they're equal, you need to compare each property.

Share this post


Link to post
Share on other sites

You will probably want to compare positioning AFTER the animation has finished, checking as it is now would result in comparison being during animation between current and new location.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...