碰撞检测在游戏开发、计算机图形学等领域至关重要，以下是一些常见的碰撞检测算法：
基于包围盒的算法
轴对齐包围盒（AABB）算法
- 原理： 用一个与坐标轴对齐的矩形（二维）或长方体（三维）包围物体，通过比较两个物体的 AABB 的坐标范围来判断是否相交。例如，在二维平面中，对于两个矩形 A 和 B，若 A 的 x 轴坐标范围与 B 的 x 轴坐标范围有重叠，且 A 的 y 轴坐标范围与 B 的 y 轴坐标范围也有重叠，则两个矩形相交。
- 优点： 计算简单、速度快，易于实现。
- 缺点： 对非矩形或不规则形状物体的包围精度较低，可能会出现误判。
定向包围盒（OBB）算法
- 原理： 用一个可以任意旋转的矩形（二维）或长方体（三维）来包围物体，考虑了物体的方向。通过计算两个 OBB 之间的分离轴，如果在所有可能的分离轴上都不存在分离，则两个 OBB 相交。
- 优点： 对物体的包围更紧密，检测精度比 AABB 高，能更好地处理旋转物体的碰撞。
- 缺点： 计算复杂度较高，需要更多的计算资源和时间。
基于几何形状的算法
多边形碰撞检测算法
- 原理： 将物体表示为多边形，通过判断两个多边形的边和顶点之间的关系来检测碰撞。如分离轴定理，检查是否存在一个轴，使得两个多边形在该轴上的投影不重叠，若不存在这样的轴，则两个多边形相交。还有扫描线算法，通过扫描多边形的边，判断扫描线与多边形的交点情况来确定是否相交。
- 优点： 能精确处理多边形形状物体的碰撞，适用于复杂形状的物体。
- 缺点： 计算量较大，尤其是对于大量多边形的情况，效率可能较低。
圆形碰撞检测算法
- 原理： 对于二维空间中的圆形物体，通过计算两个圆心之间的距离与两圆半径之和的关系来判断是否碰撞。若圆心距小于等于两圆半径之和，则两圆相交。在三维空间中，球体的碰撞检测原理类似，通过比较球心距离和半径和来判断。
- 优点： 计算相对简单，对于圆形或近似圆形的物体检测效果好。
- 缺点： 对于非圆形物体，需要进行近似处理，可能会影响精度。
基于空间分割的算法
四叉树算法（二维）/ 八叉树算法（三维）
- 原理： 将游戏场景在二维空间中划分为四个子区域（四叉树），或在三维空间中划分为八个子区域（八叉树），递归地对每个子区域进行划分，直到每个子区域内的物体数量满足一定条件。在检测碰撞时，先判断物体所在的子区域，只对可能相交的子区域内的物体进行详细的碰撞检测。
- 优点： 可以快速排除大量不可能发生碰撞的物体对，提高检测效率，尤其适用于大规模场景和大量物体的情况。
- 缺点： 构建和维护四叉树或八叉树需要一定的开销，对于动态场景，物体移动可能导致树结构频繁更新。
BSP 树算法
- 原理： 将空间用平面（二维中为直线）分割成两个半空间，递归地对每个半空间进行分割，形成二叉树结构。每个节点代表一个空间区域，通过遍历 BSP 树，判断物体所在的空间区域，来确定可能发生碰撞的物体对。
- 优点： 能有效地处理复杂的场景空间，对于静态场景的碰撞检测有较高的效率。
- 缺点： 构建 BSP 树较为复杂，对动态场景的适应性较差，空间分割平面的选择对性能影响较大。
碰撞检测的代码示例
1. 矩形（AABB）碰撞检测
<head>
<style>
body {
margin: 0;
overflow: hidden;
}
#rect1,#rect2 {
position: absolute;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="rect1" style="background-color: red;"></div>
<div id="rect2" style="background-color: blue; left: 200px; top: 200px;"></div>
<script>
const rect1 = document.getElementById('rect1');
const rect2 = document.getElementById('rect2');
let rect1X = 100;
let rect1Y = 100;
function updateRect1Position() {
rect1.style.left = rect1X + 'px';
rect1.style.top = rect1Y + 'px';
}
function checkCollision() {
const rect1Rect = rect1.getBoundingClientRect();
const rect2Rect = rect2.getBoundingClientRect();
return (
rect1Rect.left < rect2Rect.right &&
rect1Rect.right > rect2Rect.left &&
rect1Rect.top < rect2Rect.bottom &&
rect1Rect.bottom > rect2Rect.top
);
}
document.addEventListener('keydown', function (event) {
switch (event.key) {
case 'ArrowLeft':
rect1X -= 5;
break;
case 'ArrowRight':
rect1X += 5;
break;
case 'ArrowUp':
rect1Y -= 5;
break;
case 'ArrowDown':
rect1Y += 5;
break;
}
updateRect1Position();
if (checkCollision()) {
console.log('Collision detected!');
} else {
console.log('No collision.');
}
});
updateRect1Position();
</script>
</body>
代码解释：
- HTML 部分： 创建两个 < div> 元素分别代表两个矩形，设置了基本样式，将它们定位为绝对定位。
- JavaScript 部分：
- 通过
document.getElementById获取两个矩形元素。 updateRect1Position函数用于更新第一个矩形的位置。checkCollision函数通过getBoundingClientRect方法获取两个矩形的边界信息，然后根据 AABB 碰撞检测原理判断是否发生碰撞。- 监听键盘事件，根据用户按下的方向键移动第一个矩形，并在每次移动后调用
checkCollision函数进行碰撞检测。
- 通过
2. 圆形碰撞检测
<head>
<style>
body {
margin: 0;
overflow: hidden;
}
#circle1,#circle2 {
position: absolute;
border-radius: 50%;
width: 60px;
height: 60px;
}
</style>
</head>
<body>
<div id="circle1" style="background-color: red;"></div>
<div id="circle2" style="background-color: blue; left: 300px; top: 300px;"></div>
<script>
const circle1 = document.getElementById('circle1');
const circle2 = document.getElementById('circle2');
let circle1X = 100;
let circle1Y = 100;
const circle1Radius = 30;
const circle2Radius = 30;
function updateCircle1Position() {
circle1.style.left = (circle1X - circle1Radius) + 'px';
circle1.style.top = (circle1Y - circle1Radius) + 'px';
}
function checkCollision() {
const circle2Rect = circle2.getBoundingClientRect();
const circle2X = circle2Rect.left + circle2Radius;
const circle2Y = circle2Rect.top + circle2Radius;
const dx = circle1X - circle2X;
const dy = circle1Y - circle2Y;
const distance = Math.sqrt(dx * dx + dy * dy);
return distance <= circle1Radius + circle2Radius;
}
document.addEventListener('keydown', function (event) {
switch (event.key) {
case 'ArrowLeft':
circle1X -= 5;
break;
case 'ArrowRight':
circle1X += 5;
break;
case 'ArrowUp':
circle1Y -= 5;
break;
case 'ArrowDown':
circle1Y += 5;
break;
}
updateCircle1Position();
if (checkCollision()) {
console.log('Collision detected!');
} else {
console.log('No collision.');
}
});
updateCircle1Position();
</script>
</body>
代码解释：
- HTML 部分： 创建两个 < div> 元素分别代表两个圆形，通过设置 border-radius: 50% 将其显示为圆形。
- JavaScript 部分：
- 通过
document.getElementById获取两个圆形元素。 updateCircle1Position函数用于更新第一个圆形的位置。checkCollision函数计算两个圆心之间的距离，根据距离和两个圆半径之和的关系判断是否发生碰撞。- 监听键盘事件，根据用户按下的方向键移动第一个圆形，并在每次移动后调用
checkCollision函数进行碰撞检测。
- 通过
使用游戏开发库来实现碰撞检测
使用 Phaser 库实现
Phaser 是一个功能强大的 HTML5 游戏框架，提供了丰富的游戏开发功能，包括碰撞检测。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 引入 Phaser 库 -->
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
</head>
<body>
<script>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
let player;
let enemy;
function preload() {
// 这里可以预加载游戏资源，示例中使用简单的图形代替
}
function create() {
// 创建玩家对象
player = this.physics.add.rectangle(100, 100, 50, 50, 0xff0000);
player.setCollideWorldBounds(true);
// 创建敌人对象
enemy = this.physics.add.rectangle(300, 300, 50, 50, 0x0000ff);
enemy.setImmovable(true);
// 设置碰撞检测
this.physics.add.collider(player, enemy, collisionHandler, null, this);
}
function update() {
const cursors = this.input.keyboard.createCursorKeys();
if (cursors.left.isDown) {
player.setVelocityX(-200);
} else if (cursors.right.isDown) {
player.setVelocityX(200);
} else {
player.setVelocityX(0);
}
if (cursors.up.isDown) {
player.setVelocityY(-200);
} else if (cursors.down.isDown) {
player.setVelocityY(200);
} else {
player.setVelocityY(0);
}
}
function collisionHandler() {
console.log('Collision detected!');
}
</script>
</body>
</html>
代码解释：
- 配置与初始化： 定义
config对象来配置游戏的基本属性，如类型、宽度、高度和场景。创建Phaser.Game实例来启动游戏。 - 预加载资源：
preload函数用于预加载游戏所需的资源，这里只是预留了位置，使用简单图形代替。 - 创建对象： 在
create函数中，使用this.physics.add.rectangle创建玩家和敌人的矩形对象。设置玩家可碰撞世界边界，敌人为不可移动。 - 碰撞检测设置： 使用
this.physics.add.collider方法设置玩家和敌人之间的碰撞检测，并指定碰撞发生时调用的处理函数collisionHandler。 - 更新逻辑： 在
update函数中，根据键盘输入控制玩家的移动速度。 - 碰撞处理：
collisionHandler函数在碰撞发生时被调用，输出碰撞信息。
使用 Matter.js 库实现
Matter.js 是一个用于创建基于物理的 JavaScript 游戏的引擎，可用于实现复杂的碰撞检测和物理效果。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 引入 Matter.js 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
const Engine = Matter.Engine;
const Render = Matter.Render;
const World = Matter.World;
const Bodies = Matter.Bodies;
const Events = Matter.Events;
// 创建引擎
const engine = Engine.create();
// 创建渲染器
const render = Render.create({
element: document.body,
engine: engine,
canvas: document.getElementById('canvas'),
options: {
width: 800,
height: 600,
wireframes: false
}
});
// 创建物体
const player = Bodies.rectangle(100, 100, 50, 50);
const enemy = Bodies.rectangle(300, 300, 50, 50, { isStatic: true });
// 将物体添加到世界
World.add(engine.world, [player, enemy]);
// 监听碰撞开始事件
Events.on(engine, 'collisionStart', function (event) {
const pairs = event.pairs;
for (let i = 0; i < pairs.length; i++) {
const pair = pairs[i];
if ((pair.bodyA === player && pair.bodyB === enemy) || (pair.bodyA === enemy && pair.bodyB === player)) {
console.log('Collision detected!');
}
}
});
// 运行引擎和渲染器
Engine.run(engine);
Render.run(render);
// 模拟玩家移动
function movePlayer() {
Matter.Body.setPosition(player, {
x: player.position.x + 1,
y: player.position.y
});
}
setInterval(movePlayer, 10);
</script>
</body>
</html>
代码解释：
- 引入库与初始化： 引入
Matter.js库，创建物理引擎和渲染器，配置渲染器的相关参数。 - 创建物体： 使用
Bodies.rectangle创建玩家和敌人的矩形物体，将敌人设置为静态（不可移动），并将它们添加到物理世界中。 - 碰撞监听： 使用
Events.on监听collisionStart事件，当碰撞发生时，遍历碰撞对，判断是否是玩家和敌人之间的碰撞，如果是则输出碰撞信息。 - 运行引擎和渲染器： 调用
Engine.run和Render.run来启动物理模拟和渲染。 - 模拟玩家移动： 定义
movePlayer函数，使用Matter.Body.setPosition方法移动玩家物体，通过setInterval定时调用该函数实现持续移动。
扫一扫
5124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
