Fatal编程技术网

Javascript 碰撞功能不工作？

javascript html

Javascript 碰撞功能不工作？,javascript,html,collision-detection,Javascript,Html,Collision Detection,因此，我试图创建一个函数，通过x，y坐标比较两个对象的每个角点，以检查是否有任何角点重叠（也称为碰撞）。我的所有变量都已定义，没有错误，就我所知，没有错误。问题是显示“Score”的console.log永远不会消失，即使我直接在它们里面。coordinate.logs会关闭，我没有收到任何错误。有什么想法吗 function blockCollision(x1, y1, width1, height1, x2, y2, width2, height2) { //Object 1

因此，我试图创建一个函数，通过x，y坐标比较两个对象的每个角点，以检查是否有任何角点重叠（也称为碰撞）。我的所有变量都已定义，没有错误，就我所知，没有错误。问题是显示“Score”的console.log永远不会消失，即使我直接在它们里面。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)


}
编辑

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

功能块冲突（x1、y1、宽度1、高度1、x2、y2、宽度2、高度2）{
变量c1x=x1+width1/2，//找到中心
c2x=x2+width2/2；//找到中心
变量c1y=y1+高度1/2，//找到中心
c2y=y2+高度2/2；//找到中心
//碰撞系数
var tx=（c1x-c2x）/（（宽度1+宽度2）/2）；//查找两个中心的距离
var ty=（c1y-c2y）/（（height1+height2）/2）；//查找两个中心的距离
如果（tx<-1 | | tx>1 | | ty<-1 | | ty>1）返回false；//检查重叠是否有效
//tx、ty点到重叠中心
如果（y1Math.abs（x2-x1））{//检查对象1在对象2之上
控制台日志（“上面”）
}否则，如果（y1>y2）{//检查对象1是否在对象2下方
控制台日志（“下面”）
}否则，如果（x1>x2）{//检查对象1是否在对象2的右侧
控制台日志（“右侧”）
}否则，如果（x1
非常感谢大家的帮助，我真的认为至少一天之后才会有人回应。你们都是不可思议的天才这里有一个矩形碰撞函数，基于（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;
}
编辑： 下面是第二个版本，返回碰撞发生的位置：

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];
}

功能块冲突（x1、y1、宽度1、高度1、x2、y2、宽度2、高度2）{
//中心坐标
变量c1x=x1+宽度1/2，
c2x=x2+2/2宽度；
变量c1y=y1+高度1/2，
c2y=y2+高度2/2；
//碰撞系数
var tx=（c1x-c2x）/（宽度1+宽度2）/2；
变量ty=（c1y-c2y）/（（高度1+高度2）/2）；
如果（tx<-1 | | tx>1 | | ty<-1 | | ty>1）返回false；
//tx、ty点到重叠中心
返回[tx，ty]；
}
Fiddle:

在曲面上定位矩形只需要两对坐标。因此每个对象都需要左+右X和上+下Y。宽度1和高度1用于获取第一个对象的右侧和底侧。同样，宽度2和高度2用于第二个对象。 修改后的代码：

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)
}

功能块冲突（x1、y1、宽度1、高度1、x2、y2、宽度2、高度2）{
变量c1x、c2x、c3x、c4x；
变量c1y、c2y、c3y、c4y；
变量c5x、c6x、c7x、c8x；
变量c5y、c6y、c7y、c8y；
//对象1
c3x=c1x=x1；//左X
c4x=c2x=x1+width1；//右X
c2y=c1y=y1；//顶部Y
c4y=c3y=y1-高度1；//底部Y
//对象2
c7x=c5x=x2；//顶部X
c8x=c6x=x2+width2；//右X
c6y=c5y=y2；//顶部Y
c8y=c7y=y2-高度2；//底部Y

中频（数学形波（c1x-c8x，c1x-c8y）不要使用全局变量。在变量声明之前加上
var
。你确定要进入if语句吗？在外部输入console.log语句并验证数字是否符合你的预期。在代码中从未使用过width1和height1。我注意到的第一件事是，你正在从顶部Y坐标减去高度添加到它。这是故意的吗？在编程中，我们通常使用左上角的原点坐标系，您的游戏引擎是否使用左下角的原点？
15
？这是从哪里来的？为什么它会应用于通用碰撞检查？我还怀疑您的代码的主要问题是您有
c1x-c8y
In不再使用
c1y-c8y
等作为
hypot
的第二个参数。这将起作用，但我需要知道它与哪一侧/角发生碰撞。谢谢！哦，nevermind出现了另一个错误0。o我必须编辑它以使其适用于我的情况，但它看起来可能会起作用。这看起来是正确的，您已修复了所有问题我荒谬的错误，所以谢谢你，我只是用参数var ax=0，ay=2，avatar={width:2，height:2}，platform1x=1，platform1y=1，platform={width:20，height:20}尝试了一下，在我这方面效果很好。控制台中记录了一个“分数”

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



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];
}



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)
}