碰撞检测比较常用的是以下两种方法：
- 外接矩形判定法
- 外接圆判定法
## 外接矩形判定法
外接矩形判定法，指的是如果检测物体是一个矩形或者近似矩形，就可以把这个物体抽象成一个矩形，然后用判断两个矩形是否碰撞的方法进行检测。
对于外接矩形判定法，一般需要两个步骤，即找出物体的外接矩形；对外接矩形进行碰撞检测。
想要找出物体的外接矩形，即选择一个物体，在它周围画一个矩形。矩形的上边穿过物体最顶端的那个像素，下边穿过物体最底端的那个像素，左右同理。
显然使用外接矩形判定法是有一定误差的，不过其可以大大减少计算的复杂度。
判断两个矩形是否发生碰撞，只需要判断：**两个矩形左上角的坐标所处的范围**。如果两个矩形左上角的坐标满足一定条件，则两个矩形就发生了碰撞。
伪代码：
```js
window.tools.checkRect = function (rectA, rectB) {
return !(rectA.x + rectA.width < rectB.x ||
rectB.x + rectB.width < rectA.x ||
rectA.y + rectA.height < rectB.y ||
rectB.y + rectB.height < rectA.y)
}
```
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外接矩形判定法</title>
<script src="./tool.js"></script>
<script src="./ball.js"></script>
</head>
<body>
<canvas id="canvas" width="480" height="300" style="border: 1px solid gray; display: block; margin: 0 auto;"></canvas>
<p id="msg"></p>
<script>
window.onload = function () {
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
let msg = document.getElementById('msg')
// 定义一个位置固定的小球 ballA
let ballA = new Ball(cnv.width / 2, cnv.height / 2, 30)
// 获取 ballA 的外接矩形
let rectA = ballA.getRect()
let mouse = tools.getMouse(cnv);
(function frame () {
window.requestAnimationFrame(frame)
cxt.clearRect(0, 0, cnv.width, cnv.height)
// 绘制 ballA 及它的外接矩形
ballA.fill(cxt)
cxt.strokeRect(rectA.x, rectA.y, rectA.width, rectA.height)
// 定义一个位置不固定的小球 ballB，小球追随鼠标
let ballB = new Ball(mouse.x, mouse.y, 30)
let rectB = ballB.getRect()
ballB.fill(cxt)
cxt.strokeRect(rectB.x, rectB.y, rectB.width, rectB.height)
// 碰撞检测
if (tools.checkRect(rectA, rectB)) {
msg.innerHTML = '撞上了'
} else {
msg.innerHTML = '没撞'
}
})()
}
</script>
</body>
</html>
```
## 外接圆判定法
外接圆判定法，指的是如果检测物体是一个圆或者近似圆，我们可以把这个物体抽象成一个圆，然后用判断两个圆是否碰撞的方法进行检测。
用外界矩形判定法还是外接圆判定法？简单来说，哪个方法误差较小，就用哪个。
判断两个圆是否发生碰撞，只需要判断：**两个圆心的距离**。如果两个圆之间的距离大于或等于两个圆的半径之和，则两个圆没有发生碰撞，反之则发生了碰撞。
伪代码：
```js
window.tools.checkCircle = function (circleA, circleB) {
let dx = circleB.x - circleA.x
let dy = circleB.y - circleA.y
let distance = Math.sqrt(dx * dx, dy * dy)
if (distance < (circleA.radius + circleB.radius)) {
return true
} else {
return false
}
}
```
## 多物体碰撞
