Mover el puntero del mouse a una posición específica?

127

Estoy construyendo un juego HTML5 y estoy tratando de colocar el cursor del mouse sobre un cierto control en un evento específico para que moverse en una dirección específica siempre tenga el mismo resultado. es posible?

Dennkster
fuente
Si entiendo correctamente, desea mover el cursor del mouse usando JS; esto no es posible. Tendrás que encontrar otra forma.
thirtydot
1
HTML5 tiene algunos nuevos eventos de mouse pero nada para mover el mouse. Siempre puedes window.moveBy (x, y); para mover la ventana debajo de donde se encuentra el mouse ... ese sería un juego bastante original :) La única forma en que veo que se hace es a través de ActiveX - ¡ewwww, yuk!
Jeremy Thompson
1
No, JavaScript no le permitirá hacer eso, pero supongo que podría haber una solución alternativa que implique mover la página a una ubicación específica, que también "movería" el cursor, usando la ventana scrollTo () - vea w3Schools en w3schools.com/jsref/met_win_scrollto.asp .
Stardust
1
Buena suerte con mover el mouse en los teléfonos inteligentes.
Cœur
La imagen de un puntero del mouse se puede mover y establecer el cursor: ninguno. No es un riesgo de seguridad porque usted es el programador. Si puedes hacer un juego, también puedes evitar el riesgo de hacer clic en tu cuenta bancaria mientras juegas.

Respuestas:

20

Entonces, sé que este es un tema antiguo, pero primero diré que no es posible. Lo más cercano actualmente es bloquear el mouse en una sola posición y rastrear el cambio en sus x e y. Este concepto ha sido adoptado por Chrome y Firefox. Es administrado por lo que se llama Bloqueo del mouse , y presionar escapar lo romperá. Desde mi breve lectura, creo que la idea es que bloquea el mouse en una ubicación e informa eventos de movimiento similares a los eventos de hacer clic y arrastrar.

Aquí está la documentación de la versión:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

Y aquí hay una demostración bastante ordenada: http://media.tojicode.com/q3bsp/

Codesmith
fuente
Estoy tomando esto como la nueva respuesta aceptada, porque este es exactamente el caso de uso que estaba solicitando, a pesar de que no es compatible con todos los navegadores.
Dennkster
188

No puede mover el puntero del mouse con javascript.

Solo piense en las implicaciones por un segundo, si pudiera;)

  1. El usuario piensa: "oye, me gustaría hacer clic en este enlace"
  2. Javascript mueve el mousecursor a otro enlace
  3. El usuario hace clic en el enlace incorrecto y, sin darse cuenta, descarga malware que formatea su unidad c y se come su dulce
Martin Jespersen
fuente
74
REAL clickjacking.
Licuadora
15
Ahora que lo pienso, esto sería increíble: P
Martin Jespersen
24
Heh, odiaría luchar por el control del cursor de mi mouse.
Blender
78
Una página web puede forzar una descarga sin requerir que nadie haga clic en un enlace, por lo que lo que usted afirma no es realmente un problema de seguridad. Sin embargo, no puede moverse fuera de la ventana de la página web.
dionyziz
11
@dionyziz: Hay una gran diferencia entre la descarga forzada en un entorno limitado y luego la descarga del espacio de usuario iniciada por la interacción del usuario. Las implicaciones de seguridad son en realidad muy grandes.
Martin Jespersen
88
  1. Ejecute un pequeño servidor web en la máquina del cliente. Puede ser una cosa pequeña de 100kb. Un script Python / Perl, etc.
  2. Incluya un pequeño ejecutable C precompilado que pueda mover el mouse.
  3. Ejecútelo como un script CGI a través de una simple llamada http, AJAX, lo que sea, con las coordenadas a las que desea mover el mouse, por ejemplo:

    http://localhost:9876/cgi/mousemover?x=200&y=450

PD: Para cualquier problema, hay cientos de excusas sobre por qué y cómo, no se puede y no se debe hacer, pero en este universo infinito, es realmente una cuestión de determinación, en cuanto a si TÚ Lo hará posible.

Alex Gray
fuente
13
Creo que todos estábamos a bordo hasta que "c ejecutable" ... xD
dGRAMOP
1
un servidor web? tal vez te refieres a un programa con una interfaz http ... sin necesidad de web. El lenguaje de programación Go podría ser ventajoso sobre C, ya que puede facilitar la adición de la parte http, o alternativamente, el intérprete de nodejs ejecutaría un código que también podría incluir una interfaz http con bastante facilidad, ya que el intérprete de nodejs está diseñado para facilitar escribir aplicaciones de servidor.
barlop
3
C = 0 dependencias. La web es http. No linda página de inicio, aquí ... Sólo el transporte.
Alex Gray
+1 para PS. ¿Podemos ejecutar llamadas CGI usando el nodo dev-server o algo similar npmjs.com/package/http-server ?
ATHER
1
¿Alguno de ustedes notó la Javascriptetiqueta debajo de la pregunta?
80

Me imagino que podría lograr colocar el cursor del mouse en un área determinada de la pantalla si no usara el cursor del mouse real (del sistema).

Por ejemplo, podría crear una imagen para actuar en lugar de su cursor, manejar un evento que al detectar el mouseenter en su escena, establecer el estilo en el cursor del sistema en 'none' ( sceneElement.style.cursor = 'none'), y luego abriría un elemento de imagen oculto actuando como cursor para estar en cualquier lugar de la escena en función de una traducción predefinida de eje / cuadro delimitador.

De esta manera, no importa cómo movió el cursor real, su método de traducción mantendría el cursor de la imagen donde lo necesitara.

editar: un ejemplo en jsFiddle usando una representación de imagen y movimiento forzado del mouse

Xaxis
fuente
55
Sí tu puedes. Simplemente establece el estilo del cursor en un elemento dado a 'ninguno'. Darle una oportunidad.
Xaxis
14
Esta es la respuesta más reflexiva. Y en realidad ofrece una solución real, mientras que algunas otras respuestas dot realmente añaden ningún valor :) Pero, ¿cómo van a WebGL que los juegos interesantes como FPS, etc cuando se puede conseguir nada de bloqueo del ratón, que suena bastante limitantes ...
Dennkster
3
Eso todavía tiene el problema de no poder "seguir moviendo" el mouse hacia la izquierda. Una vez que el mouse abandona la página web, no puede seguir controlándolo.
dionyziz
2
Esta es una solución perfecta para este problema. La única razón por la que hay personas quejándose es porque no es una solución trivial. Tienes que hacer algo de programación a veces chicos!
Marty
55
jugué con esta idea e hice un ejemplo en JSFiddle jsfiddle.net/jaakkytt/9uczV
Jaak Kütt
65

Gran pregunta Esto es realmente algo que falta en la API del navegador Javascript. También estoy trabajando en un juego WebGL con mi equipo, y necesitamos esta función. Abrí un problema en el bugzilla de Firefox para que podamos comenzar a hablar sobre la posibilidad de tener una API para permitir el bloqueo del mouse. Esto será útil para todos los desarrolladores de juegos HTML5 / WebGL.

Si lo desea, venga y deje un comentario con sus comentarios, y vote sobre el tema:

https://bugzilla.mozilla.org/show_bug.cgi?id=630979

¡Gracias!

dionyziz
fuente
9
Actualización: bugzilla.mozilla.org/show_bug.cgi?id=633602 y la especificación w3 para el bloqueo del puntero: dvcs.w3.org/hg/pointerlock/raw-file/default/index.html
Chris Anderson el
51
Si esto sucede, dejaré de usar un navegador. :-P En serio, los sitios web simplemente no requieren el tipo de consentimiento que estás dando cuando instalas una aplicación. Esta sería una gran característica si todos fuéramos buenos individuos empleando este nivel de control para mejorar la experiencia del usuario. Desafortunadamente, Internet es un gilipollas central, por lo que hay muchas características realmente buenas que esperamos nunca veamos en un navegador. Dicho esto: la API de pantalla completa funcionaría para "bloquear" el resto del sistema operativo.
Alguien
44
Se solicitará el consentimiento de @Alguien antes de que dicha aplicación sea posible (tal como se solicita ahora el consentimiento a pantalla completa en los navegadores web más populares). Además, el usuario siempre puede revocar el consentimiento presionando la tecla ESC.
dionyziz
77
Está pasando. Y es bastante impresionante (si todavía tiene el prefijo del vendedor): mdn.github.io/pointer-lock-demo
ericsoco
1
@ericsoco Lamentablemente ese enlace está roto. Esto podría ayudar: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Tian van Heerden
46

Puede detectar la posición del puntero del mouse y luego mover la página web (con la posición relativa del cuerpo) para que se desplace sobre lo que desea que hagan clic.

Por ejemplo, puede pegar este código en la página actual en la consola de su navegador (y actualizar después)

var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
    $(this).css({
        position: 'relative',
        left: (event.pageX - upvote_position.left - 22) + 'px',
        top: (event.pageY - upvote_position.top - 35) + 'px'
    });        
});
Amish G
fuente
2
Su publicación sería más valiosa si pudiera publicar un ejemplo de código que lo haga. Además, le sugiero que consulte las preguntas frecuentes: stackoverflow.com/faq
ForceMagic
¿Cómo haces clic en el elemento correcto una vez que el usuario hace clic?
mmm
@momomo Puedes usardocument.getElementByID('thingtoclick').click();
estilo en cascada
1
¡Eso fue totalmente estelar! ¡Manera de pensar fuera de la caja! Dudo que realmente proporcione lo que el interrogador quería, pero tan genial como era, ¿a quién le importa realmente?
gcdev
12

No puede mover un mouse pero puede bloquearlo. Nota: que debe llamar a requestPointerLock en el evento click.

Pequeño ejemplo:

var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();

Documentación y ejemplo de código completo:

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

Dmitry Bosikov
fuente
4

No puede mover el puntero del mouse usando javascript y, por lo tanto, por razones obvias de seguridad. La mejor manera de lograr este efecto sería colocar el control debajo del puntero del mouse.

Sheavi
fuente
1
Las implicaciones de seguridad están lejos de ser obvias. De hecho, las recientes incorporaciones a los estándares introducen esta capacidad sin problemas de seguridad serios.
dionyziz
pero entonces, ¿cómo es posible en la API de arrastrar y soltar?
oldboy
0

¿No podría hacerse esto simplemente obteniendo la posición real del puntero del mouse y luego calculando y compensando las acciones del sprite / escena del mouse basadas en esta compensación?

Por ejemplo, necesita que el puntero del mouse esté en la parte inferior central, pero se encuentra en la parte superior izquierda; ocultar el cursor, usar una imagen de cursor desplazada. Cambie el movimiento del cursor y asigne la entrada del mouse para que coincida con los clics del sprite del cursor reubicado (o 'control') Cuando / si se golpean los límites, vuelva a calcular. Si / cuando el cursor realmente llega al punto que desea que sea, elimine la compensación.

Descargo de responsabilidad, no un desarrollador de juegos.

Eric Shoberg
fuente
idéntico a la respuesta de Xaxis, esencialmente.
mathheadinclouds
@mathheadinclouds de hecho, pero es independiente de la implementación del navegador del bloqueo del mouse. Entonces, esencialmente; pero no. Gracias por tu opinión. - Editado: no importa. Ya veo lo que dices. Supongo que entonces, mi único pensamiento sería, esto aquí no es inútil. Hay más laico en eso, que la respuesta de Xaxis.
Eric Shoberg el
0

Interesante. Esto no es directamente posible por los motivos mencionados anteriormente (clics de spam e inyección de malware), pero considere este truco, que crea una impresión de lo mismo:

Paso 1: Ocultar el cursor

Digamos que tiene un div, puede usar esta propiedad css para ocultar el cursor real:

.your_div {
    cursor: none
}

Paso 2: Introduce un pseudo cursor

Simplemente cree una imagen, un cursor similar, y colóquelo dentro de su página web, con position = 'absolute'.

Paso 3: Rastrea el movimiento real del mouse

Esto es facil. Verifique en Internet cómo obtener la ubicación real del mouse (coordenadas X e Y).

Paso 4: mueve el pseudo cursor

A medida que se mueve el cursor real, mueva su pseudo cursor con la misma diferencia de X e Y. Del mismo modo, siempre puede generar un evento de clic en cualquier ubicación de su página web con javascript magic (solo busque en Internet cómo hacerlo).

Ahora, en este punto, puede controlar el pesudo cursor de la manera que desee, y su usuario tendrá la impresión de que el cursor real se está moviendo.

====

Advertencia justa: no lo hagas. Nadie quiere controlar su cursor o computadora de esta manera, a menos que tenga un caso de uso específico o si está decidido a huir de sus usuarios.

Sanjay Verma
fuente