任意角度的矩形与圆形的碰撞检测

最新推荐文章于 2024-03-09 23:17:06 发布

寒城秦

最新推荐文章于 2024-03-09 23:17:06 发布

阅读量4k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 矩形圆形碰撞算法

本文链接：https://blog.youkuaiyun.com/qhc459276/article/details/51252739

本文介绍了一种用于游戏开发的矩形与圆形碰撞检测算法，包括无旋转角度的矩形与圆形碰撞检测方法及任意角度下的碰撞检测实现。通过转换坐标系，使倾斜的矩形变为水平状态，便于计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

任意角度的矩形与圆形的碰撞检测（js）

下面介绍的是无旋转角度的矩形与圆形的碰撞检测：

函数ComputeCollision，当相对距离小于圆形半径的时候为碰撞。
参数介绍(w：矩形的宽，h：矩形的高，r：圆形半径，rx：圆形中心与矩形中心相对坐标X，ry：圆形中心与矩形中心相对坐标Y）

function ComputeCollision(w, h, r, rx, ry) {
    var dx = Math.min(rx, w * 0.5);
    var dx1 = Math.max(dx, -w * 0.5);
    var dy = Math.min(ry, h * 0.5);
    var dy1 = Math.max(dy, -h * 0.5);
    return (dx1 - rx) * (dx1 - rx) + (dy1 - ry) *         (dy1 - ry) <= r * r;
}
此代码转载自：http://www.cnblogs.com/kuikui/archive/2012/07/01/2572288.html

此方法仅适用于上图无角度矩形

当遇到上图这种情况

我们需要把它转换成能够使用ComputeCollision方法的模型，如上图：

原理：让圆与矩形同时绕着矩形的中心进行旋转，旋转角度为矩形的倾斜角度，然后重新计算rx，ry，（rot是两个中心与X轴的角度，不是矩形的旋转角度）

完整算法代码如下（原创，亲测过）

矩形中心坐标x1,y1 圆形圆心坐标x2,y2 ,rotation 矩形的旋转角度（已知条件）
function ComputeCollision(w, h, r, newrx, newry) {
      var dx = Math.min(rx, w * 0.5);
      var dx1 = Math.max(dx, -w * 0.5);
      var dy = Math.min(ry, h * 0.5);
      var dy1 = Math.max(dy, -h * 0.5);
      return (dx1 - rx) * (dx1 - rx) + (dy1 - ry) * (dy1 - ry) <= r * r;
}
functuin getNewRx_Ry(){
    var json = {};
    var distance = twoDistance(x1,y1,x2,y2); 
    //计算最新角度（与X轴的角度），同数学X Y轴
    var newRotation = rot(x1,y1,x2,y2) - rotation;
    var newRx = Math.cos(newrot/180*Math.PI) * distance;
    var newRy = Math.sin(newrot/180*Math.PI) * distance;
    json.newRx = newRx ;
    json.newRy = newRy ;
    return json;
}

function twoDistance(X1,Y1,X2,Y2) {
    return Math.pow((Math.pow((X1 - X2), 2) + Math.pow((Y1 - Y2), 2)), 0.5);
}

function rot(x1,y1,x2,y2){
    var value = (y1-y2)/(x1-x2);
    return Math.atan(value)*180/Math.PI;
}

///使用
var json = getNewRx_Ry();
var boool = ComputeCollision(w, h, r, json.newRx, json.newRy);

if(boool){console.log('boom')}