模拟重力场（多方向运动+碰撞检测+重力加速度+能量损失）

多方向运动

点击div后，向右向下都有速度，斜向下一直运动。

<style>
        .wapper {
            width: 100px;
            height: 100px;
            position: absolute;
            background: orange;
            left: 0;
            top: 0;
        }
    </style>
    <div class="wapper"></div>
    <script>
        var oDiv = document.getElementsByClassName("wapper")[0];
        oDiv.onclick = function() {
            startMove(this);
        }

        function startMove(dom) {
            var timer = null;
            clearInterval(dom.timer);
            var iSpeedX = 6;
            var iSpeedY = 7;
            dom.timer = setInterval(function() {
                var newTop = dom.offsetTop + iSpeedY;
                var newLeft = dom.offsetLeft + iSpeedX;
                dom.style.left = newLeft + 'px';
                dom.style.top = newTop + 'px';
            }, 30);
        }

碰撞检测+重力加速度+能量损失

 <div class="wapper"></div>
    <script>
        var oDiv = document.getElementsByClassName("wapper")[0];
        oDiv.onclick = function() {
            startMove(this);
        }

        function startMove(dom) {
            var timer = null;
            clearInterval(dom.timer);
            var iSpeedX = 6;
            var iSpeedY = 7;
            var g = 3;
            dom.timer = setInterval(function() {
                iSpeedY += g;
                var newTop = dom.offsetTop + iSpeedY;
                var newLeft = dom.offsetLeft + iSpeedX;
                if (newTop >= document.documentElement.clientHeight - dom.clientHeight) {
                    iSpeedY *= -1;
                    iSpeedY *= 0.8;
                    iSpeedX *= 0.8;
                    newTop = document.documentElement.clientHeight - dom.clientHeight;
                }
                if (newTop <= 0) {
                    iSpeedY *= -1;
                    iSpeedY *= 0.8;
                    iSpeedX *= 0.8;
                    newTop = 0;
                }
                if (newLeft >= document.documentElement.clientWidth - dom.clientWidth) {
                    iSpeedX *= -1;
                    iSpeedX *= 0.8;
                    iSpeedY *= 0.8;
                    //防止出现滚动条
                    newLeft = document.documentElement.clientWidth = dom.clientWidth;
                }
                if (newLeft <= 0) {
                    iSpeedX *= -1;
                    iSpeedX *= 0.8;
                    iSpeedY *= 0.8;
                    newLeft = 0;
                }
                if (Math.abs(iSpeedX) < 1) {
                    iSpeedX = 0;
                }
                if (Math.abs(iSpeedY) < 1) {
                    iSpeedY = 0;
                }
                dom.style.left = newLeft + 'px';
                dom.style.top = newTop + 'px';
            }, 30);
        }
    </script>

小方块会在底部向上弹几次，最后因为没有速度而停在底边，模拟了重力场的小球下坠弹起。