html5 canvas 像素 碰撞检测,碰撞检测 · HTML5 Canvas半知半解 · 看云

## 碰撞检测

碰撞检测是物体与物体之间的交互，其实在前面的边界检测也是一种碰撞检测，只不过检测的对象是物体与边界之间。在本章中，我们将介绍更多的碰撞检测，比如：两个物体间的碰撞检测、一个物体与一个点的碰撞检测、基于距离的碰撞检测等等碰撞检测方法。

**什么是碰撞检测呢？**

简单来说，碰撞检测就是判定两个物体是否在同一时间内占用一块空间，用数学的角度来看，就是两个物体有没有交集。

检测碰撞的方法有很多，一般我们使用如下两种：

从几何图形的角度来检测，就是判断一个物体是否与另一个有重叠，我们可以用物体的矩形边界来判断。

检测距离，就是判断两个物体是否足够近到发生碰撞，需要计算距离和判断两个物体是否足够近。

**1、基于几何图形的碰撞检测**

基于几何图形的碰撞检测，一般情况下是检查一个矩形是否与其他矩形相交，或者某一个坐标点是否落在矩形内。

**1.1 两个物体间的碰撞检测(矩形边界检测法)**

在上一章中，我们介绍了一个 getBound() 方法，参数为球对象，返回矩形对象。

```

function getBound(body){

return {

x: (body.x - body.radius),

y: (body.y - body.radius),

width: body.radius * 2,

height: body.radius * 2

};

}

```

现在我们已经知道如何获取物体的矩形边界，那么只需检测两个对象的边界框是否相交，就可以判断两个物体是否碰撞了。我们在 tool.js 工具类中添加一个工具函数 tool.intersects ：

```

tool.intersects = function(bodyA,bodyB){

return !(bodyA.x + bodyA.width < bodyB.x ||

bodyB.x + bodyB.width < bodyA.x ||

bodyA.y + bodyA.height < bodyB.y ||

bodyB.y + bodyB.height < bodyA.y);

};

```

这个函数传入两个矩形对象，如果返回true，表示两个矩形相交了；否则，返回false。(如果你看不明白这段代码，请看下图，让一个矩形分别位于另一个矩形的上下左右位置)：


检测函数已经知道了，当要检测两个物体是否相交时，就可以做如下判断：

```

if (tool.intersects(objectA,objectB)) {

console.log('撞上了');

}

```

注意：这里传入的必须是矩形对象。如果是球，可