首頁 > 開發者 > 網站開發

js原生碰撞檢測

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：rip   type   var   span   基礎上   utf-8   head   char   win   

<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style>div{width:100px;    height:100px;}#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>

 

js原生碰撞檢測

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More