JavaScript中的圆碰撞答案

【问题标题】：Circle collision in JavaScriptJavaScript中的圆碰撞
【发布时间】：2011-11-30 18:49:37
【问题描述】：

在学校我需要用 JavaScript 编写一个程序来判断圆圈是否发生碰撞。

它不需要以图形方式显示。

我试了一下，但我的代码似乎不起作用。我该如何解决？

这是我生成的代码：

function collision (p1x, p1y, r1, p2x, p2y, r2) {
    var a;
    var x;
    var y;

    a = r1 + r2;
    x = p1x - p2x;
    y = p1y - p2y;

    if (a > (x*x) + (y*y)) {
        return true;
    } else {
        return false;
    }
}
var collision = collision(5, 500, 10, 1000, 1500, 1500);
alert(collision);

【问题讨论】：

您的公式中没有遗漏什么吗？
您可以将您的 return 语句更改为 return (a > (x*x) + (y*y)); 而不是使用 if 来返回 true 或 false，因为条件已经是这样了。或者更好的是，将条件存储在名为var isCollision = (a > (x*x) + (y*y)); 和return isCollision; 的变量中，这样更易于阅读。并且不要在两件事上重用变量名，比如碰撞。
重读距离论坛。你几乎得到它，但缺少一部分。
调试问题的好方法是单步调试代码。

标签： javascript detection geometry

【解决方案1】：

您的支票应该是if (a > Math.sqrt((x*x) + (y*y))) http://cgp.wikidot.com/circle-to-circle-collision-detection

所以完整的代码是

function collision(p1x, p1y, r1, p2x, p2y, r2) {
  var a;
  var x;
  var y;

  a = r1 + r2;
  x = p1x - p2x;
  y = p1y - p2y;

  if (a > Math.sqrt((x * x) + (y * y))) {
    return true;
  } else {
    return false;
  }
}
var collision = collision(5, 500, 10, 1000, 1500, 1500);
console.log(collision);

对于计算量较少的实现（对 sn-p 使用 ES7 语法）使用

const checkCollision = (p1x, p1y, r1, p2x, p2y, r2) => ((r1 + r2) ** 2 > (p1x - p2x) ** 2 + (p1y - p2y) ** 2)

var collision = checkCollision(5, 500, 10, 1000, 1500, 1500);
console.log(collision);

正如 Darek Rossman 在his answer 中展示的那样。

【讨论】：

【解决方案2】：

在你的 if 语句中，试试这个：

if ( a * a > (x * x + y * y) ) {
    ...
} else {
    ...
}

【讨论】：

【解决方案3】：

具有边dx 和dy 的三角形的长度（即点(x1, y1) 和(x2, y2) 之间的距离，其中dx = x2 - x1 和dy = y2 - y1）等于：

sqrt(dx^2 + dy^2)

所以你可能想要：

if(a > Math.sqrt(x*x + y*y)) {

【讨论】：