渡一模拟重力场：多方向运动，重力加速度，碰撞反弹，能量损失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 小球样式 */
        div{
    
    
            position:absolute;
            top:0px;
            left:0px;
            width:100px;
            height:100px;
            background-color:red;
            border-radius:50%;
        }
    </style>
</head>
<body> 
    <!-- 小球 -->
    <div></div>
    <script>
        // 小球
        var oDiv = document.getElementsByTagName("div")[0];

        //鼠标点击
        oDiv.onmousedown = function(){
    
    
            //点击状态下，在文档中移动触发,如果绑定在oDiv上，鼠标移动太快，事件监听频次不够
            document.onmousemove = function(e){
    
    
                var event = e || window.event; 
                //小球跟着鼠标移动
                oDiv.style.left = event.pageX - (oDiv.offsetWidth/2) + "px";
                oDiv.style.top = event.pageY - (oDiv.offsetHeight/2) + "px";
            }
        }
        //鼠标抬起,小球开始运动
        oDiv.onmouseup = function(){
    
    
            // 鼠标抬起后，在文档中移动，小球不跟着移动
            document.onmousemove = null;

            // 小球运动功能
            startMove(oDiv)
        }
        // 小球运动功能
        function startMove(dom){
    
    
            //dom形参：运动对象

            //小球运动需要用到定时器，为避免多次点击产生多个定时器，
            //在函数开始，进行清除定时器，保证只有一个定时器
            clearInterval(dom.timer)
            //dom.timer
            //1.当这个定时器之前没有定时器，清除一个没有的属性，不报错
            //2.当这个定时器之前有定时器，则清除

            //水平运动每次运动的距离，即水平速度
            var iSpeedX = Math.random()*400 - 200;
            //垂直运动每次运动的距离，即垂直速度
            var iSpeedY = Math.random()*400 - 200;

            //重力场，需要一个重力加速度
            var g = Math.random()*17 + 3;

            //定时器让小球一直改变
            dom.timer = setInterval(function(){
    
    
                /*问题？？？？？？？？？？？？？？？？？？？？？位置不同，效果不同
                    //因为重力的影响，小球垂直方向运动越来越快
                    iSpeedY += g;

                    //下一30毫秒后，小球的垂直和水平位置
                    newLeft = dom.offsetLeft + iSpeedX;
                    newTop = dom.offsetTop + iSpeedY;

                    // //因为重力的影响，小球垂直方向运动越来越快
                    // iSpeedY += g;
                */
                //因为重力的影响，小球垂直方向运动越来越快
                iSpeedY += g;

                //下一30毫秒后，小球的垂直和水平位置
                newLeft = dom.offsetLeft + iSpeedX;
                newTop = dom.offsetTop + iSpeedY;

                
                //下一30毫秒后，小球垂直方向上已经触碰到墙壁或者已经陷入墙壁上
                //可视区高度document.documentElement.clientHeight - 
                //dom.clientHeight是小球正好触碰到墙壁的newTop数据
                if(newTop >= document.documentElement.clientHeight - dom.clientHeight){
    
    
                    //反弹，朝相反的方向运动，下下次这个变量才会发生作用

                    iSpeedY *= -1;

                    //当小球下一次垂直方向上的运动陷入到墙壁上，让小球的位置变动到刚好触碰墙壁的位置
                    newTop = document.documentElement.clientHeight - dom.clientHeight;

                    //碰到墙壁，水平垂直方向都有能量亏损，用速度逐渐减小模拟
                    iSpeedX *= 0.8
                    iSpeedY *= 0.8
                }

                //下一30毫秒后，小球水平方向上已经触碰到墙壁或者已经陷入墙壁上
                //可视区高度document.documentElement.clientWidth - 
                //dom.clientWidth是小球正好触碰到墙壁的newLeft数据
                if(newLeft >= document.documentElement.clientWidth - dom.clientWidth){
    
    
                    //反弹，朝相反的方向运动，下下次这个变量才会发生作用
                    iSpeedX *= -1;

                    //当小球下一次水平方向上的运动陷入到墙壁上，让小球的位置变动到刚好触碰墙壁的位置
                    newLeft = document.documentElement.clientWidth - dom.clientWidth;

                    //碰到墙壁，水平垂直方向都有能量亏损，用速度逐渐减小模拟
                    iSpeedX *= 0.8
                    iSpeedY *= 0.8
                }

                //下一30毫秒后，小球水平方向上已经触碰到天花板或者陷入天花板
                if(newTop <= 0){
    
    
                    //反弹，朝相反的方向运动，下下次这个变量才会发生作用
                    iSpeedY *= -1;

                    //当小球下一次垂直方向上的运动陷入到天花板上，让小球的位置变动到刚好触碰天花板的位置
                    newTop = 0;

                    //碰到墙壁，水平垂直方向都有能量亏损，用速度逐渐减小模拟
                    iSpeedX *= 0.8
                    iSpeedY *= 0.8
                }

                if(newLeft <= 0){
    
    
                    //反弹，朝相反的方向运动，下下次这个变量才会发生作用
                    iSpeedX *= -1;

                    newLeft = 0;

                    //碰到墙壁，水平垂直方向都有能量亏损，用速度逐渐减小模拟
                    iSpeedX *= 0.8
                    iSpeedY *= 0.8
                }

                //当水平速度和垂直速度为0，还有小球在最底部，代表运动结束，就可以清除定时器
                //水平速度和垂直速度最终不为0,都是负数
                if(Math.abs(iSpeedX) < 1){
    
    
                    iSpeedX = 0;
                }
                if(Math.abs(iSpeedY) < 1){
    
    
                    iSpeedY = 0;
                }
                

                //当水平速度和垂直速度为0，还有小球在最底部，代表运动结束，就可以清除定时器
                if(iSpeedX == 0&&iSpeedY == 0&&newTop == document.documentElement.clientHeight - dom.clientHeight){
    
    
                    console.log(1);
                    clearInterval(dom.timer);
                }else if(iSpeedX == 0&&newTop == document.documentElement.clientHeight - dom.clientHeight){
    
    
                    clearInterval(dom.timer);
                }else{
    
    
                    //运动没结束
                    //水平和垂直同时运动，即多方向运动
                    dom.style.left = newLeft + "px";
                    dom.style.top = newTop + "px";
                }
            },30)
        }
    </script>
</body>
</html>
渡一模拟重力场：多方向运动，重力加速度，碰撞反弹，能量损失

猜你喜欢
