原生js实现一个DIV的碰撞反弹运动，并且添加重力效果
程序员文章站
2022-06-24 10:19:48
继上一篇。。。 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果 关键在于边界检测，以及乘以的系数问题，实现代码并不难，如下： ......
继上一篇。。。
原生js实现一个DIV的碰撞反弹运动，并且添加重力效果
关键在于边界检测，以及乘以的系数问题，实现代码并不难，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;}
div{height:100px;width:100px;background:red;position:absolute;}
/*添加绝对定位*/
</style>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
var div=document.getElementById("div");
var speedx=300;
var speedy=200;
var timer=null;
btn.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
speedy+=3;
var l=div.offsetLeft+speedx;
var t=div.offsetTop+speedy;
if(t>=document.documentElement.clientHeight-div.offsetHeight){
speedy*=-0.8;
speedx*=0.8;
t=document.documentElement.clientHeight-div.offsetHeight;
}else if(t<=0){
speedy*=-0.8;
speedx*=0.8;
t=0;
}
if(l>=document.documentElement.clientWidth-div.offsetWidth){
speedx*=-0.8;
l=document.documentElement.clientWidth-div.offsetWidth;
}else if(l<=0){
speedx*=-0.8;
l=0;
}
if(Math.abs(speedx)<1){
speedx=0;
}
if(Math.abs(speedy)<3){ //注意这块儿
speedy=0;
}
if(speedx==0&&speedy==0){
console.log(speedx+" "+speedy);
clearInterval(timer);
}
div.style.left=l+"px";
div.style.top=t+"px";
},10);
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="开始运动">
<div id="div"></div>
</body>
</html>