1

我的画布中间有一个角色，他旋转以始终面向我的鼠标位置——无论它在画布上的哪个位置。

我现在想做的是，当我按 W 或向上箭头时，我的角色会走向鼠标。我不确定这背后的数学原理，所以我寻求一点帮助。

现在，我有这个功能可以监听 WASD/箭头键：

Player.prototype.playerAnimation = function (){

    //UP
    if(this.isUpKey){

        //Character movement [drawX/Y is the position of character]
        this.drawY = mouseY;
}

当然，这只会将角色移动到鼠标的 Y 位置——根本不是我要找的。我只是不知道需要什么样的公式？

谢谢

4

2 回答 2

2

如果您已经成功地向鼠标旋转，则必须计算字符和光标之间的角度，所以现在=mouseY不要以绝对值（特点。this.drawYthis.drawX

但是，您希望 X 和 Y 移动的对角线为该值，因此类似这样的操作会将其分解为 X 和 Y 分量：

this.drawX=this.drawX+this.speed*Math.cos(d2r(angle));
this.drawY=this.drawY+this.speed*Math.sin(d2r(angle));

如果您以度数而不是弧度工作：

function d2r(d){
    var r=d*(Math.PI/180);
    return r;   
}

根据您的角度是如何确定的，您可能必须使用公式中的符号。哦，如果您希望它在按键保持按下状态时继续移动，您需要添加一些setTimeout以在一段时间后重新触发该playerAnimation功能

于 2013-01-22T20:39:03.733 回答
2

你不应该使用 sin 和 cos 因为这些函数很慢，因此你不能在计算数据时使用角度（你只需要它来旋转精灵或类似的东西）。

首先，您应该使用 x、y、xspeed、yspeed、速度（每秒 px）和方向属性制作对象。

假设您的角色在位置 (10,10)，速度 = 5。现在您在位置 (50,40) 上单击（或悬停）鼠标。首先，您必须获得 dx 和 dy（增量）。

dx = mouse.x - character.x // 50 - 10 = 40
dy = mouse.y - character.y // 40 - 10 = 30

接下来获取从字符位置到鼠标位置的距离。

distance = sqrt(dx*dx + dy*dy) // sqrt(40*40 + 30*30) = sqrt(1600 + 900) = 
                               // = sqrt(2500) = 50 (Pythagorean theorem)

现在我们可以计算字符的 xspeed 和 yspeed。

factor = distance / character.speed // 50 / 5 = 10
character.xspeed = dx / factor // 40 / 10 = 4
character.yspeed = dy / factor // 30 / 10 = 3

现在假设您每秒有 60 个物理循环的滴答声（可能您的物理循环没有与主循环分离，所以它只是您的 fps 计数）。你的字符 x 的每一个刻度都会增加 xspeed，y 增加 yspeed（如果你当然是按键的话）。所以一秒钟后（需要 60 个滴答声）你的角色将在 position (10 + 60*4, 10 + 60*3) = (250, 190)。它非常快，因此您可以降低角色速度或降低 fps（我不推荐）。

如果您希望您的角色停在鼠标位置（如在 cRPG 中），请使用计时器或计数器。角色到达鼠标位置所需的刻度数是先前计算的factor，等于10. 循环 10 次后，字符位置将为 (50,40)。因此，您可以在字符对象中创建 var 刻度，并且每个循环刻度将其减 1，当它变为 0 时，将字符的 xspeed 和 yspeed 重置为 0，这样它就不会再移动了。另一种方法是使用超时，但情况更糟。就在 10/60s = 1/6s ~= 0.18s 超时回调函数将字符的 xspeed 和 yspeed 重置为 0。

如果需要角度，可以使用 dx/dy 和 tan 计算。

这种运动方式比使用 sin 和 cos 快得多。

当然，您可以通过在 (character.x, character.y) 位置绘制字符来渲染运动。

于 2013-01-23T00:34:21.223 回答