原生JS实现的碰撞检测功能示例
程序员文章站
2022-11-12 23:16:04
本文实例讲述了原生js实现的碰撞检测功能。分享给大家供大家参考,具体如下:
本文实例讲述了原生js实现的碰撞检测功能。分享给大家供大家参考,具体如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net js碰撞检测</title> <style> div{width:100px; height:100px; } #box{background:red; position:absolute; } #box1{background:green;position:absolute;top:300px; left:300px;} </style> <script> //两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的left和top值。然后再判断其是否碰撞,且碰撞的过程随时改变其层级,(原需 var 8个变量,现在只需4个变量) function colltext(obj,left,top,obj1){ var l1=obj.offsetleft-obj.offsetwidth; var t1=obj.offsettop-obj.offsetheight; var r1=obj.offsetleft+obj.offsetwidth; var b1=obj.offsettop+obj.offsetheight; if(left<l1||top<t1||left>r1||top>b1){ obj.style.zindex=3; obj1.style.zindex=1; return true; }else{ obj.style.zindex=1; obj1.style.zindex=3; return false; } }; window.onload=function(){ var obox=document.getelementbyid('box'); var obox1=document.getelementbyid('box1'); obox.onmousedown=function(ev){ var oevent= ev || event; var disx=oevent.clientx-obox.offsetleft; var disy=oevent.clienty-obox.offsettop; document.onmousemove=function(ev){ var oevent= ev || event; var l=oevent.clientx-disx; var t=oevent.clienty-disy; obox.style.left=l+'px' ; obox.style.top=t+'px' ; if(colltext(obox1,l,t,obox)){ obox1.style.background='green'; }else{ obox1.style.background='yellow'; } }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; obox.reseasecapture&&obox.reseasecapture(); }; obox.setcapture&&obox.setcapture(); return false; } obox1.onmousedown=function(ev){ var oevent= ev || event; var disx1=oevent.clientx-obox1.offsetleft; var disy1=oevent.clienty-obox1.offsettop; document.onmousemove=function(ev){ var oevent= ev || event; var le=oevent.clientx-disx1; var to=oevent.clienty-disy1; obox1.style.left=le+'px' ; obox1.style.top=to+'px' ; if(colltext(obox,le,to,obox1)){ obox.style.background='red'; }else{ obox.style.background='#000'; } }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; obox1.reseasecapture&&obox1.reseasecapture(); } obox1.setcapture&&obox1.setcapture(); return false; } } </script> </head> <body> <div id="box"></div> <div id="box1"></div> </body> </html>
这里使用在线html/css/javascript运行工具http://tools.jb51.net/code/htmljsrun测试运行效果如下(碰撞判定时颜色改变):
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript运动效果与技巧汇总》、《javascript动画特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。