这次给大家带来JS实现碰撞检测步骤详解，JS实现碰撞检测的注意事项有哪些，下面就是实战案例，一起来看一下。
JS碰撞检测 p{width:100px; height:100px;}#box{background:red; position:absolute; }#box1{background:green;position:absolute;top:300px; left:300px;}//两个碰撞的盒子。是建立在一个不动的基础上。所以可以根据不动的盒子求出四个方向的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||topr1||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; }}
登录后复制
这里使用在线HTML/CSS/JavaScript运行工具http://tools.jb51.net/code/HtmlJsRun测试运行效果如下（碰撞判定时颜色改变）：
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
react-navigation使用步骤详解
vue父子组件传值及slot应用步骤详解
以上就是JS实现碰撞检测步骤详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2759269.html
