基于javascript實(shí)現(xiàn)碰撞檢測(cè)

更新時(shí)間：2020年03月12日 12:39:48 作者：luohui2017

這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)碰撞檢測(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

<html>
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; z-index:2;}
#div2 {width:100px; height:100px; background:yellow; position:absolute; left:230px; top:220px; z-index:1;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script>
window.οnlοad=function ()
{
 var oDiv=document.getElementById('div1');
 var oDiv2=document.getElementById('div2');
 
 oDiv.οnmοusedοwn=function (ev)
 {
 var oEvent=ev||event;
 var disX=oEvent.clientX-oDiv.offsetLeft;
 var disY=oEvent.clientY-oDiv.offsetTop;
 
 document.οnmοusemοve=function (ev)
 {
  var oEvent=ev||event;
  
  oDiv.style.left=oEvent.clientX-disX+'px';
  oDiv.style.top=oEvent.clientY-disY+'px';
  
  var l1=oDiv.offsetLeft;//紅塊左邊線
  var r1=oDiv.offsetLeft+oDiv.offsetWidth;//紅塊右邊線
  var t1=oDiv.offsetTop;//紅塊上邊線
  var b1=oDiv.offsetTop+oDiv.offsetHeight;//紅塊下邊線
  
  var l2=oDiv2.offsetLeft;//黃塊左邊線
  var r2=oDiv2.offsetLeft+oDiv2.offsetWidth;//黃塊右邊線
  var t2=oDiv2.offsetTop;//黃塊上邊線
  var b2=oDiv2.offsetTop+oDiv2.offsetHeight;//黃塊下邊線
  
  if(r1<l2 || l1>r2 || b1<t2 || t1>b2)
  {
  oDiv2.style.background='yellow';
  }
  else
  {
  oDiv2.style.background='green';
  }
 };
 
 document.οnmοuseup=function ()
 {
  document.οnmοusemοve=null;
  document.οnmοuseup=null;
 };
 };
};
</script>
</head>
 
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

碰撞檢測(cè)原理圖如上：

我們檢測(cè)碰撞時(shí)，發(fā)現(xiàn)兩個(gè)div碰上檢測(cè)比沒碰上的檢測(cè)要難，所以以沒碰上作為檢測(cè)條件。畫上九宮格，當(dāng)紅色div在黃色div左邊線或是右邊線或是上邊線或是下邊線外時(shí)是永遠(yuǎn)不可能碰上的，只要這四個(gè)條件都不滿足，意味著兩個(gè)div相撞了，將黃塊變綠。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript基于定時(shí)器實(shí)現(xiàn)進(jìn)度條功能實(shí)例
這篇文章主要介紹了javascript基于定時(shí)器實(shí)現(xiàn)進(jìn)度條功能,簡(jiǎn)單分析了javascript定時(shí)器的功能、使用方法并給出了基于定時(shí)器實(shí)現(xiàn)的進(jìn)度條功能實(shí)例,需要的朋友可以參考下
2017-10-10
JS倒計(jì)時(shí)實(shí)例_天時(shí)分秒
下面小編就為大家?guī)硪黄狫S倒計(jì)時(shí)實(shí)例_天時(shí)分秒。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
javaScript強(qiáng)制保留兩位小數(shù)的輸入數(shù)校驗(yàn)和小數(shù)保留問題
這篇文章主要介紹了javaScript強(qiáng)制保留兩位小數(shù)的輸入數(shù)校驗(yàn)和小數(shù)保留問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
基于JavaScript概括瀏覽器方向的優(yōu)化
這篇文章主要介紹了JavaScript瀏覽器方向的優(yōu)化，文章圍繞主題展開詳細(xì)的內(nèi)容介紹具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-05-05
JavaScript處理變量命名的參數(shù)對(duì)象
這篇文章主要介紹了JavaScript處理變量命名的參數(shù)對(duì)象，在開發(fā)過程中，遇到一個(gè)給對(duì)象賦值的問題，參數(shù)是通過循環(huán)變量的方式進(jìn)行處理，接下來詳細(xì)介紹需要的小伙伴可以參考一下
2022-06-06
javascript實(shí)現(xiàn)一個(gè)數(shù)值加法函數(shù)
這篇文章主要介紹了javascript實(shí)現(xiàn)一個(gè)數(shù)值加法函數(shù)，十分的簡(jiǎn)單實(shí)用，方便大家理解javascript，有需要的小伙伴可以參考下。
2015-06-06
詳解微信小程序的 request 封裝示例
這篇文章主要介紹了詳解微信小程序的 request 封裝示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
這篇文章主要介紹了JS實(shí)現(xiàn)的5級(jí)聯(lián)動(dòng)Select下拉選擇框,涉及javascript數(shù)組調(diào)用及遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08