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>
