原生JS实现各种运动之碰撞运动

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现各种运动之碰撞运动</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        var iSpeedX = 6;
        var iSpeedY = 8;

        function startMove() {
            setInterval(function () {
                var oDiv = document.getElementById('div1');
                var l = oDiv.offsetLeft + iSpeedX;
                var t = oDiv.offsetTop + iSpeedY;

                //当元素碰到底边时
                if (t >= document.documentElement.clientHeight - oDiv.offsetHeight) {

                    iSpeedY *= -1;
                    //碰撞可能越界，防止出现滚动条，强行拉回来
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;

                    //当元素碰到上边时	
                } else if (t <= 0) {
                    iSpeedY *= -1;
                    //碰撞可能越界，防止出现滚动条，强行拉回来
                    t = 0;
                }

                //当元素碰到右边时
                if (l >= document.documentElement.clientWidth - oDiv.offsetWidth) {

                    iSpeedX *= -1;
                    //碰撞可能越界，防止出现滚动条，强行拉回来
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;

                    //当元素碰到左边时
                } else if (l <= 0) {
                    iSpeedX *= -1;
                    //碰撞可能越界，防止出现滚动条，强行拉回来
                    l = 0;
                }

                oDiv.style.left = l + 'px';
                oDiv.style.top = t + 'px';
            }, 30);
        }
    </script>
</head>

<body>
    <input type="button" value="开始运动" onclick="startMove()" />
    <div id="div1"></div>
</body>

</html>