原生JS实现的碰撞检测功能示例
网络 2018-06-08 1776
本文实例讲述了原生JS实现的碰撞检测功能。分享给大家供大家参考，具体如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <!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测试运行效果如下（碰撞判定时颜色改变）：
下一篇：外汇业务如何进行核算
