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