原生JS實現(xiàn)的碰撞檢測功能示例
本文實例講述了原生JS實現(xiàn)的碰撞檢測功能。分享給大家供大家參考,具體如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.dbjr.com.cn JS碰撞檢測</title> <style> div{width:100px; height:100px; } #box{background:red; position:absolute; } #box1{background:green;position:absolute;top:300px; left:300px;} </style> <script> //兩個碰撞的盒子。是建立在一個不動的基礎(chǔ)上。所以可以根據(jù)不動的盒子求出四個方向的left和top值。然后再判斷其是否碰撞,且碰撞的過程隨時改變其層級,(原需 var 8個變量,現(xiàn)在只需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>
這里使用在線HTML/CSS/JavaScript運行工具http://tools.jb51.net/code/HtmlJsRun測試運行效果如下(碰撞判定時顏色改變):
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript實現(xiàn)跑馬燈抽獎活動實例代碼解析與優(yōu)化(二)
這篇文章主要介紹了JavaScript實現(xiàn)跑馬燈抽獎活動實例代碼解析與優(yōu)化(二)的相關(guān)資料,需要的朋友可以參考下2016-02-02Vue之vue-tree-color組件實現(xiàn)組織架構(gòu)圖案例詳解
這篇文章主要介紹了Vue之vue-tree-color組件實現(xiàn)組織架構(gòu)圖案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-09-09javascript:FF/Chrome與IE動態(tài)加載元素的區(qū)別說明
今天在寫一段js時,發(fā)現(xiàn)IE與FF在動態(tài)加載Html元素時,有一些差別,一起過來看看下面的代碼吧2014-01-01js中document.getElementById(id)的具體用法
本文主要介紹了js中document.getElementById(id)的具體用法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-04-04JavaScript中const、var和let區(qū)別淺析
在JavaScript中有三種聲明變量的方式:var、let、const。但是有朋友不清楚這三種聲明變量的區(qū)別,下面腳本之家小編給大家詳細介紹下js中const、var和let的區(qū)別,感興趣的朋友一起看看吧2016-10-10javascript 實現(xiàn)的完全兼容鼠標滾軸縮放圖片的代碼
以前看到的都是用IE的zoom,所以非IE就不支持,昨天看到這個js中鼠標滾輪事件詳解 ,于是完全兼容(IE6-8,FF,Chrome,Opera,Safari)的鼠標滾軸縮放圖片效果今天就誕生了2010-02-02