JS實(shí)現(xiàn)的碰撞檢測(cè)與周期移動(dòng)完整示例

2019-11-19 10:55:25

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了JS實(shí)現(xiàn)的碰撞檢測(cè)與周期移動(dòng)。分享給大家供大家參考，具體如下：

<!doctype html><html><head><meta charset="utf-8"><title>無標(biāo)題文檔</title><style type="text/css">    #main {width:525px;          height:300px;          border:3px double black;}    #t {font-size:30px;        color:blue;        width:120px;        height:35px;        position:absolute;        left:1;        top:1;    }</style></head><body><div id="main" onMouseDown="MovePos();" onMouseUp="BeginMove();">    <div id="t" >移動(dòng)文本</div></div><script type="text/javascript">    var tID;    var iDeltaX = 1,iDeltaY = 1,iTmp;    var obj = document.getElementById("t");    var x = obj.style.left;    var y = obj.style.top;    var TOPX = 420,BOUNDX =1,TOPY =270,BOUNDY=1;    function MovePos()    {        clearTimeout(tID);//每次運(yùn)動(dòng)前都要清除上一次的定時(shí)器，這個(gè)是關(guān)鍵！！        x=parseInt(x+iDeltaX);        y=parseInt(y+iDeltaY);        //注意！x=x+1;和x=x+iDeltaX;都不行！        //核心：反彈碰撞算法        if(x>TOPX || x<BOUNDX || y>TOPY || y<BOUNDY)        {            iTmp = iDeltaX;            iDeltaX=-iDeltaY;            iDeltaY=iTmp;        }        //文本沒移動(dòng)10步后（每次移動(dòng)步長(zhǎng)1像素），文本顏色就變?yōu)榧t色，再移動(dòng)10步后，文本顏色又變成藍(lán)色，并持續(xù)這種切換方式        if(x%10==0)        {            if(x%20==0){                obj.style.color = "blue";            }else{                    obj.style.color = "red";            }        }        obj.style.left = x+"px";        obj.style.top = y+"px";        //注意！obj.setAttribute("left",x);obj.setAttribute("top",y);是不行的！        //設(shè)置定時(shí)器        tID=setTimeout("MovePos()",10);    }    function BeginMove(){        clearTimeout(tID);    }    //當(dāng)鼠標(biāo)點(diǎn)擊在div(id="main")內(nèi)按下時(shí)，運(yùn)動(dòng)開始，并且在鼠標(biāo)彈起時(shí)運(yùn)動(dòng)結(jié)束，所以，要在div(id="main")內(nèi)按下鼠標(biāo)單擊，然后在div(id="main")外松開，鼠標(biāo)彈起    //其實(shí)這個(gè)不怎么完美，因?yàn)閐iv(id="main")的位置還沒調(diào)好，不過，反彈效果成功了</script></body></html>

運(yùn)行效果：