本文实例讲述了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>
|