本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考，具体如下：
一个简单的碰撞检测例子，检测div1是否和div2发生碰撞，当div1碰到div2时，改变div2的颜色，看测试图
看一下分析图：
当div1在div2的上边线(t2)以上的区域活动时，始终碰不上
当div1在div2的右边线(r2)以右的区域活动时,始终碰不上
当div1在div2的下边线(b2)以下的区域活动时,始终碰不上
当div1在div2的左边线(r2)以左的区域活动时,始终碰不上
除了以上四种情况，其他情况表示div1和div2碰上了，下面试完整测试代码
HTML部分：
<div id="div1"></div>
<div id="div2"></div>css部分：
<style>
#div1{
width:100px ;height: 100px;background: green;
position: absolute;
}
#div2{
width:100px ;height: 100px;background: yellow;
position: absolute;left: 300px;top: 200px;z-index: -1;
}
</style>JS部分：
<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>
js常用扩展方法
在日常的开发过程中，经常会碰到javaScript原生对象方法不够用的情况，所以经常会对javaScript原生方法进行扩展。下面就是在实际工作时，经常使用的一些方法，做一下记录，有需要的可以拿去。
js通过方法返回对象的注意点
s通过方法返回一个字面量对象和返回一个提前已经定义好的字面量对象有区别吗？我们先来看看第一种情况，fun1方法返回一个提前没定义的字面量对象，然后通过调用方法返回三个对象
js数组的内置方法
在前端开发中，我们要经常用到js中的数组的内置方法，在控制台中的打印中，我们可以看到数组中的内置方法。Array.concat()该方法可以合并一个或者多个数组，Array.copyWithin() 该方法复制数组内的某些值到到另一个索引位置
php中heredoc与nowdoc的使用方法、定界符<<<的使用方法
Heredoc 结构就象是没有使用双引号的双引号字符串，这就是说在 heredoc 结构中单引号不用被转义。其结构中的变量将被替换，但在 heredoc 结构中含有复杂的变量时要格外小心。其对格式化输出内容时，比较有用 。
Js手动实现call和apply方法
需要考虑传入的thisArg的多种类型,将函数设置成thisArg的属性，来实现this的绑定，调用完成后需要delete该属性,使用eval来实现需要传参给该函数的情况
JS中toFixed()方法的四舍五入问题解决方法
最近发现JS当中toFixed()方法存在一些问题，采用原生的Number对象的原型对象上的toFixed()方法时，规则并不是所谓的四舍五入
前端js常用方法封装
输入一个值，返回其数据类型；数组去重；字符串去重；深拷贝 浅拷贝；reverse底层原理和扩展；圣杯模式的继承；找出字符串中第一次只出现一次的字母;找元素的第n级父元素
js中Element.getBoundingClientRect()方法
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合
JS对象常用方法总结
charAt()返回在指定位置的字符;charCodeAt()返回咋指定位置的字符的Unicode编码;concat()连接字符串;indexOf()检索字符串，返回的是字符在字符串的下标
在一个JS文件中引用另一个JS文件的方法
在调用文件的顶部加入下例代码：document.write；我们可以在某个html中引用了你需要的js文件，我们可以通过拿到那个html文件的对象，然后在通过这个对象去引用js的方法。