开通微信小程序收费吗_原生JS完成的碰撞检测功用示例

原生JS实现的碰撞检测功能示例       这篇文章主要介绍了原生JS实现的碰撞检测功能,涉及javascript鼠标事件响应及页面图形坐标位置运算、检测相关操作技巧,需要的朋友可以参考下
#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运行工具测试运行效果如下(碰撞判定时颜色改变):

 

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。


相关阅读