JavaScript碰撞檢測(cè)原理及其實(shí)現(xiàn)代碼
更新時(shí)間：2020年03月12日 15:11:22 作者：SuperluminalSnails
這篇文章主要為大家詳細(xì)介紹了JavaScript碰撞檢測(cè)原理及其實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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ō),畫出一個(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
重寫JS setTimeout 方法 JavaScript Hook
想要重寫 setTimeout 方法，發(fā)現(xiàn)有動(dòng)態(tài)引入的js，需要改成自己的js，以下教教大家這個(gè)需求，防止網(wǎng)站被劫持2023-07-07
TypeScript聯(lián)合類型,交叉類型和類型保護(hù)
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護(hù)，聯(lián)合類型就是定義一些類型，定義的變量只需要滿足任意一種類型即可，交叉類型就是需要滿足所有類型，交叉類型使用，更多內(nèi)容我們來(lái)看看下面文章詳細(xì)內(nèi)容吧2021-12-12
JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析
這篇文章主要介紹了JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
網(wǎng)頁(yè)右下角彈出窗體實(shí)現(xiàn)代碼
右下角彈出窗體的效果在瀏覽網(wǎng)頁(yè)的時(shí)候會(huì)遇到，那么它是怎么實(shí)現(xiàn)的呢？本文有個(gè)不錯(cuò)的示例，大家可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)列表切換效果的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript常用數(shù)學(xué)函數(shù)用法示例
這篇文章主要介紹了JavaScript常用數(shù)學(xué)函數(shù)用法,結(jié)合實(shí)例形式分析了JavaScript常見(jiàn)的對(duì)數(shù)、平方、絕對(duì)值、正弦、四舍五入等相關(guān)數(shù)學(xué)函數(shù)使用技巧,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了JavaScript中奇葩的假值應(yīng)用,需要的朋友可以參考下2014-03-03
js動(dòng)態(tài)創(chuàng)建上傳表單通過(guò)iframe模擬Ajax實(shí)現(xiàn)無(wú)刷新
這篇文章主要介紹了js動(dòng)態(tài)創(chuàng)建上傳表單通過(guò)iframe模擬Ajax無(wú)刷新的具體實(shí)現(xiàn),需要的朋友可以參考下2014-02-02
微信小程序開發(fā)問(wèn)題之wx.previewImage
這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)問(wèn)題之wx.previewImage的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12