【H5/JS】遊戲常用演算法-碰撞檢測-包圍盒檢測演算法(2)-矩形
矩形包圍盒，顧名思義，就是使用一個矩形來包圍住影象，矩形的大小以剛好包圍住影象為最佳，這種包圍盒最適用的場景是剛好物體的形狀接近於矩形。
在具體的應用中，描述矩形包圍盒的的常用方式有以下兩種，
一：採用最小最大頂點法描述AABB包圍盒
上圖中使用了最小最大頂點法來描述包圍盒資訊，由於是在螢幕座標系中，y軸是向下延伸的，所以只需要保留矩形中座標的最小值和最大值即可，即矩形的左上角和右下角的頂點，其他的點都在這兩個點範圍內。
在這種情況下要判斷兩個矩形是否碰撞只需要比較兩個矩形頂點的座標即可，假設矩形 A用(x1, y1)表示左上角，(x2, y2)表示右下角，矩形B用(x3, y3)表示左上角，(x4, y4)表示右下角，則滿足下列條件則表示沒有碰撞，反之則碰撞。
• 沒碰撞：x1>x4 或者x2<x3。
• 沒碰撞：y1>y4 或者y2<y3。
關鍵程式碼如下：
DEMO程式碼：function hitTest(source, target) { /* 源物體和目標物體都包含 x, y 以及 width, height */ return !( ( ( source.y + source.r ) < ( target.y ) ) || ( source.y > ( target.y + target.r ) ) || ( ( source.x + source.r ) < target.x ) || ( source.x > ( target.x + target.r ) ) ); }
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta charset="UTF-8"> <title>盒包圍碰撞演算法-矩形</title> <style> #stage { border: 1px solid lightgray; } </style> </head> <body> <h1>是否碰撞：<span class="hitTest">否</span></h1> <canvas id="stage"></canvas> </body> <script> window.onload = function () { var stage = document.querySelector('#stage'), ctx = stage.getContext('2d'); stage.width = 400; stage.height = 400; //柵格線條 function drawGrid(context, color, stepx, stepy) { context.strokeStyle = color; context.lineWidth = 0.5; for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) { context.beginPath(); context.moveTo(i, 0); context.lineTo(i, context.canvas.height); context.stroke(); } for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) { context.beginPath(); context.moveTo(0, i); context.lineTo(context.canvas.width, i); context.stroke(); } } var rect = { x: stage.width / 2 - 20, y: stage.height / 2 - 20, r: 40, c: "red" }, rects = [];; rects.push(rect); for (var i = 0; i < 10; i++) { var trace = { x: 40 * i, y: 40 * i, r: 40, c: "blue" }; rects.push(trace); } function createRect(x, y, r, c) { ctx.beginPath(); ctx.fillStyle = c; ctx.rect(x, y, r, r); ctx.fill(); } document.onkeydown = function (event) { var e = event || window.event || arguments.callee.caller.arguments[0]; //根據地圖陣列碰撞將測 switch (e.keyCode) { case 37: console.log("Left"); if (rects[0].x > 0) { rects[0].x -= 2; } break; case 38: console.log("Top"); if (rects[0].y > 0) { rects[0].y -= 2; } break; case 39: console.log("Right"); if (rects[0].x < stage.width) { rects[0].x += 2; } break; case 40: console.log("Bottom"); if (rects[0].y < stage.height) { rects[0].y += 2; } break; default: return false; } }; stage.addEventListener('click', function (event) { var x = event.clientX - stage.getBoundingClientRect().left; var y = event.clientY - stage.getBoundingClientRect().top; rects[0].x = x - rects[0].r/2; rects[0].y = y - rects[0].r/2; }); function hitTest(source, target) { /* 源物體和目標物體都包含 x, y 以及 width, height */ return !( ( ( source.y + source.r ) < ( target.y ) ) || ( source.y > ( target.y + target.r ) ) || ( ( source.x + source.r ) < target.x ) || ( source.x > ( target.x + target.r ) ) ); } function update() { ctx.globalAlpha = 1; ctx.clearRect(0, 0, 400, 400); drawGrid(ctx, 'lightgray', 40, 40); document.querySelector('.hitTest').innerHTML = "否"; for (var i = 1, len = rects.length; i < len; i++) { createRect(rects[i].x, rects[i].y, rects[i].r, rects[i].c); var flag = hitTest(rects[0], rects[i]); if (flag) { document.querySelector('.hitTest').innerHTML = "是"; ctx.globalAlpha = 0.5; } } createRect(rects[0].x, rects[0].y, rects[0].r, rects[0].c); requestAnimationFrame(update); } update(); }; </script> </html>
二：採用點和半徑描述AABB包圍盒
在上圖中使用了中心點和對應兩個軸的半徑來描述包圍盒資訊，假設有兩個矩形A和B，矩形A 的中心座標為A(x1, y1)，寬度和高度分別為rx1、ry1，矩形B 的中心座標為B(x2, y2)，寬度和高度分別為rx1、ry1，矩形B 的中心座標為B(x2, y2)，寬度和高度分別是rx2、ry2，則採用這種包圍盒檢測方式如下。
如果滿足兩個矩形在x方向的距離小於兩個矩形寬度和的一半，並且在y方向上的距離小於兩個矩形高度和的一半則表示兩個矩形有重疊，即表示發生碰撞，換成公式如下：
X方向滿足：|x2-x1|<=rx1+rx2並且Y方向滿足：|y2-y1|<=ry1+ry2
當然，也可以把這種形式換算成第一種形式演算，這兩種方式很顯然第一種的效率比較高效一點，畢竟第二種演算法需要使用
Math.abs獲取絕對值，第一種只是單純使用了座標比較。
以上所描述的矩形包圍盒也稱為 AABB（軸對齊）包圍盒，軸對齊包圍盒中的矩形的四條邊分別和座標軸平行，實際上也就是表示該矩形沒有進行過旋轉操作，使用軸對齊包圍盒檢測演算法比較簡單高效，精度上也能滿足大多數條件，因此實際應用中也比較多。
有興趣的可以搜尋下OBB（定向接線）包圍盒。
線上預覽地址：https://github.com/krapnikkk/JS-gameMathematics