首页新闻找找看学习计划

DOM运动的重力回弹+抛物线bug

0
[待解决问题]

以下为页面代码,包含css,html,js
效果为一个原型的div在一个具有边框的大div中来回弹动
问题描述:
当上下的步长缩减为0.1时,在第二次弹到左边时,会飞出当前大框
将上下的步长缩减改为其他数值,问题时有发生
测试分析:
通过各种测试,问题出现的原因是因为小球同时在底部和左右弹动时发生问题
疑问点:
为什么会发生这个情况?
如何彻底解决这个问题?

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #cont{
            width: 1000px;height: 500px;
            margin: 50px auto;
            border: solid 1px black;
            position: relative;
        }
        #box{
            width: 100px;height: 100px;
            background: red;
            position: absolute;left: 0;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="cont">
        <div id="box"></div>
    </div>
</body>
<script type="text/javascript">

    var ocont = document.getElementById("cont")
    var obox = document.getElementById("box")
    
    var speed = 10;
    var target = ocont.offsetHeight - obox.offsetHeight;
    var timer = null;
    
    var speedL = 50;
    var targetL = ocont.offsetWidth - obox.offsetWidth;
    
    var g = 1;
    
    ocont.onclick = function(){
        clearInterval(timer);
        timer = setInterval(function(){
            speed += g;
            if(target - obox.offsetTop < speed){
                obox.style.top = target + "px";
                speed = -(speed)*0.8;
                if(Math.abs(speed) < 1){
                    clearInterval(timer)
                }
            }else{
                obox.style.top = obox.offsetTop + speed + "px";
                obox.style.left = obox.offsetLeft + speedL + "px";
            }
            if(targetL - obox.offsetLeft < speedL){
                obox.style.left = targetL + "px";
                speedL = -speedL
            }
            if(Math.abs(0 - obox.offsetLeft) < Math.abs(speedL)){
                obox.style.left = "0";
                speedL = -speedL
            }
        },100)
    }
</script>
杨树林~的主页 杨树林~ | 菜鸟二级 | 园豆:202
提问于:2018-08-31 10:10
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册