[TOC]
所谓边界检测简单来说就是给运动物体限定一个范围，从而实现某些动画效果。在 Canvas 中，大部分情况下都会把物体运动范围设置为整个画布，有时候也可以是画布的一部分。
如上图，假设有一个小球，其中心坐标为（x，y），那么此时的边界检测代码为：
```js
if (ball.x < ball.radius) {
// "碰到" 左边界时做什么
} else if (ball.x > cnv.width - ball.radius) {
// "碰到" 右边界时做什么
} else if (ball.y < ball.radius) {
// "碰到" 上边界时做什么
} else if (ball.y > cnv.height - ball.radius) {
// "碰到" 下边界时做什么
}
```
接下来从以下四个方向介绍边界检测
- 边界限制
- 边界生成
- 边界环绕
- 边界反弹
## 边界限制
边界限制指的是通过边界检测的办法来限制物体的运动范围，使其无法超出这个运动范围，而只在限制的范围内运动。
```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>
<script>
window.onload = function () {
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
let ball = new Ball(cnv.width / 2, cnv.height / 2)
ball.fill(cxt)
let key = tools.getKey()
// 添加键盘事件
window.addEventListener('keydown', function (e) {
cxt.clearRect(0, 0, cnv.width, cnv.height)
// 根据 key.direction 的值，判断物体移动方向
switch (key.direction) {
case 'up':
ball.y -= 3
checkBorder()
ball.fill(cxt)
break
case 'down':
ball.y += 3
checkBorder()
ball.fill(cxt)
break
case 'left':
ball.x -= 3
checkBorder()
ball.fill(cxt)
break
case 'right':
ball.x += 3
checkBorder()
ball.fill(cxt)
break
default:
checkBorder()
ball.fill(cxt)
}
}, false)
// 定义边界检测函数
function checkBorder () {
if (ball.x < ball.radius) {
// "碰到" 左边界时做什么
ball.x = ball.radius
} else if (ball.x > cnv.width - ball.radius) {
// "碰到" 右边界时做什么
ball.x = cnv.width - ball.radius
} else if (ball.y < ball.radius) {
// "碰到" 上边界时做什么
ball.y = ball.radius
} else if (ball.y > cnv.height - ball.radius) {
// "碰到" 下边界时做什么
ball.y = cnv.height - ball.radius
}
}
}
</script>
</body>
</html>
```
## 边界环绕
边界环绕指的是当物体从一个边界消失后，它就会从对立的边界重新出现，从而形成一种环绕效果。
语法：
```js
if (ball.x < -ball.radius) {
// 小球 "完全超出" 左边界时
} else if (ball.x > cnv.width + ball.radius) {
// 小球 "完全超出" 右边界时
} else if (ball.y < -ball.radius) {
// 小球 "完全超出" 上边界时
} else if (ball.y > cnv.height + ball.raidus) {
// 小球 "完全超出" 下边界时
}
```
注意这里的 “完全超出” 的含义，当小球完全超出边界时，此时小球在画布外面，如下图所示：
## 边界生成
边界生成，指的是物体完全超出边界后，在最开始的位置重新生成。这种技巧可用于创建喷泉及各种粒子特效。例如在喷泉效果中，水滴不断地飞溅出来，飞出边界后又重新加入到水流的源头。这样物体的数量就是固定不变的，不用担心因物体数量过多而影响浏览器性能。
语法：
```js
if (ball.x < -ball.radius ||
ball.x > cnv.width + ball.radius ||
ball.y < -ball.radius ||
ball.y > cnv.height + ball.radius
// ...
)
```
注意这里用的是 "或" 运算。
```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>
<script>
window.onload = function () {
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
// 定义一个用来存放小球的数组 balls
let balls = []
// n 表示小球数量
let n = 50
// 生成 n 个小球，其中小球的 color、vx、vy 都是随机值
for (let i = 0; i < n; i++) {
// 球心坐标为 Canvas 中心，color 为随机颜色值
let ball = new Ball(cnv.width / 2, cnv.height / 2, 5, tools.getRandomColor())
// ball.vx 和 ball.vy 取值都是 -1 ~ 1 之间的任意数
ball.vx = Math.random() * 2 - 1
ball.vy = Math.random() * 2 - 1
balls.push(ball)
};
(function frame () {
window.requestAnimationFrame(frame)
cxt.clearRect(0, 0, cnv.width, cnv.height)
balls.forEach(function (ball) {
// 边界检测
if (ball.x < -ball.radius ||
ball.x > cnv.width + ball.radius ||
ball.y < -ball.radius ||
ball.y > cnv.height + ball.radius
) {
ball.x = cnv.width / 2
ball.y = cnv.height / 2
ball.vx = Math.random() * 2 - 1
ball.vy = Math.random() * 2 - 1
}
ball.fill(cxt)
ball.x += ball.vx
ball.y += ball.vy
})
})()
}
</script>
</body>
</html>
```
## 边界反弹
边界反弹，指的是物体触碰到边界之后就会反弹回来。伪代码如下：
```js
if (ball.x < ball.radius) {
// 碰到左边界
ball.x = ball.radius
vx = -vx
} else if (ball.x > canvas.width - ball.radius) {
// 碰到右边界
ball.x = canvas.width - ball.radius
vx = -vx
} else if (ball.y < ball.radius) {
// 碰到上边界
ball.y = ball.radius
vy = -vy
} else if (ball.y > canvas.height - ball.radius) {
ball.y = canvas.height - ball.radius
vy = -vy
}
```
下面是一个多球反弹的效果：
```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>
<script>
window.onload = function () {
let cnv = document.getElementById('canvas')
let cxt = cnv.getContext('2d')
// 定义一个用来存放小球的数组 balls
const balls = []
const n = 10 // 小球数量
// 生成 n 个小球，其中小球的 color、vx、vy 都是随机值
for (let i = 0; i < n; i++) {
let ball = new Ball(cnv.width / 2, cnv.height / 2, 8, tools.getRandomColor())
ball.vx = (Math.random() * 2 - 1) * 3
ball.vy = (Math.random() * 2 - 1) * 3
balls.push(ball)
};
(function frame () {
window.requestAnimationFrame(frame)
cxt.clearRect(0, 0, cnv.width, cnv.height)
balls.forEach(function (ball) {
ball.x += ball.vx
ball.y += ball.vy
if (ball.x < ball.radius) {
// 碰到左边界
ball.x = ball.radius
ball.vx = -ball.vx
} else if (ball.x > canvas.width - ball.radius) {
// 碰到右边界
ball.x = canvas.width - ball.radius
ball.vx = -ball.vx
} else if (ball.y < ball.radius) {
// 碰到上边界
ball.y = ball.radius
ball.vy = -ball.vy
} else if (ball.y > canvas.height - ball.radius) {
ball.y = canvas.height - ball.radius
ball.vy = -ball.vy
}
ball.fill(cxt)
})
})()
}
</script>
</body>
</html>
```
可以看到，对于多物体运动，一般情况下都是采取以下三个步骤进行处理：
1. 定义一个数组来存放多个物体
2. 使用 for 循环生成单个物体，然后添加到数组中
3. 在动画循环中，使用 forEach() 方法遍历数组，从而处理单个物体
