JS实现碰撞检测和周期运动的完整例子

本文阐述了用JS实现的碰撞检测和周期运动。分享给大家参考，如下：

！doctype html townleta charset=' utf-8 ' title无标题文档/title style type=' text/CSS ' # main { width :525 px；高度：300 px；border:3px双黑；} # t { font-size :30 px；颜色：蓝色；宽度width:120pxheight:35px位置：绝对；left:1top:1}/style/head dydiv id=' main ' OnMouseDown=' movePoS()；'onMouseUp=' BeginMove()；'Div id='t '移动文本/div/div脚本类型=' text/JavaScript ' vartid；var iDeltaX=1，iDeltaY=1，iTmpvar obj=document . getelementbyid(' t ')；var x=obj . style . left；var y=obj . style . top；var TOPX=420，BOUNDX=1，TOPY=270，BOUNDY=1；函数move pos(){ clear time out(TiD)；//每次练习前清除最后一个计时器。这是关键！x=ParSeint(x IDelTax)；y=parsent(y IDelTay)；//注意！x=x 1；而x=x iDeltaX甚至没有！//core:回弹碰撞算法if(xtopx | | xboundx | | ytopy | | ybboundy){ itmp=ideltax；iDeltaX=-iDeltaY；iDeltaY=iTmp}//在文本没有移动10步(每次移动1个像素)后，文本颜色变为红色，再移动10步后，文本颜色再次变为蓝色，如果(x==0){ if(x==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)；}函数BeginMove(){ ClearTiME(TiD)；}//在div(id='main ')中按下鼠标点击时，鼠标弹出时运动开始和结束。所以需要在div(id='main ')内按鼠标点击，然后在div外释放(id='main ')，鼠标弹出。//其实这并不完美，因为div (ID=)

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun来测试上述代码的运行效果。

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》和0103010

希望本文对JavaScript编程有所帮助。