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 } } ``` ## 多物體碰撞