Part11-边界检测 · 前端小册

[TOC] 所谓边界检测简单来说就是给运动物体限定一个范围，从而实现某些动画效果。在 Canvas 中，大部分情况下都会把物体运动范围设置为整个画布，有时候也可以是画布的一部分。 ![](https://img.kancloud.cn/69/39/693944651ec599a9d8d131f6eef2a27a_420x396.png =200x) 如上图，假设有一个小球，其中心坐标为（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) { // 小球 "完全超出" 下边界时 } ``` 注意这里的 “完全超出” 的含义，当小球完全超出边界时，此时小球在画布外面，如下图所示： ![](https://img.kancloud.cn/03/a0/03a0bc09fa9e1b227f0dba71ea619749_413x414.png =200x) ## 边界生成边界生成，指的是物体完全超出边界后，在最开始的位置重新生成。这种技巧可用于创建喷泉及各种粒子特效。例如在喷泉效果中，水滴不断地飞溅出来，飞出边界后又重新加入到水流的源头。这样物体的数量就是固定不变的，不用担心因物体数量过多而影响浏览器性能。语法： ```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> ``` ![](https://img.kancloud.cn/fc/dd/fcdd748232b6ee72dd4412267c7778fc_641x405.gif =300x) ## 边界反弹边界反弹，指的是物体触碰到边界之后就会反弹回来。伪代码如下： ```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> ``` ![](https://img.kancloud.cn/73/22/7322bc416d417c345a208efcc53a817f_641x405.gif =300x) 可以看到，对于多物体运动，一般情况下都是采取以下三个步骤进行处理： 1. 定义一个数组来存放多个物体 2. 使用 for 循环生成单个物体，然后添加到数组中 3. 在动画循环中，使用 forEach() 方法遍历数组，从而处理单个物体