javascript小程序，为什么两物体碰撞后不是按照90度改变方向前进
现在是按照180度碰撞折返了，但我明明是等于40的情况下，只改变了一个x或y，应该是90度才对啊，现在却变成想x和y同时改变，为什么啊，代码哪里出问题了，即使是180度折返，那也应该只有|x1-x2|=40，|y1-y2|=40这情况啊，现在却是碰了就180度返回
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-type" content="text/html;charest=UTF-8">
<title>総合演習1</title>
<style type="text/css">
#box{
position: absolute;background-color:black;
left:50px;top:50px;
width:400px;height:300px;
}
#star{
position:absolute;
left:50px;top:180px;
}
#moon{
position:absolute;
left:50px;top:180px;
}
</style>
<script type="text/javascript">
var x1 = 50;
var y1 = 180;
var x2 = 380;
var y2 = 250;
var dx1 = 5;
var dy1 = 5;
var dx2 = 5;
var dy2 = 5;
var timer;
function moveImg() {
x1 = x1 + dx1;
y1 = y1 + dy1;
x2 = x2 + dx2;
y2 = y2 + dy2;
imgStar = document.getElementById("star");
imgMoon = document.getElementById("moon");
imgStar.style.left = x1 + "px";
imgStar.style.top = y1 + "px";
imgMoon.style.left = x2 + "px";
imgMoon.style.top = y2 + "px";
if(x1 <= 50 || x1 >= 410 || ((Math.abs(x1 - x2) == 40) && (Math.abs(y1 - y2) <= 40))){
dx1 = -dx1;
}
if(x2 <= 50 || x2 >= 410 || ((Math.abs(x1 - x2) == 40) && (Math.abs(y1 - y2) <= 40))) {
dx2 = -dx2;
}
if(y1 <=50 || y1 >= 310 || ((Math.abs(y1 - y2) == 40) && (Math.abs(x1 - x2) <= 40))){
dy1 = -dy1;
}
if(y2 <=50 || y2 >= 310 || ((Math.abs(y1 - y2) == 40) && (Math.abs(x1 - x2) <= 40))) {
dy2 = -dy2;
}
timer = setTimeout("moveImg()", 25);
}
</script>
</head>
<body bgcolor="#FFFFFF" onload="moveImg();" >
<div id="box"></div>
<img src="images/star.png" id="star" />
<img src="images/moon.png" id="moon" />
</body>
</html>