一切的碰撞都是通過網頁中x,y坐標來計算的，判斷兩個矩形是否發生碰撞，就是判斷它們是否有重合部分。理論上是這樣，但是實際上我們應該考慮什么時候不重合，因為這種逆向思維會簡單很多，如果一味考慮什么時候重合，一般人很難理得清楚。所以我們先理清楚不重合的情況，那么反過來就是重合的情況了。
不重合的情況：
1.移動矩形在靜止矩形的上方
2.移動矩形在靜止矩形的下方
3.移動矩形在靜止矩形的左邊
4.移動矩形在靜止矩形的右邊
假如移動的矩形編號為1，靜止的矩形編號為2；那么碰撞檢測的JavaScript寫法為：
-
var div1=document.getElementById("div1"),
-
left_1=div1.offsetLeft,
-
top_1=div1.offsetTop,
-
width_1=div1.offsetWidth,
-
height_1=div1.offsetHeight;
-
-
var div2=document.getElementById("div2"),
-
left_2=div2.offsetLeft,
-
top_2=div2.offsetTop,
-
width_2=div2.offsetWidth,
-
height_2=div2.offsetHeight;
-
-
var noConflict=left_1>left_2+width_2||left_1+width_1<left_2||top_1+height_1>top_2||top_1<top_2-height_2;
-
if(!noConflict){
-
//碰撞了，我要做點什么，比如說爆個炸啥的。
-
}
再說說圓形碰撞原理。
圓形因為沒有了邊角所以不能用矩形的碰撞原理，但可以通過及計算兩個圓的中心距離與兩個圓的半徑之和的大小來判斷是否有相交，如果有相交則碰撞了。看起來比矩形的還簡單些，不過涉及到直角三角形的求邊公式，小學數學知識派上用場了~
-
var div1=document.getElementById("div1"),
-
left_1=div1.offsetLeft,
-
top_1=div1.offsetTop,
-
width_1=div1.offsetWidth,
-
height_1=div1.offsetHeight,
-
point_x_1=left_1+width_1/2,
-
point_y_1=top_1+height_1/2;
-
-
var div2=document.getElementById("div2"),
-
left_2=div2.offsetLeft,
-
top_2=div2.offsetTop,
-
width_2=div2.offsetWidth,
-
height_2=div2.offsetHeight,
-
point_x_2=left_2+width_2/2,
-
point_y_2=top_2+height_2/2;
-
-
var distant= Math.sqrt(Math.pow(Math.abs(point_x_1-point_x_2),2)+Math.pow(Math.abs(point_y_1-point_y_2),2));
-
if(distant<width_1/2+width_2/2){
-
//碰撞了，我要做點什么，比如說爆個炸啥的。
-
}