碰撞功能不起作用？

Question

所以我试图创建一个函数，通过 x、y 坐标比较两个对象的每个角，以检查是否有任何角重叠（也称为碰撞）。我的所有变量都已定义，我得到没有错误，据我所知没有错。问题是 console.logs 说 "Score" 永远不会熄灭，即使我直接在它们里面。 coordinate.logs 关闭，我没有收到任何错误。有什么想法吗？

function blockCollision(x1, y1, width1, height1, x2, y2, width2, height2) {
    //Object 1

    c1x = x1 //Top Left
    c2x = x1 + width2 //Top Right
    c3x = x1 - height2 //Bottom left
    c4x = x1 - height2 + width2 //Bottom Right

    c1y = y1 //Top Left
    c2y = y1 + width2 //Top Right
    c3y = y1 - height2 //Bottom left
    c4y = y1 - height2 + width2 //Bottom Right
    //Object 2

    c5x = x2 //Top Left
    c6x = x2 + width2 //Top Right
    c7x = x2 - height2 //Bottom left
    c8x = x2 - height2 + width2 //Bottom Right

    c5y = y2 //Top Left
    c6y = y2 + width2 //Top Right
    c7y = y2 - height2 //Bottom left
    c8y = y2 - height2 + width2 //Bottom Right
    if (Math.hypot(c1x-c8x, c1x-c8y) <= 15) {
        console.log ("Score")

    }
    if (Math.hypot(c2x-c7x, c2x-c7y) <= 15) {
        console.log ("Score")

    }
    if (Math.hypot(c3x-c6x, c3x-c6y) <= 15) {
        console.log ("Score")

    }
    if (Math.hypot(c4x-c5x, c4x-c5y) <= 15) {
        console.log ("Score")

    }
    console.log (c1x, c1y)
    console.log (c2x, c2y)
    console.log (c3x, c3y)
    console.log (c4x, c4y)
    console.log (c5x, c5y)
    console.log (c6x, c6y)
    console.log (c7x, c7y)
    console.log (c8x, c8y)


}

（稍后在代码中）

blockCollision(ax, ay, avatar.width, avatar.height, platform1x, platform1y, platform.width, platform.height)

编辑

好的，@Chris G 的第二个代码片段似乎可以满足我的需要。（我不得不稍微调整一下以适应我的情况）

    function blockCollision(x1, y1, width1, height1, x2, y2, width2, height2) {


          var c1x = x1 + width1 / 2, //Finds center
            c2x = x2 + width2 / 2; //Finds center
          var c1y = y1 + height1 / 2, //Finds center
            c2y = y2 + height2 / 2; // Finds center
          // collision coefficients
          var tx = (c1x - c2x) / ((width1 + width2) / 2); //Finds the distance of the two centers
          var ty = (c1y - c2y) / ((height1 + height2) / 2); //Finds the distance of the two centers

          if (tx < -1 || tx > 1 || ty < -1 || ty > 1) return false; //Checks that the overlap is valid
          // tx, ty points to overlap center
          if (y1 < y2 && Math.abs(y2 - y1) > Math.abs(x2 - x1) ) { //Checks that object 1 is above object 2
            console.log("above")
          } else if (y1 > y2) { //Checks that object 1 is below object 2
            console.log("below")
          } else if (x1 > x2) { //Checks that object 1 is to the right of object 2
            console.log("right side") 
          } else if (x1 < x2) { //Checks that object 1 is to the left of object 2
            console.log("left side")
          }

非常感谢大家的帮助，老实说，我认为至少要过一天才会有人回复。你们都是令人难以置信的才华横溢的人 <3

Answer 1

这是一个矩形碰撞函数，基于 (0,0) 为左上角：

function blockCollision(x1, y1, width1, height1, x2, y2, width2, height2) {
  if (x1 + width1 < x2 || x1 > x2 + width2) return false;
  if (y1 + height1 < y2 || y1 > y2 + height2) return false;
  return true;
}

这会检查水平重叠，然后检查垂直重叠。如果两者都找到，则发生碰撞。

这样使用：

if (blockCollision(ax, ay, avatar.width, avatar.height, platform1x, platform1y, platform.width, platform.height))
  console.log("Score");

编辑： 这是 returns 碰撞发生的第二个版本：

function blockCollision(x1, y1, width1, height1, x2, y2, width2, height2) {
  // center coords
  var c1x = x1 + width1 / 2,
    c2x = x2 + width2 / 2;
  var c1y = y1 + height1 / 2,
    c2y = y2 + height2 / 2;
  // collision coefficients
  var tx = (c1x - c2x) / ((width1 + width2) / 2);
  var ty = (c1y - c2y) / ((height1 + height2) / 2);

  if (tx < -1 || tx > 1 || ty < -1 || ty > 1) return false;
  // tx, ty points to overlap center
  return [tx, ty];
}

Fiddle: https://jsfiddle.net/khrismuc/5jaoc4g3/

Answer 2

只需两对坐标即可将矩形定位在表面上。所以需要每个对象的 Left + Right X 和 Top + Bottom Y。 Width1 和 height1 用于获取第一个对象的右侧和底部。类似地，width2 和 height2 用于第二个对象。修改后的代码：

function blockCollision(x1, y1, width1, height1, x2, y2, width2, height2) {
    var c1x, c2x, c3x, c4x;
    var c1y, c2y, c3y, c4y;
    var c5x, c6x, c7x, c8x;
    var c5y, c6y, c7y, c8y;

    //Object 1
    c3x = c1x = x1; //Left X
    c4x = c2x = x1 + width1; //Right X

    c2y = c1y = y1; //Top Y
    c4y = c3y = y1 - height1; //Bottom Y

    //Object 2
    c7x = c5x = x2; //Top X
    c8x = c6x = x2 + width2; //Right X

    c6y = c5y = y2; //Top Y
    c8y = c7y = y2 - height2; //Bottom Y

    if (Math.hypot(c1x-c8x, c1x-c8y) <= 15) {
        console.log ("Score")

    }
    if (Math.hypot(c2x-c7x, c2x-c7y) <= 15) {
        console.log ("Score")

    }
    if (Math.hypot(c3x-c6x, c3x-c6y) <= 15) {
        console.log ("Score")

    }
    if (Math.hypot(c4x-c5x, c4x-c5y) <= 15) {
        console.log ("Score")

    }
    console.log (c1x, c1y)
    console.log (c2x, c2y)
    console.log (c3x, c3y)
    console.log (c4x, c4y)
    console.log (c5x, c5y)
    console.log (c6x, c6y)
    console.log (c7x, c7y)
    console.log (c8x, c8y)
}

碰撞功能不起作用？

Collision function not working?

html

javascript

collision-detection