Открыть мобильное меню

Угол между двумя точками или объект повёрнут к цели.

Часто в играх и различных приложениях необходимо добиться того, чтобы объект был повёрнут к определённой точке — цели.

В примере, реализованном на html5 с использованием canvas, можно курсором перетаскивать либо стрелку либо цель в разные места, но указатель будет всегда направлена в нужную сторону.

Преимущество html5 естественно в том что для его отображения нужен только javascript что даёт большое преимущество перед flash технологией в плане кроссбраузерности, не говоря уже о том, что на все плагины ругаются оптимизаторы.

Заставить объект смотреть на цель достаточно просто. Необходимо узнать углы между двумя точками и определить их место положение друг относительно друга.

В данном примере я создал два MovieClip (во Flash Animate интерфейс и названия остались такие же, как для работы с swf форматом так и для html5 canvas) с именем "pointA" и "pointB", стрелка и цель соответственно.

В роли фона прозрачный (Alpha 1%) bg. Интересно, что если альфа канал сделать 0% то он исчезает при компиляции из проекта.

var sPointA      = this.pointA;
var sPointB      = this.pointB;
sPointA.rotation = calculateAngle();

this.bg.on("click", function(e){
    setTo(sPointB, e.stageX, e.stageY);
    sPointA.rotation = calculateAngle();
});

this.pointA.on("pressmove", function(e) {
    setTo(e.target.parent, e.stageX, e.stageY);
});

this.pointB.on("pressmove", function(e) {
    setTo(e.target.parent, e.stageX, e.stageY);
});

function setTo(obj, posX, posY){
    obj.x = posX;
    obj.y = posY;
    sPointA.rotation = calculateAngle();
}

function calculateAngle() {
  var x1 = sPointA.x;
  var y1 = sPointA.y;
  var x2 = sPointB.x;
  var y2 = sPointB.y;

  //Получаем расстояние между точками
  var dis = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));

  //Узнаём угол в градусах
  var angl = Math.round(Math.acos((y1 - y2) / dis) / Math.PI * 180);

  //Если точка мишень слева
  if ((x1 - x2 > 0 && y1 - y2 < 0) || (x1 - x2 > 0 && y1 - y2 > 0)) {
      angl = 180 + (180 - angl);
  }
  return angl;
}