5

我知道这已经被问过几次了，但是我找不到真正有效的答案。有一个类似的，但速度会根据行驶的距离而变化。

所以我的问题是我试图让一个物体（在这种情况下是一个玩家）以恒定的速度从 A 点到 B 点移动一条很长的直线。这是通过单击播放器并拖动到我希望他走到的位置来完成的，因此它可以在任何方向和任何距离上。

我有一些代码几乎可以工作，但玩家总是会稍微偏离路线，更何况他行进的距离越长。这是该代码：

window.addEventListener('mouseup', function(e) {
    selectedPlayer.moveX = e.pageX;
    selectedPlayer.moveY = e.pageY;
    movePlayer(selectedPlayer);
});

function movePlayer(player) {

    var xDistance = player.moveX - player.x;
    var yDistance = player.moveY - player.y;
    var travelDistance = Math.sqrt((xDistance * xDistance) + (yDistance * yDistance));
    var timeToTravel = travelDistance; //This may seem pointless, but I will add a speed variable later
    var playerAngle = Math.atan2(yDistance, xDistance) * (180 / Math.PI);
    var xRatio = Math.atan2(xDistance, travelDistance);
    var yRatio = Math.atan2(yDistance, travelDistance);

    //This function is called in another part of code that repeats it 60 times a second
    walkPlayer = function() {

        setTimeout(function(){
            player.x = player.moveX;
            player.y = player.moveY;
            selectedPlayer = undefined;
            walkPlayer = undefined;
        }, timeToTravel * 20)

        player.angle = playerAngle;
        player.x += xRatio;
        player.y += yRatio;
    };
}

我希望这是有道理的，我只需要包含相关的代码部分。我认为我的问题可能在于 xRatio 和 yRatio 部分，但我无法弄清楚；我完全被难住了。

编辑：我想添加 playerAngle 使玩家面向拖动的方向，并且该部分工作正常。

4

2 回答 2

9

现场演示

以下是获得所需工作所需的基础知识，

var tx = targetX - x,
    ty = targetY - y,
    dist = Math.sqrt(tx*tx+ty*ty),
    rad = Math.atan2(ty,tx),
    angle = rad/Math.PI * 180;;

    velX = (tx/dist)*thrust;
    velY = (ty/dist)*thrust;

player.x += velX
player.y += velY

这是我不久前做的一个演示，听起来像您正在寻找的东西，我添加了单击功能，以便根据您的问题更改目标。

window.addEventListener('mouseup', function(e) {
    targetX  = e.pageX;
    targetY = e.pageY;
});

var ctx = document.getElementById("canvas").getContext("2d"),
    x = 300,
    y = 0,
    targetX = Math.random()*300,
    targetY = Math.random()*300,
    velX = 0,
    velY = 0,
    thrust = 5;


function draw(){   
    var tx = targetX - x,
        ty = targetY - y,
        dist = Math.sqrt(tx*tx+ty*ty),
        rad = Math.atan2(ty,tx),
        angle = rad/Math.PI * 180;;

    velX = (tx/dist)*thrust;
    velY = (ty/dist)*thrust;

    // stop the box if its too close so it doesn't just rotate and bounce
    if(dist > 1){
      x += velX;
      y += velY;
    }

    ctx.fillStyle = "#fff";
    ctx.clearRect(0,0,400,400);
    ctx.beginPath();
    ctx.rect(x, y, 10, 10);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = "#ff0";
    ctx.beginPath();
    ctx.rect(targetX, targetY, 10, 10);
    ctx.closePath();
    ctx.fill();

    setTimeout(function(){draw()}, 30);   
}

draw();
于 2012-12-12T21:45:35.273 回答
3

您的问题似乎是角度，xRatio而yRatio不是矢量坐标。这应该有效：

document.addEventListener('mouseup', function(e) {
    movePlayer(selectedPlayer, {x:e.pageX, y:e.pageY});
});

function movePlayer(player, target) {
    var start = {
            x: player.x,
            y: player.y,
            t: Date.now()
        },
        distance = Math.sqrt(distance.x*distance.x + distance.y*distance.y),
        time = distance; //This may seem pointless, but I will add a speed variable later
        difference = {
            x: target.x - player.x,
            y: target.y - player.y,
            t: time
        };

    player.angle = Math.atan2(distance.y, distance.x) * (180 / Math.PI);

    //This function is called in another part of code that repeats it 60 times a second
    walkPlayer = function(curTime) { // we need timing information here: Date.now()
        var elapsed = curTime - start.t,
            ratio = elapsed / difference.t;
        player.x = start.x + difference.x * ratio;
        player.y = start.y + difference.y * ratio;
        if (ratio >= 1) {
            player.x = target.x;
            player.y = target.y;
            // end calling of walkPlayer
        }
    };
}
于 2012-12-12T22:02:21.027 回答