<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.test{
margin: 0;
padding: 0;
position: absolute;
background: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="test" id="test"></div>
<script>
var test=document.getElementById("test");
test.speedX=6;
test.speedY=8;
var timer=null;
clearInterval(timer);
timer=setInterval(function(){
var l=0;
var t=0;
test.speedY+=3;
l=test.offsetLeft+test.speedX;
t=test.offsetTop+test.speedY;
console.log("test.offsetTop:"+test.offsetTop+","+"test.speedY:"+test.speedY);
if(t>=window.innerHeight-test.offsetHeight){
t=window.innerHeight-test.offsetHeight;
test.speedY*=-1;
test.speedX*=0.8;
}
else if(t<=0){
t=0;
test.speedY*=-1;
test.speedX*=0.8;
}
if(l>=window.innerWidth-test.offsetWidth){
l=window.innerWidth-test.offsetWidth;
test.speedX*=-0.8;
}
else if(l<=0){
l=0;
test.speedX*=-0.8;
}
//console.log(test.speedY);
test.style.left=l+"px";
test.style.top=t+"px";
},1000/60);
</script>
</body>
</html>
刚开始疑惑
只改变Y方向上的速度 并且速度不断增加 碰撞到最下边的时候改变Y的正负
那么是怎么停下来的呢
下来的时候 Y是正的 然后上去的Y是负的
无论正负 Y+=3
所以向下的时候就是一个正数加3
向上的时候就是负数加上3 通过不断的加 Y由负数变为正数
所以就由向上运动变成向下运动了
然后如此循环嘛 由于 offsetleft只能接收整数 会把小数部分自动去掉
而left 可以接收到小数 所以这部分误差就相当于 所谓的"摩擦力"
经过N多次运动 运动就会停止滴
代码 源于生活
如果你每当碰撞到最下面的时候 在特意Y*=0.8
那么运动停止的时间就会加快 因为你人为的把"摩擦力"增大了
由于这是重力运动 所以X 只需要在碰撞的时候减少就可以了
因为碰撞就会产生摩擦力 x*=0.8;