Question

我正在尝试使用带有javascript的HTML5画布开发游戏，我在检测碰撞时遇到问题，而无需使用两个对象的（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)

我试过它并用其他代码开发它并且它可以工作，它可以检测到碰撞。但我遇到了碰撞问题，它适用于left side中的条件，但当object1转到object2的top, bottom or right时，它会返回到object2的left side }。换句话说，如果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;
        }
    }
}

Answer 1

这个碰撞函数会告诉你rect2的哪一侧与rect1碰撞：

当然，rect1的另一面与rect2相撞。

此功能是2次通过测试：

测试1：检查2个矩形的中心是否足够接近碰撞
测试2：如果是，请检查交叉点深度以确定哪一侧最容易发生碰撞。

碰撞功能

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>

function listViewFilter(){ // test

  var DateFiltered = containerdata.filter(function (obj){ // remove dates of 010
    return !/010/.test(obj.EventDate); 
  });

  var NameFiltered = [];

  for (var i = 0; i < DateFiltered.length; i++){  // remove EventNames.Name if empty string
    if (DateFiltered[i].EventNames[0].Name == "") continue;
    else NameFiltered.push(DateFiltered[i]);
  }

  Filtered = NameFiltered;
}

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

1 个答案: