本文实例讲述了原生射流研究…实现的碰撞检测功能。分享给大家供大家参考，具体如下：

！doctype html html ownerta charset=' utf-8 '标题www。jb51。net JS碰撞检测/title style div { width :100 px；高度：100 px} # box { background:red位置：绝对；} # box1 { background:green位置：绝对；top :300 pxleft :300 px }/style script//两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的左边的和顶端值。然后再判断其是否碰撞，且碰撞的过程随时改变其层级，(原需var 8个变量，现在只需四个变量)函数collText(obj，左侧，顶部，obj 1){ var L1=obj。offsetLeft-obj。offsetWidthvar t1=obj。偏移顶部-obj。偏移光线；R1。偏移物体。偏移；var B1=obj。偏移顶部对象。偏移光线；if(左L1 | |顶部t1 | |左R1 | |顶部B1){ obj。风格。Zin dex=3；目标1。风格。Zin dex=1；返回真；} else { obj。风格。Zin dex=1；目标1。风格。Zin dex=3；返回false } }窗户。onload=function(){ var oBox=document。getelementbyid(' box ')；var obox 1=文档。getelementbyid('框1 ')；obox。onmousedown=function(ev){ var oEvent=ev | | event；var disX=oevent。clientx-obox。offsetleftvar disY=oevent。clienti-obox。偏移顶部；文件。onmousemove=function(ev){ var oEvent=ev | | event；var l=oevent。客户端x-DIsX；var t=oevent。client y-DIsy；obox。风格。left=l ' pxobox。风格。top=t ' pxif(collText(oBox1，l，t，oBox)){ oBox 1。风格。背景='绿色'；}else{ oBox1.style.background='黄色；} };文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=nulloBox。网格捕捉oBox。网格捕捉();};obox。setcaptureobox。setcapture()；返回false} obox 1。onmousedown=function(ev){ var oEvent=ev | | event；var disx 1=oevent。clientx-obox 1。offsetleftvar disy 1=oevent。clienty-obo x1。偏移顶部；文件。onmousemove=function(ev){ var oEvent=ev | | event；var le=oevent。client x-disx 1；var to=oevent。client y-dis y1；obox 1。风格。left=le“px”；obox 1。风格。top=to ' pxif(collText(oBox，le，to，oBox 1)){ oBox。风格。背景='红色'；} else { obox。风格。背景=' # 000 '；} };文件。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=nulloBox1。网格捕捉oBox1。网格捕捉();} obox 1。setcaptureobox 1。setcapture()；返回false } }/script/head dydiv id=' box '/div div id=' box 1 '/div/body/html这里使用在线HTML/CSS/JavaScript运行工具http://tools.jb51.net/code/HtmlJsRun测试运行效果如下（碰撞判定时颜色改变):

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

希望本文所述对大家Java脚本语言程序设计有所帮助。