JavaScript碰撞檢測原理及其實現(xiàn)代碼

更新時間：2020年03月12日 15:11:22 作者：SuperluminalSnails

這篇文章主要為大家詳細介紹了JavaScript碰撞檢測原理及其實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)碰撞檢測原的具體代碼，供大家參考，具體內(nèi)容如下

1.模擬碰撞

簡單模擬碰撞過程,用一個可以拖拽的div2去嘗試碰撞一個固定的div1(均用絕對定位)

2.碰撞檢測原理

如圖所示:
使得div分別有4個距離屬性( L(left),T(top),R(right),B(bottom) ).
對于div1來說,畫出一個九宮格,div2在除中心以為的8個格子任意移動都不會發(fā)送碰撞.

也就是說,只要滿足條件:oDiv2.div2R小于oDiv1.div1L|| oDiv2.div2L大于oDiv1.div1R || oDiv2.div2B小于oDiv1.div1T|| oDiv2.div2T大于oDiv1.div1B就不會發(fā)送碰撞

3.具體測試代碼

<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">
 //獲取對象樣式屬性值
 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){//對div1實現(xiàn)拖拽,并對碰撞進行檢測
   obj=this;
   var ev=onEvent||event;
   var distance={};
   distance.disX=ev.clientX-obj.offsetLeft;//到左邊框的距離
   distance.disY=ev.clientY-obj.offsetTop;//到上邊框的距離

   //獲取div1的四個值
   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的四個值
    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);*/

    //碰撞檢測
    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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

深入淺出分析javaScript中this用法
這篇文章主要介紹了javaScript中this用法,實例分析了javascript中this的用途與相關的使用技巧,需要的朋友可以參考下
2015-05-05
深入理解JavaScript事件機制
事件機制是幾乎所有開發(fā)語言都有的機制，并不是deviceone的獨創(chuàng)，在某些語言稱之為消息(Event),有些地方稱之為(Message).接下來通過本文給大家介紹JS事件機制的理解，需要的朋友一起學習吧
2023-04-04
僅IE6/7/8中innerHTML返回值忽略英文空格的問題
僅IE6/7/8中innerHTML返回值忽略英文空格的問題，需要此問題的朋友可以參考下。
2011-04-04
bootstrap表單示例代碼分享
這篇文章主要為大家詳細介紹了bootstrap表單示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
微信小程序數(shù)據(jù)劫持代理的實現(xiàn)
本文主要介紹了微信小程序?數(shù)據(jù)劫持代理的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
javascript設計模式 – 命令模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 命令模式,結(jié)合實例形式分析了javascript命令模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下
2020-04-04
關于微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問題
這篇文章主要介紹了微信小程序使用echarts/數(shù)據(jù)刷新重新渲染/圖層遮擋問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
javascript基本數(shù)據(jù)類型和轉(zhuǎn)換
本文主要介紹了javascript的基本數(shù)據(jù)類型和轉(zhuǎn)換，具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
原生Js實現(xiàn)日歷掛件
這篇文章主要為大家詳細介紹了原生Js實現(xiàn)日歷掛件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
JavaScript代碼簡化技巧實例解析
這篇文章主要介紹了JavaScript代碼簡化技巧實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-09-09