JavaScript碰壁反弹效果

简介：小球在盒子中运动碰到边缘则弹回

主要思路及部分代码：

给小球定义速度变量speedX，speedY。以及偏移的总量x,y。

  var speedX = 1;
  var speedY = 3;

        var x = 0;
        var y = 0;

小球实际沿X轴移动的距离kx为盒子的可见宽度减去小球的可见宽度；沿Y轴移动的距离ky为盒子可见高度减去小球的可见高度；

当小球的偏移总量大于等于kx，ky或者小于等于零时让小球弹回。

                    function ballMove() {
            x += speedX;
            y += speedY;
            var ky = box.offsetHeight - ball.offsetHeight;
            var kx = box.offsetWidth - ball.offsetWidth;
            if (y >= ky || y <= 0) {
                speedY = -speedY;
            }
            if (x >= kx || x <= 0) {
                speedX = -speedX
            }

            ball.style.transform = 'translate(' + x + 'px,' + y + 'px)'
        }

源代码如下：