Question

我正在使用Javascript制作HTML5 Canvas游戏。

我想让一个物体顺利转向某个方向。

我将方向存储为变量，并使用弧度。代码的工作原理如下：

＆＃13;

window.setInterval(loop,25);

var dir = 0;
var targetDir = Math.PI/2;

function loop() {
  dir += (targetDir - dir) / 5;
  document.getElementById('text').innerHTML = dir; //To display the direction
}

＆＃13;

<p id='text'></p>

＆＃13;

它大部分时间都可以工作，但是如果方向和目标方向位于相反的左/右侧，计算机将采用最快的方式到达目标，就是这样： (Image)

有没有人知道我可以用来使其正常工作的算法？

Answer 1

希望有人会用优雅的解决方案回答，但我还没有采取任何措施。

我总是发现这个问题的解决方案非常不优雅，说，我不知道是否有更好的方法，也没有我努力找到一个。下面是两个函数，它们将返回从函数Math.atan2(yDif, xDif)派生的两个角度之间的最短方向，该函数返回范围内的角度 - Math.PI到Math.PI

获得最短的指导。

// returns true if shortest direction is clockwise else false
function isShortestDirClockwise(ang1, ang2){
    if (ang1 < 0) {
        if ( (ang2 < 0 && ang1 > ang2) || (ang2 >= 0 && ang1 + Math.PI < ang2) ) {
            return false;        
        }
    } else {
        if ( (ang2 > 0 && ang1 > ang2) || (ang2 <= 0 && ang1 - Math.PI < ang2) ) {
            return false;        
        }
    }
    return true;
}

获得最短的角度

// returns the shortest angle neg angles are counterClockwise positive are clockwise
function getShortestAngle(ang1, ang2){
    var cw = true; // clockwise
    var ang;
    if (ang1 < 0) {
        if( (ang2 < 0 && ang1 > ang2) || (ang2 >= 0 && ang1 + Math.PI < ang2) ) {
            cw = false;        
        }
    } else {
        if ( (ang2 > 0 && ang1 > ang2) || (ang2 <= 0 && ang1 - Math.PI < ang2) ) {
            cw = false;        
        }
    }
    if (cw) {
        var ang = ang2 - ang1;
        if (ang < 0) {
            ang = ang2 + Math.PI * 2 - ang1;
        }
        return ang;
    }
    var ang = ang1 - ang2;
    if (ang < 0) {
        ang = ang1 + Math.PI * 2 - ang2;
    }   
    return -ang;
}

由于我不喜欢使用这些功能，所以我更喜欢下面稍微复杂但更优雅的解决方案。这根据一组3个点找到最短的角度。中心点，以及我希望找到它们之间的角度的两个点，它总是返回任意两条线之间的最短角度。

 // Warning may return NAN if there is no solution (ie one or both points (p1,p2) are at center)
 // Also uses Math.hypot check browser compatibility if you wish to use this function or use Math.sqrt(v1.x * v1.x + v1.y * v1.y) instead
 function getAngleBetween(center, p1, p2){
     var d;
     var ang;
     // get vectors from center to both points
     var v1 = { x : p1.x - center.x, y : p1.y - center.y};
     var v2 = { x : p2.x - center.x, y : p2.y - center.y};
     // normalise both vectors
     d = Math.hypot(v1.x, v1.y);
     v1.x /= d;
     v1.y /= d;
     d = Math.hypot(v2.x, v2.y);
     v2.x /= d;
     v2.y /= d;
     // cross product gets the angle in range -Math.PI / 2 to Math.PI / 2
     ang = Math.asin(v1.x * v2.y - v1.y * v2.x);
     // use the cross product of the line perpendicular to the first to find the quadrant
     if(-v1.y * v2.y - v1.x * v2.x > 0){
         if(ang < 0){
            ang = -Math.PI - ang;
         }else{
            ang = Math.PI - ang;
         }
     }
     return ang;
 }

顺利＆＃39;转动＆＃39;脚本

1 个答案: