Javascript 计算一个圆';s速度

Javascript 计算一个圆';s速度,javascript,html,canvas,physics,Javascript,Html,Canvas,Physics,我已经研究这个问题一段时间了,看起来不太难,但是我越来越累了,而且我越试越复杂(但可能真的很容易) 我的目标是让一个球从另一个球上反弹。看起来很容易 球2由用户的鼠标控制(到目前为止,它有点像单人乒乓球,但它是一个圆而不是一个矩形),所以它的速度并不重要 球1有几个属性,包括dx(它每帧移动的x距离)和dy(dx,但对于y坐标) 到目前为止,我所遇到的问题是,你不知道哪些值是正的,哪些值是负的(因此速度可能会立即严重增加或降低),你可能可以使用许多其他的if来解决这个问题,但我现在太困惑了,无法

我已经研究这个问题一段时间了,看起来不太难,但是我越来越累了,而且我越试越复杂(但可能真的很容易)

我的目标是让一个球从另一个球上反弹。看起来很容易

球2由用户的鼠标控制(到目前为止,它有点像单人乒乓球,但它是一个圆而不是一个矩形),所以它的速度并不重要

球1有几个属性,包括dx(它每帧移动的x距离)和dy(dx,但对于y坐标)

到目前为止,我所遇到的问题是,你不知道哪些值是正的,哪些值是负的(因此速度可能会立即严重增加或降低),你可能可以使用许多其他的if来解决这个问题,但我现在太困惑了,无法思考

这是这个函数的重要部分。此外,我还尝试设置它,使dx+dy始终保持不变,即使数字发生变化,这样看起来更自然

if (collision(ball, paddle)) {
    diffX = paddle.x-ball.x;
    diffY = paddle.y-ball.y;
    totalVel = ball.dx+ball.dy;
    dir = {
      x : diffX/(diffX+diffY)*-totalVel,
      y : diffY/(diffX+diffY)*-totalVel
    };
    ball.dx = dir.x;
    ball.dy = dir.y;
  }
下面是一个包含完整代码的JSFIDLE

首先让我们定义什么是“反弹”——速度相同,但方向(在两个轴上)将颠倒。如果我们把dx和dy看作一个向量,那么我们首先可以得到球的传入速度,如下所示:

var ballSpeed = Math.sqrt((ball.dx * ball.dx) + (ball.dy * ball.dy));
无论dx和dy在做什么,上述值始终为正值

接下来,我们需要球的传入方向-该位与您当前得到的相同:

diffX = paddle.x-ball.x;
diffY = paddle.y-ball.y;
然而,如果我们也把它当作一个向量,它的长度基本上是完全未知的。让我们将其归一化,使其成为长度为1的方向向量:

var distanceBetweenPaddleAndBall = Math.sqrt((diffX * diffX) + (diffY * diffY));
diffX /= distanceBetweenPaddleAndBall;
diffY /= distanceBetweenPaddleAndBall;
diffX和diffY现在是一个标准化的方向向量-球当前前进的方向-而ballSpeed是我们希望它前进的速度

现在我们将应用反弹-翻转方向并保持速度。这就是:

dir = {
  x : -diffX * ballSpeed,
  y : -diffY * ballSpeed
};
把这一切放在一起,我们最终会得出这样的结论:

if (collision(ball, paddle)) {
    diffX = paddle.x-ball.x;
    diffY = paddle.y-ball.y;
    // How fast is the ball coming in?
    var ballSpeed = Math.sqrt((ball.dx * ball.dx) + (ball.dy * ball.dy));
    // How far is the ball from the paddle?
    var distanceBetweenPaddleAndBall = Math.sqrt((diffX * diffX) + (diffY * diffY));

    // Normalise diffX and diffY so we have a direction vector:
    diffX /= distanceBetweenPaddleAndBall;
    diffY /= distanceBetweenPaddleAndBall;

    // Apply the bounce and the original ball speed:
    dir = {
      x : -diffX * ballSpeed,
      y : -diffY * ballSpeed
    };
    ball.dx = dir.x;
    ball.dy = dir.y;
  }

和。

因此,首先让我们定义什么是“反弹”——速度相同,但方向(在两个轴上)将颠倒。如果我们把dx和dy看作一个向量,那么我们首先可以得到球的传入速度,如下所示:

var ballSpeed = Math.sqrt((ball.dx * ball.dx) + (ball.dy * ball.dy));
无论dx和dy在做什么,上述值始终为正值

接下来,我们需要球的传入方向-该位与您当前得到的相同:

diffX = paddle.x-ball.x;
diffY = paddle.y-ball.y;
然而,如果我们也把它当作一个向量,它的长度基本上是完全未知的。让我们将其归一化,使其成为长度为1的方向向量:

var distanceBetweenPaddleAndBall = Math.sqrt((diffX * diffX) + (diffY * diffY));
diffX /= distanceBetweenPaddleAndBall;
diffY /= distanceBetweenPaddleAndBall;
diffX和diffY现在是一个标准化的方向向量-球当前前进的方向-而ballSpeed是我们希望它前进的速度

现在我们将应用反弹-翻转方向并保持速度。这就是:

dir = {
  x : -diffX * ballSpeed,
  y : -diffY * ballSpeed
};
把这一切放在一起,我们最终会得出这样的结论:

if (collision(ball, paddle)) {
    diffX = paddle.x-ball.x;
    diffY = paddle.y-ball.y;
    // How fast is the ball coming in?
    var ballSpeed = Math.sqrt((ball.dx * ball.dx) + (ball.dy * ball.dy));
    // How far is the ball from the paddle?
    var distanceBetweenPaddleAndBall = Math.sqrt((diffX * diffX) + (diffY * diffY));

    // Normalise diffX and diffY so we have a direction vector:
    diffX /= distanceBetweenPaddleAndBall;
    diffY /= distanceBetweenPaddleAndBall;

    // Apply the bounce and the original ball speed:
    dir = {
      x : -diffX * ballSpeed,
      y : -diffY * ballSpeed
    };
    ball.dx = dir.x;
    ball.dy = dir.y;
  }

和。

不是答案,而是关于你的跳跃逻辑的一些考虑:

  • 必须计算球的方向(dy/dx)
  • 碰撞也有一个方向(两个中心之间的角度=b.x-p.x/b.y-p.y)
  • 反弹后的角度必须根据以下两个角度计算:使用第二个角度进行镜像
  • 要在碰撞后计算新的dx和dy,需要球的原始速度Math.abs(Math.sqrt(Math.pow(dx)+Math.pow(dy))
  • 基于此速度和新方向,可以计算新的dx和dy

不是答案,而是关于您的反弹逻辑的一些考虑:

  • 必须计算球的方向(dy/dx)
  • 碰撞也有一个方向(两个中心之间的角度=b.x-p.x/b.y-p.y)
  • 反弹后的角度必须根据以下两个角度计算:使用第二个角度进行镜像
  • 要在碰撞后计算新的dx和dy,需要球的原始速度Math.abs(Math.sqrt(Math.pow(dx)+Math.pow(dy))
  • 基于此速度和新方向,可以计算新的dx和dy

没问题!别忘了睡觉:)谢谢,但我在美国,所以现在是下午6:30。没问题!别忘了睡觉:)谢谢,但我在美国,所以现在是下午6:30