Javascript - Как сделать объект прямо перед другим?

Question

Я пытаюсь закодировать часть рта, которая останется прямо в начале растрового изображения, но должна быть отдельным объектом.

В настоящее время мой код выглядит следующим образом:

// LOCATION: 
    var xDistance = stage.getStage().mouseX - player.x; 
    var yDistance = stage.getStage().mouseY - player.y; 
    var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance); 
    var x = player.x += xDistance * easingAmount; 
    var y = player.y += yDistance * easingAmount; 

    if (distance > 1) { 
    player.x += xDistance * easingAmount; 
    player.y += yDistance * easingAmount; 
    } 

    // ROTATION: 
    var degrees = (Math.atan2(yDistance, xDistance) * 180/Math.PI) - 90; 
    if(degrees >= 360) { 
    degrees -= 360; 
    } 

    player.rotation = degrees; 
    stage.update(); 

Очевидно, используя следующий код поместит й и у значения рта -50 в направлении игрока, но это работает только на 1-м направления вместо удержания рта перед игроком:

mouth.x = player.x - 50; 
    mouth.y = player.y - 50; 

Мне было интересно, может ли кто-нибудь помочь мне с этой математикой? Я был бы очень признателен. Вот 2 изображений, чтобы лучше объяснить вещи:

Answer 1

Я думаю, что лучшее решение для вас, это также поможет вам в будущем, является первым получить твердую испытанный вектор библиотеку сделайте все эти расчеты для вас. Например, вы можете попробовать этот http://victorjs.org/, который выглядит хорошо (не пробовал сам, хотя).

После того как вы векторы работать, алгоритм достаточно прост:

1. Получить направление вашего игрока как угол или радиан.
2. Создайте вектор из этого угла.
3. Умножьте этот вектор на нужное расстояние.
4. Позиция рта, или другой части, является положением игрока + вектора.

С victorjs это было бы что-то вроде этого (не проверено):

// who the hell calls his "Vector" class "Victor"? alias it. 
var Vector = Victor; 

// create the vector from player angle (assume player_angle is defined somewhere) 
var v = new Vector(1, 0); 
v = v.rotateDeg(player_angle); 

// multiply by desired distance, assume its 20 pixels 
v = v.multiply(new Vector(20, 20)); 

// now calc mouth position (assume player_pos is defined before) 
var mouth_pos = player_pos.add(mouth_pos); 

Answer 2

@ решение НСС должно работать нормально. Однако, если вы хотите избежать внешних зависимостей, может работать следующее. Определим вектор рот:

mouth.x = 50; 
mouth.y = 0; // The mouth is the distance 50 away from the player. 
      // Assuming that a non-rotated player points in the x- 
      // direction 
rotateVector(mouth, player.rotation); 

И вы можете определить rotateVector, как (см wikipedia)

function rotateVector(var vec, var degrees) { 
    var output; // of vector type 
    output.x = cos(degrees)*vec.x - sin(degrees)*vec.y; 
    output.y = sin(degrees)*vec.x + cos(degrees)*vec.y; 
    return output; 
} 

Мировое пространство положение рта теперь

mouthWorldSpace = player.position + mouth.position; // (i.e. just add the vectors together) 

Это положение что нужно рисовать растровое изображение.