JavaScript 的弹跳球算法问题

Question

我正在尝试让 div 球从右边弹到左边，但它仍然回到右边，我知道有太多类似的问题谁给出了一个解决方案，但他们都实施 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);

Answer 1

基本弹跳可以减少到这个http://jsfiddle.net/52b261e2/1

if (ballElement.offsetTop > 390 ||ballElement.offsetTop <0) {
    directionTop *=-1;  
}

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

当你到达底部或顶部时，它会在 -1 中改变 1，在 1 中改变 -1 从左到右也是如此

*编辑忘了更新fiddle

JavaScript 的弹跳球算法问题

bouncing ball algorithm issue with JavaScript

javascript

algorithm