碰撞運(yùn)動(dòng):就是碰到頁(yè)面的邊界就返回
實(shí)現(xiàn)原理就是：根據(jù)speed動(dòng)態(tài)的修改left和top踢关，這個(gè)時(shí)候物體會(huì)向下做自由落體育特；
然后當(dāng)物體碰到邊界就返回芽死，計(jì)算碰到邊界原理如下圖啃憎；
speed*-1就可以實(shí)現(xiàn)物體反方向運(yùn)行
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>無(wú)標(biāo)題文檔</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 將速度逐漸減小芝囤，回彈的高度變小辛萍；參考實(shí)際做自由落體的物體運(yùn)行情況
iSpeedY*=-0.8;
//改變橫向速度
iSpeedX*=0.8;
//最后直接賦值為所拭蹑ⅲ空間的大小，防止t超出屏幕觸發(fā)滾動(dòng)條
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;
}
//避免小數(shù)引發(fā)橫向運(yùn)動(dòng)不停
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="開(kāi)始運(yùn)動(dòng)" onclick="startMove()" />
<div id="div1">
</div>
</body>
以上實(shí)現(xiàn)了碰撞運(yùn)動(dòng)贩毕；拖拽之前也有寫(xiě)過(guò)悯许，拖拽+碰撞具體實(shí)現(xiàn)如下
<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>無(wú)標(biāo)題文檔</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; //鼠標(biāo)到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 拖拽的前一個(gè)點(diǎn)的橫坐標(biāo)
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; //全局變量 上面函數(shù)可以用 ；
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; //剩以小數(shù) 是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="開(kāi)始運(yùn)動(dòng)" onclick="startMove()" />
<div id="div1">
</div>
</body>
