Javascript 单击P5.JS中的三角形项目可以在三角形修复之外单击

非常感谢你花了一天的时间来尝试和帮助回答我的问题！ 我真的很感激！！ 我对P5JS是新手，但我决定尝试一下！ 我的代码很可能不是最紧凑的，我非常感谢您的反馈！ 我的问题是，当你点击三角形外部的那部分时，它似乎通常会接受它的内部。 我的代码中很可能有一个错误，允许这样做。 我所有的代码都是，在画布中创建一个随机三角形，并测试您是否可以单击或在三角形内按住一个按钮。 当你这样做，它会创建一个新的随机的。 请让我知道是什么导致了这个奇怪的错误。 PS我使用在线浏览器来运行它，所以我建议在那里运行它，看看它是否能最好地复制它

代码如下：

function setup() {
    createCanvas(500, 500);
    x1 = random(0, 500);
    y1 = random(0, 500);
    x2 = random(0, 500);
    y2 = random(0, 500);
    x3 = random(0, 500);
    y3 = random(0, 500);
    click = 0;
    x = false;
    y = false;
}
function testfor() {
    if (x == true && y == true) {
        if (mouseIsPressed) {
            click = 1;
        }
    }
    if (click == 1) {
        x1 = random(0, 500);
        y1 = random(0, 500);
        x2 = random(0, 500);
        y2 = random(0, 500);
        x3 = random(0, 500);
        y3 = random(0, 500);
        click = 0;
        X = false;
        Y = false;
    }
}
setInterval(testfor, 100);
function draw() {
    background(0, 100, 299);
    fill(125);
    triangle(x1, y1, x2, y2, x3, y3);
}
setInterval(draw, 100);
function xcheck() {
    if (x1 >= x2 && x1 >= x3) {
        if (x2 >= x3) {
            if (mouseX <= x1 && mouseX >= x3) {
                x = true;
            } else {
                x = false;
            }
        } else if (mouseX <= x1 && mouseX >= x2) {
            x = true;
        } else {
            x = false;
        }
    } else if (x2 >= x1 && x2 >= x3) {
        if (x1 >= x3) {
            if (mouseX <= x2 && mouseX >= x3) {
                x = true;
            } else {
                x = false;
            }
        } else if (mouseX <= x2 && mouseX >= x1) {
            x = true;
        } else {
            x = false;
        }
    } else if (x1 >= x2) {
        if (mouseX <= x3 && mouseX >= x2) {
            x = true;
        } else {
            x = false;
        }
    } else if (mouseX <= x3 && mouseX >= x1) {
        x = true;
    } else {
        x = false;
    }
}
setInterval(xcheck, 100);
function ycheck() {
    if (y1 >= y2 && y1 >= y3) {
        if (y2 >= y3) {
            if (mouseY <= y1 && mouseY >= y3) {
                y = true;
            } else {
                y = false;
            }
        } else if (mouseY <= y1 && mouseY >= y2) {
            y = true;
        } else {
            y = false;
        }
    } else if (y2 >= y1 && y2 >= y3) {
        if (y1 >= y3) {
            if (mouseY <= y2 && mouseY >= y3) {
                y = true;
            } else {
                y = false;
            }
        } else if (mouseY <= y2 && mouseY >= y1) {
            y = true;
        } else {
            y = false;
        }
    } else if (y1 >= y2) {
        if (mouseY <= y3 && mouseY >= y2) {
            y = true;
        } else {
            y = false;
        }
    } else if (mouseY <= y3 && mouseY >= y1) {
        y = true;
    } else {
        y = false;
    }
}
setInterval(ycheck, 100);

函数设置（）{
createCanvas（500500）；
x1=随机（0500）；
y1=随机（0，500）；
x2=随机（0500）；
y2=随机（0500）；
x3=随机（0，500）；
y3=随机（0，500）；
单击=0；
x=假；
y=假；
}
函数testfor（）{
如果（x==true&&y==true）{
如果（按下鼠标）{
单击=1；
}
}
如果（单击==1）{
x1=随机（0500）；
y1=随机（0，500）；
x2=随机（0500）；
y2=随机（0500）；
x3=随机（0，500）；
y3=随机（0，500）；
单击=0；
X=假；
Y=假；
}
}
设置间隔（testfor，100）；
函数绘图（）{
背景（010299）；
填充（125）；
三角形（x1，y1，x2，y2，x3，y3）；
}
设置间隔（抽签，100）；
函数xcheck（）{
如果（x1>=x2&&x1>=x3）{
如果（x2>=x3）{
if（mouseX=x3）{
x=真；
}否则{
x=假；
}
}else if（mouseX=x2）{
x=真；
}否则{
x=假；
}
}否则如果（x2>=x1&&x2>=x3）{
如果（x1>=x3）{
if（mouseX=x3）{
x=真；
}否则{
x=假；
}
}else if（mouseX=x1）{
x=真；
}否则{
x=假；
}
}如果（x1>=x2），则为else{
if（mouseX=x2）{
x=真；
}否则{
x=假；
}
}else if（mouseX=x1）{
x=真；
}否则{
x=假；
}
}
设置间隔（xcheck，100）；
函数ycheck（）{
如果（y1>=y2&&y1>=y3）{
如果（y2>=y3）{
if（mouseY=y3）{
y=真；
}否则{
y=假；
}
}else if（mouseY=y2）{
y=真；
}否则{
y=假；
}
}如果（y2>=y1&&y2>=y3）为else，则为{
如果（y1>=y3）{
if（mouseY=y3）{
y=真；
}否则{
y=假；
}
}否则如果（鼠标=y1）{
y=真；
}否则{
y=假；
}
}如果（y1>=y2），则为else{
if（mouseY=y2）{
y=真；
}否则{
y=假；
}
}否则如果（鼠标=y1）{
y=真；
}否则{
y=假；
}
}
设置间隔（ycheck，100）；

---

非常感谢您抽出时间

我对你的代码做了一些修改

首先，P5.js库会自动调用

draw（）

函数，因此不需要调用

setInterval（draw，100）

你似乎也在做很多不必要的检查，你只需要在按下鼠标时检查碰撞。P5通过
mousePressed
函数简化了这一过程，该函数在用户单击鼠标时调用。通过这种方式，您可以摆脱
click
变量和
testFor
函数，并将所有碰撞检查移动到
鼠标按下的
中

function mousePressed() {
  xcheck();
  ycheck();

  if (x == true && y == true) {
    x1 = random(0, 500);
    y1 = random(0, 500);
    x2 = random(0, 500);
    y2 = random(0, 500);
    x3 = random(0, 500);
    y3 = random(0, 500);

    x = false;
    y = false;
  }
}

既然我们已经优化了您的代码，我们就可以开始解决您原来的问题了。我们知道错误在
xcheck（）
或
ycheck（）
中，但我不明白你的碰撞检测算法是如何工作的，我没有时间去弄清楚。您可以通过
console.log（）
ing代码的不同部分尝试自己找到它：调用
mousePressed
时，
mouseX
的值是多少？调用
mousePressed
时，
mouseY
的值是多少？
xcheck
的输出是什么？
ycheck
的输出是什么？为什么这是输出？回答这些问题并使用控制台可能会帮助您发现错误

我可以向您展示一个非常简单的点到三角形碰撞算法，以及如何在代码中实现它。您可以在本视频的前3分钟中找到它的工作原理：可能有更好的方法来实现这一点，但此实现非常简单且易于理解。代码如下所示：

function trianCollision(px, py, x1, y1, x2, y2, x3, y3) {

  // get the area of the triangle
  var areaOrig = floor(abs((x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1)));
  //console.log("totalArea: " + areaOrig);

  // get the area of 3 triangles made between the point and the corners of the triangle
  var area1 = floor(abs((x1 - px) * (y2 - py) - (x2 - px) * (y1 - py)));
  var area2 = floor(abs((x2 - px) * (y3 - py) - (x3 - px) * (y2 - py)));
  var area3 = floor(abs((x3 - px) * (y1 - py) - (x1 - px) * (y3 - py)));
  //console.log("areaSum: " + (area1 + area2 + area3));

  // if the sum of the three areas equals the original, we're inside the triangle
  if (area1 + area2 + area3 <= areaOrig) {
    return true;
  }
  return false;
}

function setup() {
  createCanvas(500, 500);

  x1 = random(0, 500);
  y1 = random(0, 500);
  x2 = random(0, 500);
  y2 = random(0, 500);
  x3 = random(0, 500);
  y3 = random(0, 500);

  x = false;
  y = false;
}

function draw() {
  background(202, 226, 249);
  fill(50);
  noStroke();
  triangle(x1, y1, x2, y2, x3, y3);
}

function mousePressed() {
  xcheck();
  ycheck();

  if (x == true && y == true) {
    x1 = random(0, 500);
    y1 = random(0, 500);
    x2 = random(0, 500);
    y2 = random(0, 500);
    x3 = random(0, 500);
    y3 = random(0, 500);

    x = false;
    y = false;
  }
}

function xcheck() {
  if (x1 >= x2 && x1 >= x3) {
    if (x2 >= x3) {
      if (mouseX <= x1 && mouseX >= x3) {
        x = true;
      } else {
        x = false;
      }
    } else if (mouseX <= x1 && mouseX >= x2) {
      x = true;
    } else {
      x = false;
    }
  } else if (x2 >= x1 && x2 >= x3) {
    if (x1 >= x3) {
      if (mouseX <= x2 && mouseX >= x3) {
        x = true;
      } else {
        x = false;
      }
    } else if (mouseX <= x2 && mouseX >= x1) {
      x = true;
    } else {
      x = false;
    }
  } else if (x1 >= x2) {
    if (mouseX <= x3 && mouseX >= x2) {
      x = true;
    } else {
      x = false;
    }
  } else if (mouseX <= x3 && mouseX >= x1) {
    x = true;
  } else {
    x = false;
  }
}


function ycheck() {
  if (y1 >= y2 && y1 >= y3) {
    if (y2 >= y3) {
      if (mouseY <= y1 && mouseY >= y3) {
        y = true;
      } else {
        y = false;
      }
    } else if (mouseY <= y1 && mouseY >= y2) {
      y = true;
    } else {
      y = false;
    }
  } else if (y2 >= y1 && y2 >= y3) {
    if (y1 >= y3) {
      if (mouseY <= y2 && mouseY >= y3) {
        y = true;
      } else {
        y = false;
      }
    } else if (mouseY <= y2 && mouseY >= y1) {
      y = true;
    } else {
      y = false;
    }
  } else if (y1 >= y2) {
    if (mouseY <= y3 && mouseY >= y2) {
      y = true;
    } else {
      y = false;
    }
  } else if (mouseY <= y3 && mouseY >= y1) {
    y = true;
  } else {
    y = false;
  }
}

我希望这对您有所帮助，如果您有任何问题，请随时提问。
如果您只关注一件事，您的运气会好得多。用一个硬编码三角形测试一个硬编码点怎么样？谢谢凯文·沃克曼的回答，但不幸的是，我不知道该怎么做，但你能给我看一下你的意思的示例代码吗？我很抱歉没有真正理解。如果它是硬编码的，那么它不会永远使用同一个三角形吗？我试图在用户点击最后一个三角形后使用一个新的随机三角形。谢谢你的时间。天哪，谢谢你把这件事简化了这么多！我很高兴你花了一些时间研究我的问题！唯一的问题是，我仍然可以点击三角形的外部，就像非常外部一样，它通常仍然接受它作为三角形的内部。我会看起来很内敛
function mousePressed() {

  if (trianCollision(mouseX, mouseY, x1, y1, x2, y2, x3, y3)) {
    x1 = random(0, 500);
    y1 = random(0, 500);
    x2 = random(0, 500);
    y2 = random(0, 500);
    x3 = random(0, 500);
    y3 = random(0, 500);

    x = false;
    y = false;
  }
}