[英]Detecting collision of rectangle with circle
實際上我試圖在下面的代碼中檢測到矩形與圓形的碰撞: -
function checkCollision() {
//checking of the Collision
if (ry + rh > cy - radius && rx + rw > cx - radius && rx + rw < cx + radius ) {
dy = -dy;
}
}
這也是我的代碼的一部分: -
var rx = 50; //distance from the x-axis of the Rect.
var ry = 50; //distance from the y-axis of the Rect.
var rw = 80; //width of the Rect
var rh = 30; //Height of the Rect.
// Distance to moved of the Rect.
var dx = 2;
var dy = 2;
// Center of the circle from the x-axis and y-axis.
var cx = 105;
var cy = 135;
var radius = 16;
var cx1 = 6;
var cy1 = 6;
任何人都可以幫助我找出問題所在嗎?
檢測圓形碰撞不是微不足道的(但也不是那么復雜)。
@kuroi neko的解決方案是正確的,就像代碼一樣簡單。
幸運的是,您不需要完全理解數學理論來使用命中測試功能。
如果您確實需要有關函數如何工作的更多詳細信息,請使用以下4個步驟來測試圓和矩形是否發生碰撞:
演示: http : //jsfiddle.net/m1erickson/n6U8D/
首先,定義一個圓和一個矩形
var circle={x:100,y:290,r:10};
var rect={x:100,y:100,w:40,h:100};
步驟#1:找到圓的中心和矩形中心之間的垂直和水平(distX / distY)距離
var distX = Math.abs(circle.x - rect.x-rect.w/2);
var distY = Math.abs(circle.y - rect.y-rect.h/2);
步驟2:如果距離大於halfCircle + halfRect,那么它們相距太遠而不會發生碰撞
if (distX > (rect.w/2 + circle.r)) { return false; }
if (distY > (rect.h/2 + circle.r)) { return false; }
步驟3:如果距離小於halfRect,那么它們肯定會發生碰撞
if (distX <= (rect.w/2)) { return true; }
if (distY <= (rect.h/2)) { return true; }
步驟#4:測試直角處的碰撞。
使用畢達哥拉斯公式來比較圓和直中心之間的距離。
var dx=distX-rect.w/2;
var dy=distY-rect.h/2;
return (dx*dx+dy*dy<=(circle.r*circle.r));
下面是完整的代碼:
var circle={x:100,y:290,r:10};
var rect={x:100,y:100,w:40,h:100};
// return true if the rectangle and circle are colliding
function RectCircleColliding(circle,rect){
var distX = Math.abs(circle.x - rect.x-rect.w/2);
var distY = Math.abs(circle.y - rect.y-rect.h/2);
if (distX > (rect.w/2 + circle.r)) { return false; }
if (distY > (rect.h/2 + circle.r)) { return false; }
if (distX <= (rect.w/2)) { return true; }
if (distY <= (rect.h/2)) { return true; }
var dx=distX-rect.w/2;
var dy=distY-rect.h/2;
return (dx*dx+dy*dy<=(circle.r*circle.r));
}
這是一種方法:
1)找到最接近圓心的矩形角
2)看看圓圈相對於角落的位置
該函數采用第三個參數來區分“實心”矩形和簡單輪廓(即,完全位於矩形內的圓的情況是否應視為碰撞)
function collides (rect, circle, collide_inside)
{
// compute a center-to-center vector
var half = { x: rect.w/2, y: rect.h/2 };
var center = {
x: circle.x - (rect.x+half.x),
y: circle.y - (rect.y+half.y)};
// check circle position inside the rectangle quadrant
var side = {
x: Math.abs (center.x) - half.x,
y: Math.abs (center.y) - half.y};
if (side.x > circle.r || side.y > circle.r) // outside
return false;
if (side.x < -circle.r && side.y < -circle.r) // inside
return collide_inside;
if (side.x < 0 || side.y < 0) // intersects side or corner
return true;
// circle is near the corner
return side.x*side.x + side.y*side.y < circle.r*circle.r;
}
var rect = { x:50, y:50, w:80, h:30 };
var circle = { x:105, y:135, r:16 };
if (collides (rect, circle)) { /* bang! */ }
我有第二個函數來計算碰撞法線向量,以允許動畫一個圓形彈跳矩形。 它們共同作為這個小提琴的基礎
function bounces (rect, circle)
{
// compute a center-to-center vector
var half = { x: rect.w/2, y: rect.h/2 };
var center = {
x: circle.x - (rect.x+half.x),
y: circle.y - (rect.y+half.y)};
// check circle position inside the rectangle quadrant
var side = {
x: Math.abs (center.x) - half.x,
y: Math.abs (center.y) - half.y};
if (side.x > circle.r || side.y > circle.r) // outside
return { bounce: false };
if (side.x < -circle.r && side.y < -circle.r) // inside
return { bounce: false };
if (side.x < 0 || side.y < 0) // intersects side or corner
{
var dx = 0, dy = 0;
if (Math.abs (side.x) < circle.r && side.y < 0)
{
dx = center.x*side.x < 0 ? -1 : 1;
}
else if (Math.abs (side.y) < circle.r && side.x < 0)
{
dy = center.y*side.y < 0 ? -1 : 1;
}
return { bounce: true, x:dx, y:dy };
}
// circle is near the corner
bounce = side.x*side.x + side.y*side.y < circle.r*circle.r;
if (!bounce) return { bounce:false }
var norm = Math.sqrt (side.x*side.x+side.y*side.y);
var dx = center.x < 0 ? -1 : 1;
var dy = center.y < 0 ? -1 : 1;
return { bounce:true, x: dx*side.x/norm, y: dy*side.y/norm };
}
我發現我遇到了所選答案的問題。 這是我的,我認為效果很好:
function collisionCheckCircleRect(circle, rect)
{
var distx = Math.abs(circle.x - rect.x);
var disty = Math.abs(circle.y - rect.y);
if (distx > (rect.width/2 + circle.radius)) { return false; }
if (disty > (rect.height/2 + circle.radius)) { return false; }
if (distx <= (rect.width/2)) { return true; }
if (disty <= (rect.height/2)) { return true; }
var hypot = (distx - rect.width/2)*(distx- rect.width/2) +
(disty - rect.height/2)*(disty - rect.height/2);
//console.log(hypot <= (circle.radius*circle.radius))
return (hypot <= (circle.radius*circle.radius));
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.