检测矩形的哪一侧与另一个矩形发生碰撞

Question

检测矩形的哪一侧与另一个矩形发生碰撞

5

我正在尝试使用HTML5画布和JavaScript开发游戏，但是我在没有使用两个对象的（x，y）坐标进行硬编码的情况下检测碰撞时遇到了问题。根据我的研究，我找到了一个常见的算法来检查两个对象是否发生了碰撞，即

Object1 = a moving player
Object2 = fixed (x,y) points. Non movable object

(object1.x < object2.x + object2.width  && object1.x + object1.width  > object2.x &&
    object1.y < object2.y + object2.height && object1.y + object1.height > object2.y)

我尝试了它并与其他代码一起开发，它可以检测到碰撞。但是我在处理碰撞方面遇到了一个问题，在左侧的情况下可以正常工作，但当object1移动到object2的顶部，底部或右侧时，它会返回到object2的左侧。换句话说，如果object1向上/向下或向右移动，则会返回到左侧。非常感谢任何形式的帮助。

function collide(object1, object2){

    //object1 player
    this.x = object1.x;
    this.y = object1.y;
    this.w = object1.w;
    this.h = object1.h;

    //object2 any object 
    this.x2 = object2.x;
    this.y2 = object2.y;
    this.w2 = object2.w;
    this.h2 = object2.h;

    //collisions 
    var isCorrect = false;
    var side = 0;

    if ((this.x < this.x2 + this.w2) && (this.x + this.w > this.x2) 
        && (this.y < this.y2 + this.h2) && (this.h + this.y > this.y2)){
        isCorrect = true;
    }

    if (this.x + this.w > this.x2){
        //left check
        side = 1;
    }else if (this.x < this.x2 + this.w2){
        //right check
        side = 2;
    }else if (this.y + this.h > this.y2){
        //bottom check
        side = 3;
    }else if (this.y < this.y2 + this.h2){
        //top check
        side = 4;
    }

    if (isCorrect){
        if ((this.x + this.w > this.x2) && side == 1){
            playerObj.x -= 5;
        }else if ((this.x < this.x2 + this.w2) && side == 2){
            playerObj.x += 5;
        }else if ((this.y + this.h > this.y2) && side == 3){
            playerObj.y += 5;
        }else if ((this.y < this.y2 + this.h2) && side == 4){
            playerObj.y -= 5;
        }
    }
}

- John Santos

你需要在元素被动画时记录它们的位置，并找出你的条件语句没有捕捉到碰撞的地方。 - nicholaswmin

先生，您是什么意思？ - John Santos

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- markE · Accepted Answer

这个碰撞函数将告诉你矩形2的哪一侧与矩形1发生了碰撞：

当然，矩形1的相反侧也会与矩形2发生碰撞。

这个函数是一个双重测试：

测试1：检查2个矩形的中心是否足够接近以产生碰撞
测试2：如果是，检查交集深度以确定哪一侧在碰撞中最为关键。

碰撞函数

function collide(r1,r2){
    var dx=(r1.x+r1.w/2)-(r2.x+r2.w/2);
    var dy=(r1.y+r1.h/2)-(r2.y+r2.h/2);
    var width=(r1.w+r2.w)/2;
    var height=(r1.h+r2.h)/2;
    var crossWidth=width*dy;
    var crossHeight=height*dx;
    var collision='none';
    //
    if(Math.abs(dx)<=width && Math.abs(dy)<=height){
        if(crossWidth>crossHeight){
            collision=(crossWidth>(-crossHeight))?'bottom':'left';
        }else{
            collision=(crossWidth>-(crossHeight))?'right':'top';
        }
    }
    return(collision);
}

这里有示例代码和演示：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var rects=[];
var rect1={ x:100,y:100,w:85,h:85,fill:'red'}
var rect2={ x:10,y:10,w:40,h:60,fill:'gold'}

$("#canvas").mousemove(function(e){handleMouseMove(e);});

draw();

function collide(r1,r2){
  var dx=(r1.x+r1.w/2)-(r2.x+r2.w/2);
  var dy=(r1.y+r1.h/2)-(r2.y+r2.h/2);
  var width=(r1.w+r2.w)/2;
  var height=(r1.h+r2.h)/2;
  var crossWidth=width*dy;
  var crossHeight=height*dx;
  var collision='none';
  //
  if(Math.abs(dx)<=width && Math.abs(dy)<=height){
    if(crossWidth>crossHeight){
      collision=(crossWidth>(-crossHeight))?'bottom':'left';
    }else{
      collision=(crossWidth>-(crossHeight))?'right':'top';
    }
  }
  return(collision);
}

function draw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.fillStyle=rect1.fill;
  ctx.fillRect(rect1.x,rect1.y,rect1.w,rect1.h);
  ctx.fillStyle=rect2.fill;
  ctx.fillRect(rect2.x,rect2.y,rect2.w,rect2.h);
  var side=collide(rect1,rect2);
  ctx.fillStyle='green'
  if(side=='top'){ ctx.fillRect(rect2.x,rect2.y,rect2.w,3); }
  if(side=='right'){ ctx.fillRect(rect2.x+rect2.w,rect2.y,3,rect2.h); }
  if(side=='bottom'){ ctx.fillRect(rect2.x,rect2.y+rect2.h,rect2.w,3); }
  if(side=='left'){ ctx.fillRect(rect2.x,rect2.y,3,rect2.h); }
}

function handleMouseMove(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  rect2.x=mouseX;
  rect2.y=mouseY;

  draw();

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move the mouse to drag the gold rect<br>Any colliding side of gold rect will highlight</h4>
<canvas id="canvas" width=300 height=300></canvas>