可绘制圆之间的javascript冲突检测

首先，请不要对我的英语太挑剔。我不是以英语为母语的人。我希望我能永远解释我自己！此外，我还读到，我应该表明我自己为解决给定的问题做出了一些努力。为了证明这一点，我的帖子变得相对较长

我想做的是： 我是javascript新手（三周），我尝试通过html5画布和javascript构建一个台球桌。最后，用户应该能够通过拖动16个球来在虚拟池选项卡上呈现特定的游戏情况。我在stackoverflow上找到了很多关于路径和拖放的提示

已经起作用的： 与此同时，圆圈看起来几乎像台球，我可以用鼠标移动它们。到目前为止还不错

问题是： 当然，台球在现实中会碰撞，不会重叠。关于碰撞检测，我找到了一篇有用的帖子，它告诉我使用毕达哥拉斯的therm a*a+b*b=c*c来实现这一点。我理解这个概念。我绝对不明白的是，我必须在代码中实现检测。在我的脚本中有一个函数（moveBall00（e）），如果球被拖动（dragok=true），它将计算新的x和y坐标。但是，当同时计算被拖动球的新坐标时，如何计算球之间的距离呢？这很容易成为新手的问题

我试过这个：

新变量“x”

var x=真

检测球之间距离的新功能

函数冲突（）{

---

如果（（Math.pow（bp[1][0]-bp[1][1,2]）+（Math.pow（bp[2][0]-bp[2][1,2]）您面临的问题与底层渲染技术完全无关。这只是一个数学问题

对于你的情况，你基本上想做的是计算你拖动的球和桌上任何球之间的距离。如果距离太短，就会发生碰撞

对于两个对象，这很简单，需要三个值：球的x和y坐标及其半径

var ball = {
    x: 100,
    y: 100
    r: 10
};

要计算距离，请执行以下操作：

var squareX = Math.pow(Math.abs(ballA.x - ballB.x), 2);
var squareY = Math.pow(Math.abs(ballA.y - ballB.y), 2);
var hypothenuse = Math.sqrt(squareX + squareY);
var distance = hypothenuse - ballA.r - ballB.r;

if (distance >= 0) {
    // new position is valid
}

由于台球桌上有许多球，因此需要为桌上未移动的每个球调用此代码一次，以比较所有球

function canMove(ballA, ballB) {
    var squareX = Math.pow(Math.abs(ballA.x - ballB.x), 2);
    var squareY = Math.pow(Math.abs(ballA.y - ballB.y), 2);
    var hypothenuse = Math.sqrt(squareX + squareY);
    var distance = hypothenuse - ballA.r - ballB.r;

    if (distance >= 0) {
        return true;
    }
    return false;
}


function canDrag(ball, balls) {
    var isMovable = true;
    for (var i = balls.length-1; i >= 0; i--) {
        isMovable = canMove(ball, balls[i]);
        if (!isMovable) {
            return false;
        }
    }
    return true;
}

---

在上一个片段中，我假设您的球对象存储在球数组中。我希望这会有所帮助。

看看requestAnimationFrame，您需要渲染与碰撞检查同步，这会对您有所帮助。我不建议为此使用css转换。如果您仍然拖动，您将在每次移动时获得鼠标位置o无需每隔一段时间调用检查。如果你想稍后制作动画，你需要计算每帧的矢量，在这种情况下，变换不会有帮助。嗨，Thorsten。非常感谢你的快速回答。我将研究你的示例，然后尝试实现它。可能需要一些时间，但我会（100%）在这里发布结果，以防成功！Neil&agrothe:也谢谢你！

function canMove(ballA, ballB) {
    var squareX = Math.pow(Math.abs(ballA.x - ballB.x), 2);
    var squareY = Math.pow(Math.abs(ballA.y - ballB.y), 2);
    var hypothenuse = Math.sqrt(squareX + squareY);
    var distance = hypothenuse - ballA.r - ballB.r;

    if (distance >= 0) {
        return true;
    }
    return false;
}


function canDrag(ball, balls) {
    var isMovable = true;
    for (var i = balls.length-1; i >= 0; i--) {
        isMovable = canMove(ball, balls[i]);
        if (!isMovable) {
            return false;
        }
    }
    return true;
}