本文實例講述了JS實現碰撞檢測的方法。分享給大家供大家參考，具體如下：
一個簡單的碰撞檢測例子，檢測div1是否和div2發生碰撞，當div1碰到div2時，改變div2的顏色，看測試圖
看一下分析圖：
當div1在div2的上邊線(t2)以上的區域活動時，始終碰不上
當div1在div2的右邊線(r2)以右的區域活動時,始終碰不上
當div1在div2的下邊線(b2)以下的區域活動時,始終碰不上
當div1在div2的左邊線(r2)以左的區域活動時,始終碰不上
除了以上四種情況，其他情況表示div1和div2碰上了，下面試完整測試代碼
HTML部分：
|
1
2
|
<
div
id
=
"div1"
></
div
>
<
div
id
=
"div2"
></
div
>
|
css部分：
|
1
2
3
4
5
6
7
8
9
10
|
<style>
#div
1
{
width
:
100px
;
height
:
100px
;
background
:
green
;
position
:
absolute
;
}
#div
2
{
width
:
100px
;
height
:
100px
;
background
: yellow;
position
:
absolute
;
left
:
300px
;
top
:
200px
;
z-index
:
-1
;
}
</style>
|
JS部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<script>
window.onload =
function
() {
var
oDiv = document.getElementById(
'div1'
);
var
oDiv2 = document.getElementById(
'div2'
);
var
disX = 0;
var
disY = 0;
oDiv.onmousedown =
function
(ev) {
var
ev = ev|| window.event;
disX = ev.clientX - oDiv.offsetLeft;
disY = ev.clientY - oDiv.offsetTop;
document.onmousemove =
function
(ev) {
var
ev = ev|| window.event;
var
t1 = oDiv.offsetTop;
var
l1 = oDiv.offsetLeft;
var
r1 = oDiv.offsetLeft + oDiv.offsetWidth;
var
b1 = oDiv.offsetTop + oDiv.offsetHeight;
var
t2 = oDiv2.offsetTop;
var
l2 = oDiv2.offsetLeft;
var
r2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
var
b2 = oDiv2.offsetTop + oDiv2.offsetHeight;
if
(b1<t2 || l1>r2 || t1>b2 || r1<l2){
// 表示沒碰上
}
else
{
oDiv2.style.background =
'blue'
;
}
oDiv.style.left = ev.clientX - disX +
'px'
;
oDiv.style.top = ev.clientY - disY +
'px'
;
}
document.onmouseup =
function
() {
document.onmousemove =
null
;
document.onmouseup =
null
;
}
return
false
;
}
}
</script>
|