Part12-碰撞检测 · 前端小册

碰撞检测比较常用的是以下两种方法： - 外接矩形判定法 - 外接圆判定法 ## 外接矩形判定法外接矩形判定法，指的是如果检测物体是一个矩形或者近似矩形，就可以把这个物体抽象成一个矩形，然后用判断两个矩形是否碰撞的方法进行检测。对于外接矩形判定法，一般需要两个步骤，即找出物体的外接矩形；对外接矩形进行碰撞检测。想要找出物体的外接矩形，即选择一个物体，在它周围画一个矩形。矩形的上边穿过物体最顶端的那个像素，下边穿过物体最底端的那个像素，左右同理。 ![](https://img.kancloud.cn/f4/66/f4665d8ab55ae1a97ea2acb4f3c2aff7_568x268.png =300x) 显然使用外接矩形判定法是有一定误差的，不过其可以大大减少计算的复杂度。判断两个矩形是否发生碰撞，只需要判断：**两个矩形左上角的坐标所处的范围**。如果两个矩形左上角的坐标满足一定条件，则两个矩形就发生了碰撞。伪代码： ```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 } } ``` ## 多物体碰撞