基本上，鼠标越靠近圆圈，圆圈移动得越快。

Question

我的画布上有一个圆圈。鼠标位置是相对于画布计算的。我希望当鼠标距离它的距离<= 100px时，圆圈会移动。开始移动的最小距离为100px，为0.5px / tick。它在20px距离处达到2px / tick。

基本上，鼠标越靠近圆圈，圆圈移动得越快。

当距离小于或等于100时，我到目前为止移动了圆圈 - （我使用画架库）

function handleTick() {
    distance = calculateDistance(circle, mX, mY);
    if (distance<=100) {
        circle.x += 0.3;

    stage.update();
    }
}

我想要什么

function handleTick() {
    distance = calculateDistance(circle, mX, mY);
    if (distance<=100) {
        circleSpeed = // equation that takes distance and outputs velocity px/tick.
        circle.x += circleSpeed;

    stage.update();
    }
}

所以我认为这是一个数学问题并将其发布在数学交换中，但到目前为止还没有答案。我尝试使用Google搜索几个主题：＆＃34;如何为关系提出方程式＆＃34;因为我有域（100,20）和范围（0.5,2）。什么功能可以与他们联系？

我在数学方面表现不好，这些数字甚至可能没有关系 - 我不确定我在这里寻找什么。

我应该写一个随机算法＆＃34; circleSpeed = 2x + 5x;＆＃34;并希望它做我想要的？或者是否有可能像我一样 - ＆＃34;我希望这些是最小值和最大值，现在我需要为它提出一个等式＆＃34;？

指向正确方向的指针会很棒，因为到目前为止，我在黑暗中拍摄。

Answer 1

如果我理解正确，您希望circleSpeed成为distance的函数，以便

circleSpeed

0.5

distance为100。

circleSpeed

2

distance为20。

有无限功能可以实现这一点，所以我将假设线性。

包含斜率m且包含点(x₀,y₀)的直线的等式是

y = m (x-x₀) + y₀

但在这种情况下，您有两个点，(x₁,y₁)和(x₂,y₂)，因此您可以使用

计算斜率

    y₂ - y₁
m = ───────
    x₂ - x₁

所以线的等式是

    y₂ - y₁
y = ─────── (x - x₁) + y₁
    x₂ - x₁

使用您的数据，

    0.5 - 2 
y = ──────── (x - 20) + 2 = -0.01875 x + 2.375
    100 - 20

因此，

circleSpeed = -0.01875 * distance + 2.375

Answer 2

我假设您想要距离和速度之间的线性关系？

如果是这样，您可以执行circleSpeed = (2.5 - 0.5(distance/20))之类的操作。然而，这将在范围（100到0）上将速度从0线性地设置为2.5，但是如果使用另一个if (distance < 20) circleSpeed = 2那么你将在20范围内将速度限制为2.0。

它并不是你所要求的100％准确，但非常接近，我猜它应该看起来不错。它也可能会被调整以更接近。

但是如果你想让圆圈远离鼠标，你还需要做一些事情来计算正确的运动方向，并且你需要计算问题时你的问题会变得更复杂{{1 }和speed_x

Answer 3

这是一个简单的片段，用于动画速度线性，这意味着圆圈的加速度将是恒定的。

threadNumber

然而其他关系是可能的，（你可能会称之为其他的优势）但是它们会更复杂，呵呵。

编辑：哎呀，我犯了一个错误。

提出算法

基本上，鼠标越靠近圆圈，圆圈移动得越快。

3 个答案: