基于JavaScript的弹球算法问题

我想让球从右边反弹到左边，但它仍然回到右边，我知道有太多类似的问题给出了解决方案，但他们都实现了

canvas

，这不是我的情况，我这样做对我来说似乎是对的，但正如你在现场演示中看到的，球仍然回到了右边，下面是代码：

var  speed = 15,
     directionTop = 1,
     directionLeft = 1;
setInterval(function(){


     var ballElement = document.getElementsByClassName('ball')[0],
         containerElement = document.getElementsByClassName('mainDiv')[0],
         playersTestRebounce = document.getElementsByClassName('player')[0];


     if (ballElement) {

        var boxLeftPos = ballElement.offsetLeft,
            boxRightPos = boxLeftPos + ballElement.offsetWidth,



            offsetContainer = containerElement.offsetWidth + 40;
            offsetContainerTop = containerElement.offsetTop;


            if (boxRightPos > offsetContainer) {
                directionTop = 1;
                directionLeft = -1;
            }

            if (boxLeftPos < -40) {
                directionTop = 1;
                directionLeft = 1;
            }

                if (ballElement.offsetTop > playersTestRebounce.offsetTop && ballElement.offsetTop < (playersTestRebounce.offsetTop + 70) && ballElement.offsetLeft < (playersTestRebounce.offsetLeft + 12)) {                  
                        directionTop = 1;
                        directionLeft = 1;
                }

            if (ballElement.offsetTop > 390) {
                directionTop = -1;  
                directionLeft = 1;  
            }

            if (ballElement.offsetTop < 0) {
                directionTop = 1;
                directionLeft = 1;
            }


            ballElement.style.left = (boxLeftPos + speed * directionLeft) + 'px';
            ballElement.style.top = (ballElement.offsetTop + speed * directionTop) + 'px';




            /*cordinators = getPos(ballElement);
            console.log("ball X : "+ cordinators.y + " ball Y :" +cordinators.x);*/

            /*random = Math.floor((Math.random() * 376) + 6);

            if (boxLeftPos < -40 || boxRightPos > offsetContainer) {
                ballElement.style.top = random + 'px';
            } */


     }  
}, 100);

var速度=15，
方向TOP=1，
方向左=1；
setInterval（函数（）{
var BalleElement=document.getElementsByClassName（'ball'）[0]，
containerElement=document.GetElementsByCassName（'mainDiv'）[0]，
playerTestRebounc=document.getElementsByClassName（'player'）[0]；
如果（芭蕾舞）{
var boxLeftPos=BalleElement.offsetLeft，
boxRightPos=boxLeftPos+BalleElement.offsetWidth，
offsetContainer=containerElement.offsetWidth+40；
offsetContainerTop=containerElement.offsetTop；
如果（boxRightPos>offsetContainer）{
方向TOP=1；
方向左=-1；
}
如果（boxLeftPos<-40）{
方向TOP=1；
方向左=1；
}
如果（ballement.offsetTop>playerstestrebounc.offsetTop和&ballement.offsetTop<（playerstestrebounc.offsetTop+70）和&ballement.offsetLeft<（playerstestrebounc.offsetLeft+12））{
方向TOP=1；
方向左=1；
}
如果（ballement.offsetTop>390）{
directionTop=-1；
方向左=1；
}
if（ballement.offsetTop<0）{
方向TOP=1；
方向左=1；
}
BalleElement.style.left=（boxLeftPos+速度*方向左）+“px”；
BalleElement.style.top=（BalleElement.offsetTop+speed*directionTop）+“px”；
/*cordinators=getPos（ballement）；
控制台日志（“球X:+cordinators.y+”球y:+cordinators.X）*/
/*随机=数学地板（（数学随机（）*376）+6）；
如果（boxLeftPos<-40 | | boxRightPos>offsetContainer）{
BalleElement.style.top=随机+px'；
} */
}  
}, 100);

基本反弹可以减少到这个程度

---

if（ballement.offsetTop>390 | | ballement.offsetTop在顶壁或底壁上弹跳时，不应更改左/右运动；在左或右壁上弹跳时，也不应更改上/下运动。但当球从左到右而不是从另一个方向来时，它似乎是这样工作的！它会从左到右进行第一次反弹，因为在反弹底部时将directionLeft设置为1
if (ballElement.offsetTop > 390 ||ballElement.offsetTop <0) {
    directionTop *=-1;  
}

if (boxLeftPos <0 ||boxRightPos>600) {
    directionLeft *=-1;  
}