javascript – 从A点到B以恒定速度沿直线移动对象

我知道之前已经问了几次,但是找不到真正有效的答案.有类似的,但速度取决于行进的距离.

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

我有一些代码几乎可以工作,但玩家总是稍微偏离路线,更多的是他旅行的距离越长.这是代码：

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部分,但我无法弄明白;我完全难过了.

编辑：我想补充一点,玩家角色让玩家面向拖拽的方向,那部分工作正常.

解决方法

Live Demo

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

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,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,400,400);
    ctx.beginPath();
    ctx.rect(x,y,10,10);
    ctx.closePath();
    ctx.fill();
 
    ctx.fillStyle = "#ff0";
    ctx.beginPath();
    ctx.rect(targetX,targetY,10);
    ctx.closePath();
    ctx.fill();
 
    setTimeout(function(){draw()},30);   
}
 
draw();

javascript – 从A点到B以恒定速度沿直线移动对象

解决方法

猜你在找的JavaScript相关文章