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

前端之家收集整理的这篇文章主要介绍了javascript – 从A点到B以恒定速度沿直线移动对象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道之前已经问了几次,但是找不到真正有效的答案.有类似的,但速度取决于行进的距离.

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

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

  1. window.addEventListener('mouseup',function(e) {
  2. selectedPlayer.moveX = e.pageX;
  3. selectedPlayer.moveY = e.pageY;
  4. movePlayer(selectedPlayer);
  5. });
  6.  
  7. function movePlayer(player) {
  8.  
  9. var xDistance = player.moveX - player.x;
  10. var yDistance = player.moveY - player.y;
  11. var travelDistance = Math.sqrt((xDistance * xDistance) + (yDistance * yDistance));
  12. var timeToTravel = travelDistance; //This may seem pointless,but I will add a speed variable later
  13. var playerAngle = Math.atan2(yDistance,xDistance) * (180 / Math.PI);
  14. var xRatio = Math.atan2(xDistance,travelDistance);
  15. var yRatio = Math.atan2(yDistance,travelDistance);
  16.  
  17. //This function is called in another part of code that repeats it 60 times a second
  18. walkPlayer = function() {
  19.  
  20. setTimeout(function(){
  21. player.x = player.moveX;
  22. player.y = player.moveY;
  23. selectedPlayer = undefined;
  24. walkPlayer = undefined;
  25. },timeToTravel * 20)
  26.  
  27. player.angle = playerAngle;
  28. player.x += xRatio;
  29. player.y += yRatio;
  30. };
  31. }

我希望这是有道理的,我必须只包含相关代码的一部分.我认为我的问题可能在于xRatio和yRatio部分,但我无法弄明白;我完全难过了.

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

解决方法

Live Demo

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

  1. var tx = targetX - x,ty = targetY - y,dist = Math.sqrt(tx*tx+ty*ty),rad = Math.atan2(ty,tx),angle = rad/Math.PI * 180;;
  2.  
  3. velX = (tx/dist)*thrust;
  4. velY = (ty/dist)*thrust;
  5.  
  6. player.x += velX
  7. player.y += velY

这是我做了一段时间的演示,这听起来像你正在寻找的,我添加了点击的能力,以便根据你的问题改变目标.

  1. window.addEventListener('mouseup',function(e) {
  2. targetX = e.pageX;
  3. targetY = e.pageY;
  4. });
  5.  
  6. 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;
  7.  
  8.  
  9. function draw(){
  10. var tx = targetX - x,angle = rad/Math.PI * 180;;
  11.  
  12. velX = (tx/dist)*thrust;
  13. velY = (ty/dist)*thrust;
  14.  
  15. // stop the Box if its too close so it doesn't just rotate and bounce
  16. if(dist > 1){
  17. x += velX;
  18. y += velY;
  19. }
  20.  
  21. ctx.fillStyle = "#fff";
  22. ctx.clearRect(0,400,400);
  23. ctx.beginPath();
  24. ctx.rect(x,y,10,10);
  25. ctx.closePath();
  26. ctx.fill();
  27.  
  28. ctx.fillStyle = "#ff0";
  29. ctx.beginPath();
  30. ctx.rect(targetX,targetY,10);
  31. ctx.closePath();
  32. ctx.fill();
  33.  
  34. setTimeout(function(){draw()},30);
  35. }
  36.  
  37. draw();

猜你在找的JavaScript相关文章