碰撞运动:就是碰到页面的边界就返回
实现原理就是：根据speed动态的修改left和top，这个时候物体会向下做自由落体；
然后当物体碰到边界就返回，计算碰到边界原理如下图；
speed*-1就可以实现物体反方向运行
image.png
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
var iSpeedX=1000;
var iSpeedY=0;
function startMove(){
setInterval(function (){
var oDiv=document.getElementById('div1');
iSpeedY+=3;
var l=oDiv.offsetLeft+iSpeedX;
var t=oDiv.offsetTop+iSpeedY;
//碰到敞口下方
if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
//*0.8 将速度逐渐减小，回弹的高度变小；参考实际做自由落体的物体运行情况
iSpeedY*=-0.8;
//改变横向速度
iSpeedX*=0.8;
//最后直接赋值为所剩空间的大小，防止t超出屏幕触发滚动条
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
else if(t<=0){
iSpeedY*=-1;
iSpeedX*=0.8;
t=0;
}
if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
iSpeedX*=-0.8;
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
else if(l<=0){
iSpeedX*=-0.8;
l=0;
}
//避免小数引发横向运动不停
if(Math.abs(iSpeedX)<1){
iSpeedX=0;
}
if(Math.abs(iSpeedY)<1){
iSpeedY=0;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
document.title=iSpeedX;
}, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
以上实现了碰撞运动；拖拽之前也有写过，拖拽+碰撞具体实现如下
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function (){
var oDiv=document.getElementById('div1');
var lastX=0;
var lastY=0;
oDiv.onmousedown=function (ev){
var oEvent=ev||event;
var disX=oEvent.clientX-oDiv.offsetLeft; //鼠标到div左边距离
var disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
iSpeedX=l-lastX; //lastX 拖拽的前一个点的横坐标
iSpeedY=t-lastY;
lastX=l; //更新l t
lastY=t;
document.title='x:'+iSpeedX+', y:'+iSpeedY;
};
document.onmouseup=function (){
document.onmousemove=null;
document.onmouseup=null;
startMove();
};
clearInterval(timer);
};
};
var timer=null;
var iSpeedX=0; //全局变量 上面函数可以用 ；
var iSpeedY=0;
function startMove(){
clearInterval(timer);
timer=setInterval(function (){
var oDiv=document.getElementById('div1');
iSpeedY+=3; //重力
var l=oDiv.offsetLeft+iSpeedX; //l表示div左边到窗口左边的距离
var t=oDiv.offsetTop+iSpeedY; //t表示div左边到窗口顶端的距离
if(t>=document.documentElement.clientHeight-oDiv.offsetHeight){
iSpeedY*=-0.8; //剩以小数 是div向上的速度速度减小
iSpeedX*=0.8;
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
else if(t<=0){
iSpeedY*=-1;
iSpeedX*=0.8;
t=0;
}
if(l>=document.documentElement.clientWidth-oDiv.offsetWidth){
iSpeedX*=-0.8;
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
else if(l<=0){
iSpeedX*=-0.8;
l=0;
}
if(Math.abs(iSpeedX)<1){
iSpeedX=0;
}
if(Math.abs(iSpeedY)<1){
iSpeedY=0;
}
if(iSpeedX==0 && iSpeedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight){
clearInterval(timer);
}
else{
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
document.title=iSpeedX;
}, 30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
