javascript - raton - Objeto giratorio para hacer frente al puntero del mouse en mousemove

mover un div con el mouse javascript

Question

Tengo un cursor de mousemove en mi juego que hará que mi objeto se dispare hacia el cursor de mi mouse. Me gustaría que mi objeto siempre gire para estar en línea con mi mousecursor. ¿Cómo puedo convertir la X e Y de donde está el cursor en un ángulo de grado para rotar mi objeto?

Espero que mi violín aclare un poco las cosas a lo que me refiero al rotar al jugador (bloque negro): http://jsfiddle.net/3nEUv/4/

Aquí está mi función mouseMove ahora; Solo asegurándome de que el cursor permanezca en su cuadro delimitador

function mouseMove(e) {
    if (cursor) {
        if (e.rawX && e.rawY) {
            cursorBoundingBox(e.rawX, e.rawY);
        }
    }
}

Answer 1

He creado un guión de rotación para cada elemento html con un ángulo de rotación pasante.

Espero que ayude

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'');
  });
});

Answer 2

Básicamente, necesitas encontrar el vector entre el punto en el centro de tu cuadro y el punto del cursor del mouse, luego calcula el ángulo y conviértelo en grados. Luego solo aplica el ángulo a través de 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)''});

QUÉ

Ok, desmantelemos esto. Esto es lo que tenemos:

El vector AB va entre el centro del cuadro y la posición del mouse. Fuimos a calcular Θ (theta), que es el ángulo entre el eje X y AB. Como AB crea un triángulo con los ejes X e Y, podemos usar la función Arctan para calcularlo. Más precisamente, usamos la función de conveniencia de Arctan2 que da un ángulo positivo cuando y> 0 y ángulo negativo cuando y <0.

atan2 devuelve los grados en radianes , y CSS trabaja con grados , por lo que convertimos entre los dos usando 180/Math.PI (Un radián es la medida de un ángulo que, cuando se dibuja un ángulo central de un círculo, intercepta un arco cuya longitud es igual a la longitud del radio del círculo. - Tomado de aquí )

Una última advertencia: como en el navegador, el eje Y está invertido (es decir, cuanto más abajo vaya en la página, más alto es el valor Y), tuvimos que voltear el eje Y: lo hicimos al agregar un signo menos en el término Y:

- (e.pageY - boxCenter[1])

Espero que esto ayude a aclarar algunas cosas ...

Aquí hay un ejemplo aislado de jsfiddle

Por cierto, ¡tu juego es difícil! :)