javascript - jQuery simple collision error, -
javascript - jQuery simple collision error, -
im making collision checking scheme jquery doesn't seem work. there 2 buttons. can move 1 button right key. 1 time buttons collide 1 of buttons should alter font colour. right now, button alter colour if not touching other button. seek out, if have problems understanding me.
thanks,
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <title>my website</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(document).keydown(function(event) { if ( event.which == 39){ $('.button0 input').animate({'left': '+='+math.cos(0*math.pi/180) *30+'px','top': '+='+math.sin(0*math.pi/180) *30+'px'},30); }; button0button1(); }); function button0button1(){ var div1=$('.button0 input'); var div2=$('.button1 input'); if ((div1.offset().top+div1.outerheight(true)) < div2.offset().top || div1.offset().top > (div2.offset().top+div2.outerheight(true)) || (div1.offset().left+div1.outerwidth(true)) < div2.offset().left || div1.offset().left > (div2.offset().left+div2.outerwidth(true))){ $('.button0 input').css('color', 'rgb(0, 128, 255)'); }; }; }); </script> <style type="text/css"> .button0 input{ position:fixed; left:30px; top:213px; font-family:ms shell dlg 2; font-size:8px; font-weight:normal; } .button1 input{ position:fixed; left:185px; top:217px; font-family:ms shell dlg 2; font-size:8px; font-weight:normal; } </style> <body> <div class="button0"><input type="button" style="width: 73px;height: 67px;" value="button"/></div> <div class="button1"><input type="button" style="width: 61px;height: 56px;" value="button"/></div> </body> </html>
i haven't checked code (it's bit convoluted in current form), identified 2 problems:
1) got @ to the lowest degree 1 of comparing operators wrong: (div1.offset().left+div1.outerwidth(true)) < div2.offset().left
, should >
;
2) since animate doesn't immediatly alter position of components, should phone call button0button1
callback animate, otherwise buttons collide during/at end of animation, code study them not colliding.
$('.button0 input').animate({...},30,button0button1); // button0button1(); // delete/comment line
javascript jquery html css
Comments
Post a Comment