运动 - 模拟重力场 - 《前端杂记》

多方运动+碰撞检测+重力加速+能量流失
重力的速度 X = 初始速度 + 路程
重力速度Y = 初始速度 + 重力加速的速度 + 路程
每次碰撞都会有能量流失

    <div class="box" style="width: 100px; height: 100px; background: red; position: absolute;"></div>
    <script>
        var box = document.getElementsByClassName('box')[0];
        var timer = null;
        function move(dom){
            clearInterval(timer);
            var iSpeedX = 6;
            var iSpeedY = 8;
            var gravity = 3; //重力加速
            dom.timer = setInterval(() => {
                iSpeedY = iSpeedY + gravity; //重力加速
                var newTop = dom.offsetTop + iSpeedY;
                var newLeft = dom.offsetLeft + iSpeedX;
                // 碰撞检测
                if(newTop >= document.documentElement.clientHeight - dom.clientHeight){
                    iSpeedY*= -1;
                    iSpeedX *= 0.8; //能量流失
                    iSpeedY *= 0.8; //能量流失
                    newTop = document.documentElement.clientHeight - dom.clientHeight;
                }
                if(newTop <= 0){
                    iSpeedY *= -1;
                    newTop = 0;
                    iSpeedX *= 0.8;
                    iSpeedY *= 0.8;
                }
                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;
                }
                if(iSpeedY == 0 && iSpeedX == 0 && newTop == document.documentElement.clientHeight - dom.clientHeight){
                    clearInterval(dom.timer)
                    console.log(1)
                }else{
                    dom.style.top = newTop + 'px';
                    dom.style.left = newLeft + 'px';
                }
            }, (30));
        }
        box.onclick = function(){
            move(this);
        }
    </script>

小 demo

<body>
    <div class="box" style="width: 100px; height: 100px; background: red; position: absolute;"></div>
    <script>
        var box = document.getElementsByClassName('box')[0];
        var timer = null;
        box.onmousedown = function(e){
            clearInterval(this.timer);
            var evnent = event || e;
            var disX = event.clientX - this.offsetLeft; //clientX  获取的是光标位于屏幕的位置
            var disY = event.clientY - this.offsetTop;
            var iSpeedX = 0;
            var iSpeedY = 0;
            var lastX = 0;
            var lastY = 0;
            var self = this;
            var ev = evnent;
            document.onmousemove = function(e){
                var evnent = evnent || e;
                var newLeft = event.clientX - disX;
                var newTop = event.clientY - disY;
                iSpeedX = newLeft -lastX;
                iSpeedY = newTop - lastY;
                lastX = newLeft;
                lastY = newTop;
                self.style.left = newLeft + 'px';
                self.style.top = newTop + 'px';     
            }
            document.onmouseup = function(e){
                document.onmousemove = null;
                document.onmouseup  = null;
                move(self, iSpeedX,iSpeedY)
            }
        }
        function move(dom,iSpeedX,iSpeedY){
            clearInterval(timer);
            var gravity = 3; //重力加速
            dom.timer = setInterval(() => {
                iSpeedY = iSpeedY + gravity; //重力加速
                var newTop = dom.offsetTop + iSpeedY;
                var newLeft = dom.offsetLeft + iSpeedX;
                // 碰撞检测
                if(newTop >= document.documentElement.clientHeight - dom.clientHeight){
                    iSpeedY*= -1;
                    iSpeedX *= 0.8; //能量流失
                    iSpeedY *= 0.8; //能量流失
                    newTop = document.documentElement.clientHeight - dom.clientHeight;
                }
                if(newTop <= 0){
                    iSpeedY *= -1;
                    newTop = 0;
                    iSpeedX *= 0.8;
                    iSpeedY *= 0.8;
                }
                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;
                }
                if(iSpeedY == 0 && iSpeedX == 0 && newTop == document.documentElement.clientHeight - dom.clientHeight){
                    clearInterval(dom.timer)
                    console.log(1)
                }else{
                    dom.style.top = newTop + 'px';
                    dom.style.left = newLeft + 'px';
                }
            }, (30));
        }
    </script>