分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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();