JavaScript碰撞检测原理及其实现代码

本文实例为大家分享了Javascript实现碰撞检测原的具体代码，供大家参考，具体内容如下

1.模拟碰撞

简单模拟碰撞过程,用一个可以拖拽的div2去尝试碰撞一个固定的div1(均用绝对定位)

2.碰撞检测原理

如图所示:
使得div分别有4个距离属性( L(left),T(top),R(right),B(bottom) ).
对于div1来说,画出一个九宫格,div2在除中心以为的8个格子任意移动都不会发送碰撞.

也就是说,只要满足条件:oDiv2.div2R小于oDiv1.div1L|| oDiv2.div2L大于oDiv1.div1R || oDiv2.div2B小于oDiv1.div1T|| oDiv2.div2T大于oDiv1.div1B就不会发送碰撞

3.具体测试代码

 
 
 body{margin: 0;padding: 0;}
 #div2{height: 100px;width: 200px;background-color: orange;position: absolute;left: 0px;top:0px;z-index: 1;}
 #div1{height: 100px;width: 100px;background-color: #a6e22e;position: absolute;left: 600px;top:400px;}
 
 
 


 div2
 div1

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。