javascript - 计算圆的速度

标签 javascript html canvas physics

我已经研究这个问题一段时间了,看起来并不太难,但我越来越累了,而且我尝试的越多,它似乎变得越来越复杂(但这可能真的很容易)。

我的目标是让一个球从另一个球上弹开。看起来很简单。

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

球 1 有一些属性,包括 dx(每帧移动的 x 距离)和 dy(dx,但针对 y 坐标)

到目前为止,我所遇到的问题是,您不知道哪些值是正值,哪些值是负值(因此速度可能会立即严重增加或减少),您也许可以使用许多其他方法来解决此问题如果是的话,但我现在太困惑了,无法思考。

这里是这个函数的重要部分。另外,我尝试将其设置为 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;
  }

这是一个带有完整代码的 JSFiddle https://jsfiddle.net/a2prr0uw/1/

最佳答案

因此,首先让我们定义什么是“弹跳” - 速度是相同的,但方向(在两个轴上)将相反。如果我们把 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;
  }

here it is as a fork of your fiddle too .

关于javascript - 计算圆的速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50081334/

相关文章:

javascript - 使用 js/jquery 循环加载 html 文件列表到 iframe 中

html - 如何更改 css 文件中 anchor 的颜色渲染设置?

javascript - 用 Javascript 开发 Canvas 游戏是否需要框架?

javascript - HTML canvas 的 arc 函数教程

javascript - useSWR 用于多个请求

javascript - 在同一个类中调用 EventEmitter 两次?

javascript - 如何在浏览器源代码中找到 JS 函数声明?

html - div 的宽度问题

javascript - 输入显示在我的固定标题中

javascript - HTML5/Javascript 以一定 Angular 在屏幕上移动对象