我知道之前已经问了几次,但是找不到真正有效的答案.有类似的,但速度取决于行进的距离.
所以我的问题是我试图让一个物体(在这种情况下是一个玩家)以恒定的速度从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();
