碰撞檢測比較常用的是以下兩種方法：
- 外接矩形判定法
- 外接圓判定法
## 外接矩形判定法
外接矩形判定法，指的是如果檢測物體是一個矩形或者近似矩形，就可以把這個物體抽象成一個矩形，然后用判斷兩個矩形是否碰撞的方法進行檢測。
對于外接矩形判定法，一般需要兩個步驟，即找出物體的外接矩形；對外接矩形進行碰撞檢測。
想要找出物體的外接矩形，即選擇一個物體，在它周圍畫一個矩形。矩形的上邊穿過物體最頂端的那個像素，下邊穿過物體最底端的那個像素，左右同理。
顯然使用外接矩形判定法是有一定誤差的，不過其可以大大減少計算的復雜度。
判斷兩個矩形是否發生碰撞，只需要判斷：**兩個矩形左上角的坐標所處的范圍**。如果兩個矩形左上角的坐標滿足一定條件，則兩個矩形就發生了碰撞。
偽代碼：
```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
}
}
```
## 多物體碰撞
