JavaScript画布复杂形状碰撞

基础概念

在JavaScript中，画布（Canvas）是一个HTML元素，允许通过脚本进行图形绘制。复杂形状的碰撞检测是指判断两个或多个非矩形图形是否相交或重叠。常见的复杂形状包括圆形、多边形等。

类型与应用场景

碰撞检测类型

边界框碰撞：使用矩形边界框来近似复杂形状，简单快速但精度较低。
像素级碰撞：检查两个形状的像素是否重叠，精确但计算量大。
几何算法碰撞：如分离轴定理（SAT），适用于凸多边形，精确且效率较高。

应用场景

游戏开发：角色、道具之间的碰撞检测。
交互式图表：数据可视化中的元素交互。
物理模拟：模拟真实世界中的物体运动和碰撞。

示例代码：使用分离轴定理进行多边形碰撞检测

function getAxes(polygon) {
    let axes = [];
    for (let i = 0; i < polygon.length; i++) {
        let p1 = polygon[i];
        let p2 = polygon[(i + 1) % polygon.length];
        let edge = { x: p2.x - p1.x, y: p2.y - p1.y };
        let normal = { x: -edge.y, y: edge.x };
        axes.push(normal);
    }
    return axes;
}

function projectPolygon(axis, polygon) {
    let min = max = null;
    for (let point of polygon) {
        let dotProduct = point.x * axis.x + point.y * axis.y;
        if (min === null || dotProduct < min) min = dotProduct;
        if (max === null || dotProduct > max) max = dotProduct;
    }
    return { min, max };
}

function overlap(proj1, proj2) {
    return !(proj1.max < proj2.min || proj2.max < proj1.min);
}

function checkCollision(poly1, poly2) {
    let axes1 = getAxes(poly1);
    let axes2 = getAxes(poly2);

    for (let axis of axes1.concat(axes2)) {
        let proj1 = projectPolygon(axis, poly1);
        let proj2 = projectPolygon(axis, poly2);
        if (!overlap(proj1, proj2)) return false;
    }
    return true;
}

// 示例多边形
let poly1 = [{x: 0, y: 0}, {x: 10, y: 0}, {x: 10, y: 10}, {x: 0, y: 10}];
let poly2 = [{x: 5, y: 5}, {x: 15, y: 5}, {x: 15, y: 15}, {x: 5, y: 15}];

console.log(checkCollision(poly1, poly2)); // 输出: true 或 false，取决于多边形位置