HTML5 + JavaScript -移动字符向鼠标位置

HTML5 + JavaScript - Move Character Towards Mouse Location?

本文关键字：鼠标 位置 字符 移动 JavaScript HTML5      更新时间：2023-09-26

我有一个字符在画布的中间，他旋转总是面对我的鼠标位置-无论它在画布上的位置。

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

现在，我有这个函数监听WASD/Arrow键:

Player.prototype.playerAnimation = function (){
    //UP
    if(this.isUpKey){
        //Character movement [drawX/Y is the position of character]
        this.drawY = mouseY;
}

当然，这只是将字符移动到鼠标的Y位置-这根本不是我想要的。我只是不知道需要什么样的公式?

谢谢

如果你已经成功地向鼠标方向旋转，你必须计算角色和光标之间的角度，所以现在你应该将this.drawY和this.drawX增加一些值，而不是绝对移动(=mouseY)。

但是，你想让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功能

你不应该使用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了。

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个节拍)你的角色将位于(10 + 60*4, 10 + 60*3) = (250, 190)位置。它非常快，所以你可以降低你的角色速度或降低你的fps(我不建议这样做)。

如果你想让你的角色停在鼠标位置(就像在cRPG中)，那么使用计时器或计数器。你的角色到达鼠标位置所需的滴答数是之前计算的factor，它等于10。在循环10次之后，字符位置将是(50,40)。所以你可以在角色对象中创建var ticks，每个循环tick将其递减1，当它达到0时，将角色的xspeed和yspeed重置为0，这样它就不会再移动了。另一种方法是使用timeout，但它更糟糕。在10/60s = 1/6s ~= 0.18s超时后，回调函数将字符的xspeed和yspeed重置为0。

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

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

当然你可以通过在(字符)处绘制字符来渲染运动。

相关文章：