Question

我的画布中间有一个角色，他旋转到总是面向我的鼠标位置 - 无论它在画布上的哪个位置。

我现在要做的是，当我按下W或向上箭头时，我的角色会朝着鼠标走去。我不确定这背后的数学，所以我要求一些帮助。

现在，我有这个侦听WASD /箭头键的函数：

Player.prototype.playerAnimation = function (){

    //UP
    if(this.isUpKey){

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

当然，这只会将角色移动到鼠标的Y位置 - 而不是我正在寻找的东西。我只是不知道需要什么样的配方？

由于

Answer 1

如果你已经成功地向鼠标旋转，你必须计算角色和光标之间的角度，所以现在不应该以绝对术语（=mouseY）移动，而应该增加{{1}和this.drawY一些值实际上会影响角色的速度。

但是，你希望X和Y的对角线移动到那个值，所以像这样的东西会把它分解成组件X和Y：

this.drawX

以防你以度数而不是弧度工作：

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功能

Answer 2

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

首先，您应该使用x，y，xspeed，yspeed，speed（每秒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 of character。

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

现在让我们假设你的物理循环每秒有60个滴答（可能你的物理循环没有与你的主循环分开，所以它只是你的fps计数）。每个刻度你的角色x增加x速度，y增加yspeed（如果你当然是按键）。所以一秒钟后（需要60个刻度），你的角色将位于(10 + 60*4, 10 + 60*3) = (250, 190)位置。这很快，所以你可以降低你的角色速度或降低你的fps（我不推荐它）。

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

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

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

当然，您可以通过在（character.x，character.y）位置绘制角色来渲染动作。

HTML5 + JavaScript - 将字符移动到鼠标位置？

2 个答案: