JS实现的碰撞检测与周期移动完整示例

2019-11-19 10:55:25

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现的碰撞检测与周期移动。分享给大家供大家参考，具体如下：

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</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" >移动文本</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);//每次运动前都要清除上一次的定时器，这个是关键！！        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;        }        //文本没移动10步后（每次移动步长1像素），文本颜色就变为红色，再移动10步后，文本颜色又变成蓝色，并持续这种切换方式        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);是不行的！        //设置定时器        tID=setTimeout("MovePos()",10);    }    function BeginMove(){        clearTimeout(tID);    }    //当鼠标点击在div(id="main")内按下时，运动开始，并且在鼠标弹起时运动结束，所以，要在div(id="main")内按下鼠标单击，然后在div(id="main")外松开，鼠标弹起    //其实这个不怎么完美，因为div(id="main")的位置还没调好，不过，反弹效果成功了</script></body></html>

运行效果：