JavaScript碰撞檢測(cè)原理及其實(shí)現(xiàn)代碼
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)碰撞檢測(cè)原的具體代碼，供大家參考，具體內(nèi)容如下
1.模擬碰撞
簡(jiǎn)單模擬碰撞過(guò)程,用一個(gè)可以拖拽的div2去嘗試碰撞一個(gè)固定的div1(均用絕對(duì)定位)
2.碰撞檢測(cè)原理
如圖所示: 使得div分別有4個(gè)距離屬性( L(left),T(top),R(right),B(bottom) ). 對(duì)于div1來(lái)說(shuō),畫(huà)出一個(gè)九宮格,div2在除中心以為的8個(gè)格子任意移動(dòng)都不會(huì)發(fā)送碰撞.
也就是說(shuō),只要滿足條件:oDiv2.div2R小于oDiv1.div1L|| oDiv2.div2L大于oDiv1.div1R || oDiv2.div2B小于oDiv1.div1T|| oDiv2.div2T大于oDiv1.div1B就不會(huì)發(fā)送碰撞
3.具體測(cè)試代碼
<html><head> <title></title> <style type='text/css'> body{margin: 0;padding: 0;} #div2{height: 100px;width: 200px;background-color: orange;position: absolute;left: 0px;top:0px;z-index: 1;} #div1{height: 100px;width: 100px;background-color: #a6e22e;position: absolute;left: 600px;top:400px;} </style> <script type='text/javascript'> //獲取對(duì)象樣式屬性值 function getObjStyle(obj,attr) { return getComputedStyle(obj)?getComputedStyle(obj)[attr]:obj.currentStyle[attr]; } </script> <script type='text/javascript'> window.οnlοad=function (){ var oDiv1=document.getElementById(’div1’); var oDiv2=document.getElementById(’div2’); oDiv2.οnmοusedοwn=function (onEvent,obj){//對(duì)div1實(shí)現(xiàn)拖拽,并對(duì)碰撞進(jìn)行檢測(cè) obj=this; var ev=onEvent||event; var distance={}; distance.disX=ev.clientX-obj.offsetLeft;//到左邊框的距離 distance.disY=ev.clientY-obj.offsetTop;//到上邊框的距離 //獲取div1的四個(gè)值 oDiv1.div1L=getObjStyle(oDiv1,’left’); oDiv1.div1R=parseInt(getObjStyle(oDiv1,’left’))+parseInt(getObjStyle(oDiv1,’width’))+’px’; oDiv1.div1T=getObjStyle(oDiv1,’top’); oDiv1.div1B=parseInt(getObjStyle(oDiv1,’top’))+parseInt(getObjStyle(oDiv1,’height’))+’px’; if(obj.setCapture) obj.setCapture(); document.οnmοusemοve=function (onEvent){ var ev=onEvent||event; obj.style.left=ev.clientX-distance.disX+’px’; obj.style.top=ev.clientY-distance.disY+’px’; //獲取div2的四個(gè)值 oDiv2.div2L=getObjStyle(oDiv2,’left’); oDiv2.div2R=parseInt(getObjStyle(oDiv2,’left’))+parseInt(getObjStyle(oDiv2,’width’))+’px’; oDiv2.div2T=getObjStyle(oDiv2,’top’); oDiv2.div2B=parseInt(getObjStyle(oDiv2,’top’))+parseInt(getObjStyle(oDiv2,’height’))+’px’; /*console.log(’oDiv2.div2L:’+oDiv2.div2L+’ oDiv2.div2R:’+oDiv2.div2R+’ oDiv2.div2T:’+oDiv2.div2T+’ oDiv2.div2B:’+oDiv2.div2B);*/ //碰撞檢測(cè) if(oDiv2.div2R<oDiv1.div1L || oDiv2.div2L>oDiv1.div1R || oDiv2.div2B<oDiv1.div1T || oDiv2.div2T>oDiv1.div1B){ //未發(fā)送碰撞 }else{ //發(fā)生碰撞 alert(’發(fā)生碰撞’); } } document.οnmοuseup=function (){ document.οnmοuseup=document.οnmοusemοve=null; if(obj.setCapture) obj.releaseCapture(); } return false; } } </script></head><body> <div id='div2'>div2</div> <div id='div1'>div1</div></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. python爬蟲(chóng)實(shí)戰(zhàn)之制作屬于自己的一個(gè)IP代理模塊2. HTML 絕對(duì)路徑與相對(duì)路徑概念詳細(xì)3. Spring如何使用xml創(chuàng)建bean對(duì)象4. IntelliJ IDEA設(shè)置默認(rèn)瀏覽器的方法5. python實(shí)現(xiàn)PolynomialFeatures多項(xiàng)式的方法6. Java程序的編碼規(guī)范（6）7. python 利用toapi庫(kù)自動(dòng)生成api8. python實(shí)現(xiàn)在內(nèi)存中讀寫(xiě)str和二進(jìn)制數(shù)據(jù)代碼9. Android Studio設(shè)置顏色拾色器工具Color Picker教程10. Python paramiko 模塊淺談與SSH主要功能模擬解析
網(wǎng)公網(wǎng)安備