[Js]碰撞运动

描述：撞到目标点弹回来（速度反转）

一、无重力的漂浮div

var div1=document.getElementById("div1");

var iSpeedX=6;

var iSpeedY=8;

setInterval(function(){

var l=div1.offsetLeft+iSpeedX;

var t=div1.offsetTop+iSpeedY;

if(t>=document.documentElement.clientHeight-div1.offsetHeight){

iSpeedY*=-1;          //速度反向

t=document.documentElement.clientHeight-div1.offsetHeight;    //超出下边界时，把它拉回到下边界，不然右边滚动条会闪动出现一下

}

else if(t<=0){

iSpeedY*=-1;

t=0;

}

if(l>=document.documentElement.clientWidth-div1.offsetWidth){

iSpeedX*=-1;

l=document.documentElement.clientWidth-div1.offsetWidthl;

}

else if(l<=0){

iSpeedX*=-1;

l=0;

}

div1.style.left=l+'px';

div1.style.top=t+'px';

},30);

二、碰撞+重力

所谓重力就是Y轴的速度不断增加

setInterval(function(){

iSpeedY+=3;

var l=div1.offsetLeft+iSpeedX;

var t=div1.offsetTop+iSpeedY;

if(t>=document.documentElement.clientHeight-div1.offsetHeight){

iSpeedY*=-0.8;

iSpeedX*=0.8;          //横向速度也要变慢，否则碰到地面时会停不下来

t=document.documentElement.clientHeight-div1.offsetHeight;

}

else if(t<=0){

iSpeedY*=-1;

iSpeedX*=0.8;

t=0;

}

if(l>=document.documentElement.clientWidth-div1.offsetWidth){

iSpeedX*=-0.8;

l=document.documentElement.clientWidth-div1.offsetWidthl;

}

else if(l<=0){

iSpeedX*=-0.8;

l=0;

}

if(Math.abs(iSpeedX)<1){       //解决小数的问题，因为假如速度是小数，正的没问题，100(iSpeed=0.5)-->100.5-->100，负的100(iSpeed=-0.5)--->99.5-->99，可能会出现

x轴反向时滑行

iSpeedX=0;

}

if(Math.abs(iSpeedY)<1){

iSpeedY=0;

}

div1.style.left=l+'px';

div1.style.top=t+'px';

},30);

三、碰撞+重力+拖拽

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;
        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;            //拖拽结束时的速度
            iSpeedY=t-lastY;          
            lastX=l;          //更新上一个点的位置
            lastY=t;        
        };      
        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;
        var t=oDiv.offsetTop+iSpeedY;      
        if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
        {
            iSpeedY*=-0.8;
            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);
}