基於javascript實現碰撞檢測
阿新 • • 發佈：2020-03-14
本文例項為大家分享了javascript實現碰撞檢測的具體程式碼，供大家參考，具體內容如下
<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>無標題文件</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>
碰撞檢測原理圖如上：
我們檢測碰撞時，發現兩個div碰上檢測比沒碰上的檢測要難，所以以沒碰上作為檢測條件。畫上九宮格，當紅色div在黃色div左邊線或是右邊線或是上邊線或是下邊線外時是永遠不可能碰上的，只要這四個條件都不滿足，意味著兩個div相撞了，將黃塊變綠。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。