碰撞运动

1. 物体掉落

    window.onload = startMove;
    
    var iSpeedX = 100;
    var iSpeedY = 8;

    function startMove() {
        setInterval(function() {
            var oDiv = document.getElementById("div1");

            //加重力
            iSpeedY += 5;

            var l = oDiv.offsetLeft + iSpeedX;
            var t = oDiv.offsetTop + iSpeedY;

            //防止出界
            if (l >= document.documentElement.clientWidth - oDiv.offsetWidth) {
                iSpeedX *= -0.8;
                l = document.documentElement.clientWidth - oDiv.offsetWidth;
            } else if (l <= 0) {
                iSpeedX *= -0.8;
                l = 0;
            }

            if (t >= document.documentElement.clientHeight - oDiv.offsetHeight) {
                iSpeedY *= -0.8;
                iSpeedX *= 0.8;
                t = document.documentElement.clientHeight - oDiv.offsetHeight;
            } else if (t <= 0) {
                iSpeedY *= -0.8;
                iSpeedX *= 0.8;
                t = 0;
            }

            //解决小数为负数不停止滑动的问题
            if (Math.abs(iSpeedX) < 1) {
                iSpeedX = 0;
            }

            if (Math.abs(iSpeedY) < 1) {
                iSpeedY = 0;
            }

            oDiv.style.left = l + "px";
            oDiv.style.top = t + "px";
        }, 30);
    }

2. 抛扔物体

    window.onload = function() {
        var oDiv = document.getElementById("div1");
        var lastX = 0;
        var lastY = 0;

        oDiv.onmousedown = function(ev) {
            clearInterval(timer);

            var oEvent = ev || event;
            var disX = oEvent.clientX - oDiv.offsetLeft;
            var disY = oEvent.clientY - oDiv.offsetTop;

            document.onmousemove = function(ev) {
                var oEvent = ev || event;

                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;

                oDiv.style.left = l + "px";
                oDiv.style.top = t + "px";

                //计算时刻位移来获取速度
                iSpeedX = l - lastX;
                iSpeedY = t - lastY;

                lastX = l;
                lastY = t;
            };

            document.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
                startMove();
            };
        };
    };
    var timer = null;
    var iSpeedX = 0;
    var iSpeedY = 0;

    function startMove() {
        clearInterval(timer);
        timer = setInterval(function() {
            var oDiv = document.getElementById("div1");

            //加重力
            iSpeedY += 5;

            var l = oDiv.offsetLeft + iSpeedX;
            var t = oDiv.offsetTop + iSpeedY;

            //防止出界
            if (l >= document.documentElement.clientWidth - oDiv.offsetWidth) {
                iSpeedX *= -0.8;
                l = document.documentElement.clientWidth - oDiv.offsetWidth;
            } else if (l <= 0) {
                iSpeedX *= -0.8;
                l = 0;
            }

            if (t >= document.documentElement.clientHeight - oDiv.offsetHeight) {
                iSpeedY *= -0.8;
                iSpeedX *= 0.8;
                t = document.documentElement.clientHeight - oDiv.offsetHeight;
            } else if (t <= 0) {
                iSpeedY *= -0.8;
                iSpeedX *= 0.8;
                t = 0;
            }

            //解决小数为负数不停止滑动的问题
            if (Math.abs(iSpeedX) < 1) {
                iSpeedX = 0;
            }

            if (Math.abs(iSpeedY) < 1) {
                iSpeedY = 0;
            }

            //运动终止条件
            if (iSpeedX == 0 && iSpeedY == 0 
                && t == document.documentElement.clientHeight - oDiv.offsetHeight) {
                clearInterval(timer);
            } else {
                oDiv.style.left = l + "px";
                oDiv.style.top = t + "px";
            }
        }, 30);
    }