使用Math.atan2查找2个不同点之间的弧度角 [英] Using Math.atan2 to find the radian angle between 2 different points

问题描述

我正在制作鱼类动画。当我点击我的画布时，会出现一块食物，我的鱼精灵将向前移动。但是我现有的代码是这样的：

I'm working on a fish animation. When I click on my canvas, a piece of food will appear and my fish sprite will move forward to it. But the current code I have is something like this:

Fish.prototype.chaseFood = function(index) {
    if (this.xPos > foodArray[index].x + foodWidth) {
        this.speedX = -1 * Math.abs(this.speedX);
    } else if (this.xPos < foodArray[index].x) {
        this.speedX = Math.abs(this.speedX);
    }
    if (this.yPos > foodArray[index].y + foodHeight) {
        this.speedY = -1 * Math.abs(this.speedY);
    } else if (this.yPos < foodArray[index].y) {
        this.speedY = Math.abs(this.speedY);
    }
};

所以我的鱼精灵总是1或-1所以它会来回反弹直到它到达食物。我正在尝试使用Math.atan2来检测食物的位置，这种方法可以让它完全朝食物方向移动。如何实现此方法：

So my fish sprite will always 1 or -1 so it would bounce back and forth till it reaches the food. I'm trying to use Math.atan2 to detect the position of the food and this method allows it can travel exactly towards the food. How do I implement this method:

var point1={x:20,y:30};
var point2={x:125,y:50};

var dx=point2.x-point1.x;
var dy=point2.y-point1.y;

// angle between point1 & point2 normalized within PI*2

var radianAngle=(Math.atan2(dy,dx)+Math.PI*2)%(Math.PI*2);

因此，一旦鱼精灵检测到该方法，它将开始向前移动而不会来回弹跳。

So once the fish sprite detect the method and it will start to move towards it without bouncing back and forth.

推荐答案

如果 dx 和 dy 计算正确（应该是一些导管），你使用数学。 Atan2 是完全正确的。



使用调试器并检查以下内容：

在你的位置做一些示例知道什么是正确的 dx ， dy （例如，使用{0，x}，{x，0} ，{0，-x}，{ - x，0}，其中x是一些非零正值）并在调试器下检查：对于你的角度，你应该得到一些不同的值 N * Math.Pi / 2 ，其中N是+ -0..4 ..，检查它们。



这很简单。



-SA

If dx and dy are calculated correctly (the are supposed to be some catheti), your use of Math.Atan2 is perfectly correct.

Use the debugger and check up the following:
Makes some sample where you know what are correct dx, dy (for good examples, use {0, x}, {x, 0}, {0, -x}, {-x, 0}, where x is some non-zero positive value) and check it up under the debugger: for your angle, you should have get some different values of N*Math.Pi/2, where N is +-0..4.., check them up.

It's simple.

—SA

Jo hn_90写道：

John_90 wrote:

或者你有任何其他方法来实现它？让精灵顺利前进？我真的需要帮助这个功能才能工作。谢谢。

Or do you have any other method to achieve it? To make the sprite to move forward smoothly? I really need help for this function to be working. Thank you.

好吧，如果你敢于离开幼稚园的精灵，让人想起1970x，那么HTML5 Canvas 功能将让你玩得更多更加丰富的图形模型绝对流畅。



需要付出相当大的努力，但你能做的却是令人印象深刻的：

http://net.tutsplus.com/articles/web-roundups/21-令人印象深刻的-html5-canvas-experiments / [ ^ ]。



你可以找到几个已经设计的引擎，特别是用于创建矢量图形，也可以是互动的：
$ b $bRaphaël： http://raphaeljs.com/ [ ^ ]，

CAKE： http://code.google.com/p/cakejs/ [ ^ ]，

纸.js，一个矢量图形脚本网络： http://paperjs.org/ [ ^ ]，

Burst Engine： https://github.com/rwaldron/burst-core [ ^ ]。



另请参阅此Mozilla教程：https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas?redirectlocale= en-US& redirectslug = HTML％2FCanvas％2FDrawing_Graphics_with_Canvas [ ^ ]。

-SA

Well, if you dare to leave the kindergarten of "sprites", the reminiscent of 1970x, the HTML5 Canvas feature will allow you to play with much richer graphics models in absolutely smooth way.

It will take considerable effort, but what you can do is quite impressive:
http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/[^].

You can find several engines already designed, in particular, for creation of vector graphics, which can also be interactive:
Raphaël: http://raphaeljs.com/[^],
CAKE: http://code.google.com/p/cakejs/[^],
Paper.js, a vector-graphics scripting network: http://paperjs.org/[^],
Burst Engine: https://github.com/rwaldron/burst-core[^].

See also this Mozilla tutorial: https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics/Drawing_graphics_with_canvas?redirectlocale=en-US&redirectslug=HTML%2FCanvas%2FDrawing_Graphics_with_Canvas[^].

—SA

这篇关于使用Math.atan2查找2个不同点之间的弧度角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！