L'objet en rotation pour faire face pointeur de la souris sur mousemove

J'ai un mousemove curseur dans mon jeu qui va faire mon objet de tirer vers mon curseur de souris. J'aimerais que mon objet tournent toujours à être en ligne avec mon mousecursor. Comment puis-je convertir des X et Y de l'endroit où le curseur est à un degré angle de rotation de mon objet?

J'espère que mon violon va rendre les choses un peu plus clair que ce que je veux dire par la rotation de la joueur(bloc Noir): http://jsfiddle.net/3nEUv/4/

Voici mon mouseMove fonction; Seulement pour s'assurer que le curseur reste dans sa boîte englobante

function mouseMove(e) {
    if (cursor) {
        if (e.rawX && e.rawY) {
            cursorBoundingBox(e.rawX, e.rawY);
        }
    }
}
Si tel n'est pas venu avec une solution avant, je pourrais l'essayer après j'ai regardé certaines choses. Mais j'espère qu'il y a une meilleure solution.

OriginalL'auteur CaptainCarl | 2013-03-27

  1. 47

    Fondamentalement, vous avez besoin pour trouver le vecteur entre le point dans le centre de votre box, et le point du curseur de la souris, puis de calculer l'angle et la convertir en degrés. Ensuite, il suffit d'appliquer l'angle de la via CSS:

    var box=$(".box");
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2];

var angle = Math.atan2(e.pageX - boxCenter[0], - (e.pageY - boxCenter[1]) )*(180/Math.PI);      

box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});    
box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});

    CE

    Ok, nous allons prendre cet appart. C'est ce que nous avons:

    L'objet en rotation pour faire face pointeur de la souris sur mousemove

    Le vecteur AB passe entre le centre de la zone et la position de la souris. Nous sommes allés à calculer Θ (theta), qui est l'angle entre l'axe X et AB.
    Depuis AB crée un triangle avec les axes X et Y, on peut utiliser la fonction Arctan pour le calculer. Plus précisément, nous utilisons la fonction de commodité de Arctan2 qui donne un angle positif quand y>0 et l'angle d'attaque négatif quand y<0.

    atan2 retourne le nombre de degrés dans radians, CSS et fonctionne avec degrés, de sorte que nous convertir entre les deux à l'aide de 180/Math.PI. (Un radian est la mesure d'un angle qui, quand élaboré un angle au centre d'un cercle, intercepte un arc dont la longueur est égale à la longueur du rayon du cercle. - Prises de ici )

    Une dernière mise en garde - Depuis dans le navigateur de l'axe des Y est inversé (ce qui signifie, plus vous descendez dans la page, le plus élevé de la valeur de Y obtient), nous avons eu à inverser l'axe Y: Nous l'avons fait par l'ajout d'un signe sur l'axe terme:

    - (e.pageY - boxCenter[1])

    J'espère que cela aide à clarifier certaines choses...

    Voici un cas isolé jsfiddle exemple

    BTW, Votre jeu est dur! 🙂

    Facile jeux sont pour les gourmands!! :-p je vais le vérifier. Pourriez-vous peut-être préciser certaines des choses que vous faites dans le code? Je ne suis pas un génie en maths donc 😀
    Bien sûr, je vais inclure quelques graphiques illustrant le calcul. Il est vraiment simple de la géométrie 🙂
    Je suppose que je suis en train de faire quelque chose de mal, mais ce n'est pas la façon dont il pivote dans votre exemple; Ce que je fais mal? jsfiddle.net/6TqjC (Mousemove est sur 498)
    Votre boîte de centre de calcul est erroné. Modifier la pos/size à un pos-size, c'est à dire [player.sprite.x/(player.sprite.width/2), player.sprite.y/(player.sprite.height/2)]; à [player.sprite.x-(player.sprite.width/2), player.sprite.y-(player.sprite.height/2)];
    Je voudrais juste souligner pour quelqu'un venant de ce post, comme je l'ai fait. que les Mathématiques.atan2() prend Y comme le premier numéro de X et que le deuxième nombre. Voici le lien developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/...

    OriginalL'auteur OpherV

  2. 2

    J'ai créer un script de rotation de chaque élément html avec le passage de l'angle de rotation.

    Espère que ça aidera 

    function MouseRotate(e, elt) {
  var offset = elt.offset();
  var center_x = (offset.left) + (elt.width() / 2);
  var center_y = (offset.top) + (elt.height() / 2);
  var mouse_x = e.pageX;
  var mouse_y = e.pageY;
  var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
  var degree = (radians * (180 / Math.PI) * -1) + 90;
  $(elt).css('-moz-transform', 'rotate(' + degree + 'deg)');
  $(elt).css('-webkit-transform', 'rotate(' + degree + 'deg)');
  $(elt).css('-o-transform', 'rotate(' + degree + 'deg)');
  $(elt).css('-ms-transform', 'rotate(' + degree + 'deg)');
}

$(document).ready(function() {
  $('#'+tagVal).mousedown(function(e) {
    $(document).bind('mousemove', function(e2) {
      rotateOnMouse(e2,$('#'+tagVal));
    });
  });
  $(document).mouseup(function(e) {
    $(document).unbind('mousemove');
  });
});

    OriginalL'auteur Devdutt Sharma