本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法。分享给大家供大家参考，具体如下：
检测物体碰撞实际上是需要检测物体是否相交，而实际应用中物体的形状大小各异，如果直接对物体的边缘进行碰撞检测，实际计算过程的代价非常高昂。如果物体的数量太多，比如像网络游戏中，通常少则几千用户，多则上万、几十万用户同时在线，而这些碰撞都要通过服务器检测，这样计算的消耗，即使是大型服务器也会崩溃，所以通常不需要十分精确的碰撞检测情况下，使用包围盒算法，即把物体放在一个多边形中，这个多边形就是包围盒。
基于这样一个概念，通常情况下我们就使用了最简单的几种多边形，比如圆形、矩形等。
先来看看如何使用圆形包围盒算法，圆形包围盒算法就是使用圆形作为包围盒将物体包围起来，检测的时候只需要检测两个圆形是否碰撞即可。检测圆形的碰撞比较容易，假设圆 A 的坐标(x1, y1)，半径是 r1，圆 B 的坐标(x2, y2)，半径是 r2，则如果满足不等式(y2−y1)2+(x2−x1)2≤(r1+r2)2则表示两个圆发生了碰撞，其实就是圆心之间的距离小于两个圆的半径之和即可，由于计算距离需要用到开方运算，效率较低，所以直接比较距离的平方。
关键代码：
function hitTest( source, target ) {
return !(
Math.pow((source.x - target.x),2) + Math.pow((source.y - target.y),2) > Math.pow((source.r + target.r),2)
);
}
完整示例代码：
盒包围碰撞算法-圆形 #stage { border: 1px solid lightgray; } 是否碰撞：否
这里使用在线HTML/CSS/Javascript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行结果如下：
github地址：https://github.com/krapnikkk/JS-gameMathematics
更多关于Javascript相关内容感兴趣的读者可查看本站专题：《Javascript数学运算用法总结》、《Javascript数据结构与算法技巧总结》、《Javascript数组操作技巧总结》、《Javascript排序算法总结》、《Javascript遍历算法与技巧总结》、《Javascript查找算法技巧总结》及《Javascript错误与调试技巧总结》
希望本文所述对大家Javascript程序设计有所帮助。
