2. 程式人生 > >JavaScript碰撞檢測原理及其實現

JavaScript碰撞檢測原理及其實現

阿新 • • 發佈：2019-01-29

1.模擬碰撞

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

2.碰撞檢測原理

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

這裡寫圖片描述
也就是說,只要滿足條件:oDiv2.div2R小於oDiv1.div1L|| oDiv2.div2L大於oDiv1.div1R || oDiv2.div2B小於oDiv1.div1T|| oDiv2.div2T大於oDiv1.div1B就不會發送碰撞

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.onload=function
 
 (){
        var oDiv1=document.getElementById('div1');
        var oDiv2=document.getElementById('div2');



        oDiv2.onmousedown=function (onEvent,obj){//對div1實現拖拽,並對碰撞進行檢測
            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.onmousemove=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){
                    //未傳送碰撞
                }else{
                    //發生碰撞
                    alert('發生碰撞');
                }

            }

            document.onmouseup=function (){
                document.onmouseup=document.onmousemove=null;
                if(obj.setCapture)
                    obj.releaseCapture();
            }
            return false;
        }
    }
    </script>
</head>
<body>
    <div id="div2">div2</div>
    <div id="div1">div1</div>
</body>
</html>

相關推薦

JavaScript碰撞檢測原理及其實現

1.模擬碰撞 簡單模擬碰撞過程,用一個可以拖拽的div2去嘗試碰撞一個固定的div1(均用絕對定位) 2.碰撞檢測原理 如圖所示: 使得div分別有4個距離屬性( L(left),T(t

淺談動態數組原理及其實現

縮小 vector 但是 align 幹什麽 可能 而不是 快速實現 param 　　stl中的vector是競賽中常用的容器，原因在於省內存，O(1)在後端插入和刪除、隨機下標訪問，今天就來談談它的實現。 最簡單的一個動態數組 　 動態數組並不是真正意義上的動態

拓撲排序的原理及其實現

還需要 play 結果集 3.0 硬幣 tps 進行 程序 微軟雅黑 本文將從以下幾個方面介紹拓撲排序： 拓撲排序的定義和前置條件 和離散數學中偏序/全序概念的聯系 典型實現算法 Kahn算法 基於DFS的算法 解的唯一性問題 實際例子 取材自以下材料：

Java對象池技術的原理及其實現

問題 多種方式 等待 具體實現 tex sin 工作 程序 collect Java對象的生命周期分析　　Java對象的生命周期大致包括三個階段：對象的創建，對象的使用，對象的清除。因此，對象的生命周期長度可用如下的表達式表示：T = T1 + T2 +T3。其中T1

【底層原理】四位計算機的原理及其實現

一點 led燈 waiting lean div rm2 src and nvt 你是否想過，計算機為什麽會加減乘除？或者更直接一點，計算機的原理到底是什麽？ Waitingforfriday有一篇詳細的教程，講解了如何自己動手，制作一臺四位計算機。從中可以看到，二進制、數

短址(short URL)原理及其實現

前言 最近看了一些關於短址（short URL）方面的一些部落格，有些部落格說到一些好的東西，但是，也不是很全，所以，這篇部落格算是對其它部落格的一個總結吧。 介紹 短址，顧名思義，就是把長的 URL 轉成短的 URL, 現在提供這種服務的有很多公司，我們以google家的 URL

【目標檢測】目標檢測原理與實現(五)--基於Cascade分類器的目標檢測

基於Cascade分類器的目標檢測        從今天開始進入基於機器學習的目標檢測，前幾節雖然也接觸了一些機器學習的方法，但它主要是做輔助工作，機器學習的方法和非機器學習的方法結合在一起使用，說到這想起來前幾天看到一位博士師兄發的笑話，說的是百度實驗室：  

作業系統-併發控制原理及其實現

　　首先我們要明白“皮之不存，毛將焉附”的道理，計算機系統是硬體與系統軟體完美結合的一個有機整體。因此在學習這一部分時，特別是學習中斷控制原理和系統凋用等內容時，要聯絡計算機組成原理的知識，這樣才能對整個系統瞭解。 一、程式和程序 　　程序(process)這一術語 ，最初是在麻省理工學院(MIT)開發的

框架升級 -- 增量爬蟲設計原理及其實現

目標 理解增量式爬蟲的原理 完成增量式爬蟲的實現 1 增量爬蟲設計原理 增量抓取，意即針對某個站點的資料抓取，當網站的新增資料或者該站點的資料發生了變化後，自動地抓取它新增的或者變化後的資料 設計原理： 1.1 實現關閉請求去重 為Reques

四位計算機的原理及其實現

你是否想過，計算機為什麼會加減乘除？或者更直接一點，計算機的原理到底是什麼？ Waitingforfriday有一篇詳細的教程，講解了如何自己動手，製作一臺四位計算機。從中可以看到，二進位制、數理邏輯、電子學怎樣融合在一起，構成了現代計算機的基礎。 一、什麼是二進位

可繫結可擴充套件的帳號系統設計原理及其實現

隨著時間推移,後期可能增加更多登入的途徑,所以系統需要使用可擴充套件的方式實現假設使用者已經用手機號碼註冊過(這裡稱為老帳號),此時如果使用微信登入並且完成了相關購買等,再繫結到老帳號上,這時候需要實現使用者新舊資料合併,以確保前端展示的資料和使用者的真實查詢一致;如果再加入QQ登入並且繫結同個手機號,同樣需

Adobe AE外掛原理及其實現

PICA構件體系 在PICA的實現中，有一個與COM類似的介面Suite。Suite實際上是函式指標的結構體，PICA體系按功能將PICA API函式做成不同的Suite提供給使用者。下面是PlCA最基本的Suite，其它的Suite都是通過該Suite獲得。 與COM區別 將PICA與

【進階4-2期】Object.assign 原理及其實現

引言 上篇文章介紹了賦值、淺拷貝和深拷貝，其中介紹了很多賦值和淺拷貝的相關知識以及兩者區別，限於篇幅只介紹了一種常用深拷貝方案。 本篇文章會先介紹淺拷貝 Object.assign 的實現原理，然後帶你手動實現一個淺拷貝，並在文末留下一道面試題，期待你的評論。 淺拷貝 Object.assign 上篇

DHCP協議原理及其實現流程

DHCP（Dynamic Host Configuration Protocol）：動態主機配置協議 在常見的小型網路中（例如家庭網路和學生宿舍網），網路管理員都是採用手工分配IP地址的方法，而到了中、大型網路，這種方法就不太適用了。在中、大型網路，特別是大型網路中，往往有超過100臺的客戶機，手動分配IP

【目標檢測】目標檢測原理與實現(一)

轉載：http://blog.csdn.net/marvin521/article/details/9058735 基於閾值影象處理的目標檢測           從今天起開始要寫一些關於目標檢測的文章,涵蓋從簡單的閾值影象處理檢測、霍夫變換（hough transf

HTML5 手勢檢測原理和實現

前言 隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足於把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提供開箱即用的手勢系統，但是提供了更底層一些的對 touch 事件

I2C通信基本原理及其實現

false 波形 如何 tps function del 數據通信 aaa char I2C是一種總線式結構，它只需要SCL時鐘信號線與SDA數據線，兩根線就能將連接與總線上的設備實現數據通信，由於它的簡便的構造設計，於是成為一種較為常用的通信方式。 由於I2C采用的

（學習筆記二）——基於opencv人臉檢測原理及實現

最近搞了幾天的人臉檢測，終於把大體框架和原理搞清楚了，現在寫出來供大家學習之用，如有不對之處，還請大家指正。也希望大家在學習opencv的過程中能將學習過程及重點記錄下來，以部落格的形式分析，畢竟opencv的教材還不太多，我們自己學習大部分要靠網上的資料。通過部落格分享的

雙線性插值原理及其實現--基於OpenCV實現

這是我第一個部落格，一方面我把部落格看作筆記，記錄我在學習的過程中遇到的問題，寫部落格的過程也是加深理解的過程；另一方面也是為了與大家分享，共同進步。 雙線性插值分為兩步：1. 先做影象尺寸縮放；2. 求縮放後的影象畫素灰度值。 影象尺度縮放變換的公式

基於opencv人臉檢測原理及實現

最近搞了幾天的人臉檢測，終於把大體框架和原理搞清楚了，現在寫出來供大家學習之用，如有不對之處，還請大家指正。也希望大家在學習opencv的過程中能將學習過程及重點記錄下來，以部落格的形式分析，畢竟opencv的教材還不太多，我們自己學習大部分要靠網上的資料。通過部落格分享