关于碰撞问题的初步设计

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body { margin:0; padding:0; }
#container { width:500px; height:500px; background:#0f0; margin:0 auto; position:relative; }
#animal { width:50px; height:50px; background:#f00; position:absolute; left:150px; top:150px; }
#person { width:50px; height:50px; background:#000; position:absolute; left:90px; top:160px; color:#F0F; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var x,y,offset_x,offset_y,mouse_x,mouse_y,offset_person_x,offset_person_y,offset_animal_x,offset_animal_x;
$(function() {
$('#container').click(function(e) {
mouse_x = e.pageX;
mouse_y = e.pageY;
offset_x = $('#container').offset().left;
offset_y = $('#container').offset().top;
x = mouse_x - offset_x;
y = mouse_y - offset_y;
offset_person_x = $('#person').offset().left;
offset_person_y = $('#person').offset().top;
offset_animal_x = $('#animal').offset().left;
offset_animal_y = $('#animal').offset().top;
//$('#person').animate({left: x, top: y}, 1000); 
if(offset_person_x < offset_animal_x) {
if((offset_person_y - offset_animal_y) < 50 || (offset_animal_y - offset_person_y) < 50) { 
//if((offset_animal_x - offset_person_x) < 50) {
$('#person').animate({left: x, top: y}, 1000); 
setInterval(function() {
if((offset_animal_x - offset_person_x) < 50) {
$('#person').stop();
}
}, 0);
//}
}
}
});  
});
</script>
</head><body>
<div id="container">
  <div id="animal">animal</div>
    <div id="person">person</div>
</div>
</body>
</html>