溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS/HTML5游戲常用算法之碰撞檢測 包圍盒檢測算法。分享給大家供大家參考，具體如下：
矩形包圍盒，顧名思義，就是使用一個矩形來包圍住圖像，矩形的大小以剛好包圍住圖像為最佳，這種包圍盒最適用的場景是剛好物體的形狀接近于矩形。
在具體的應用中，描述矩形包圍盒的的常用方式有以下兩種，
一：采用最小最大頂點法描述AABB包圍盒
上圖中使用了最小最大頂點法來描述包圍盒信息，由于是在屏幕坐標系中，y軸是向下延伸的，所以只需要保留矩形中坐標的最小值和最大值即可，即矩形的左上角和右下角的頂點，其他的點都在這兩個點范圍內。
在這種情況下要判斷兩個矩形是否碰撞只需要比較兩個矩形頂點的坐標即可，假設矩形 A用(x1, y1)表示左上角，(x2, y2)表示右下角，矩形B用(x3, y3)表示左上角，(x4, y4)表示右下角，則滿足下列條件則表示沒有碰撞，反之則碰撞。
關鍵代碼如下：
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 ) )
);
}
DEMO代碼：
<!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>
<h2>是否碰撞：<span class="hitTest">否</span></h2>
<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>
這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果如下：
二：采用點和半徑描述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（定向接線）包圍盒。
github地址：https://github.com/krapnikkk/JS-gameMathematics
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript數組操作技巧總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
