Déplacez le pointeur de la souris vers une position spécifique?

Je construis un jeu HTML5 et j'essaie de placer le curseur de la souris sur un certain contrôle sur un événement spécifique afin que se déplacer dans une direction spécifique ait toujours le même résultat. Est-ce possible?

Donc, je sais que c'est un vieux sujet, mais je dirai d'abord que ce n'est pas possible. La chose la plus proche actuellement est de verrouiller la souris sur une seule position et de suivre les changements dans ses x et y. Ce concept a été adopté par - on dirait - Chrome et Firefox. Il est géré par ce qu'on appelle le verrouillage de la souris , et frapper la fuite le cassera. D'après ma brève lecture, je pense que l'idée est qu'elle verrouille la souris à un emplacement et signale les événements de mouvement similaires aux événements de clic et de glisser.

Voici la documentation de la version:
FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Chrome: http://www.chromium.org/developers/design-documents/mouse-lock

Et voici une jolie démonstration: http://media.tojicode.com/q3bsp/

Vous ne pouvez pas déplacer le pointeur de la souris avec javascript.

Pensez juste aux implications pendant une seconde, si vous le pouvez;)

1. L'utilisateur pense: "hé, je voudrais cliquer sur ce lien"
2. Javascript déplace le curseur de la souris vers un autre lien
3. L'utilisateur clique sur le mauvais lien et télécharge par inadvertance un logiciel malveillant qui formate son lecteur C et mange ses bonbons

1. Exécutez un petit serveur Web sur l'ordinateur client. Cela peut être une petite chose de 100 Ko. Un script Python / Perl, etc.
2. Inclut un petit exécutable C pré-compilé qui peut déplacer la souris.

3. Exécutez-le comme un script CGI via un simple appel http, AJAX, peu importe - avec les coordonnées vers lesquelles vous voulez déplacer la souris, par exemple:

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

PS: Pour tout problème, il y a des centaines d'excuses pour expliquer pourquoi, et comment - cela ne peut pas et ne devrait pas - être fait. Mais dans cet univers infini, c'est vraiment juste une question de détermination - de savoir si VOUS va y arriver.

J'imagine que vous pourriez réussir à placer le curseur de la souris sur une zone donnée de l'écran si vous n'utilisez pas le véritable curseur de la souris (système).

Par exemple, vous pouvez créer une image pour agir à la place de votre curseur, gérer un événement qui, lors de la détection de l'entrée de la souris dans votre scène, définir le style du curseur système sur `` aucun '' ( sceneElement.style.cursor = 'none'), puis faire apparaître un élément d'image caché agissant en tant que curseur pour être n'importe où dans la scène en fonction d'une translation d'axe / cadre de délimitation prédéfinie.

De cette façon, quelle que soit la façon dont vous avez déplacé le curseur réel, votre méthode de traduction conservera votre curseur d'image là où vous en avez besoin.

edit: un exemple dans jsFiddle utilisant une représentation d'image et un mouvement forcé de la souris

Excellente question. C'est vraiment quelque chose qui manque dans l'API du navigateur Javascript. Je travaille également sur un jeu WebGL avec mon équipe et nous avons besoin de cette fonctionnalité. J'ai ouvert un numéro sur le bugzilla de Firefox afin que nous puissions commencer à parler de la possibilité d'avoir une API pour permettre le verrouillage de la souris. Cela sera utile pour tous les développeurs de jeux HTML5 / WebGL.

Si vous le souhaitez, venez laisser un commentaire avec vos commentaires et évaluez le problème:

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

Merci!

Vous pouvez détecter la position du pointeur de la souris, puis déplacer la page Web (avec la position du corps relative) pour qu'elle survole ce sur quoi vous voulez qu'il clique.

Pour un exemple, vous pouvez coller ce code sur la page actuelle dans la console de votre navigateur (et actualiser par la suite)

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

Vous ne pouvez pas déplacer une souris, mais vous pouvez la verrouiller. Remarque: vous devez appeler requestPointerLock dans l'événement click.

Petit exemple:

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

Documentation et exemple de code complet:

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

Vous ne pouvez pas déplacer le pointeur de la souris en javascript, et donc pour des raisons de sécurité évidentes. La meilleure façon d'obtenir cet effet serait de placer le contrôle sous le pointeur de la souris.

Cela ne pourrait-il pas simplement être fait en obtenant la position réelle du pointeur de la souris, puis en calculant et en compensant les actions de la souris sprite / scène en fonction de cette compensation?

Par exemple, vous avez besoin que le pointeur de la souris soit en bas au centre, mais il se trouve en haut à gauche; cachez le curseur, utilisez une image de curseur décalée. Décalez le mouvement du curseur et mappez l'entrée de la souris pour correspondre aux clics de sprite (ou de «contrôle») de curseur repositionnés. Quand / si des limites sont atteintes, recalculez. Si / quand le curseur atteint réellement le point souhaité, supprimez la compensation.

Avertissement, pas un développeur de jeux.

Intéressant. Ce n'est pas directement possible pour les raisons évoquées précédemment (clics de spam et injection de malware), mais considérez ce hack, qui crée une impression de la même chose:

Étape 1: masquer le curseur

Disons que vous avez un div, vous pouvez utiliser cette propriété css pour masquer le vrai curseur:

.your_div {
    cursor: none
}

Étape 2: Introduisez un pseudo curseur

Créez simplement une image, un curseur similaire, et placez-le dans votre page Web, avec position = 'absolute'.

Étape 3: Suivez le mouvement réel de la souris

C'est facile. Vérifiez sur Internet comment obtenir l'emplacement réel de la souris (coordonnées X et Y).

Étape 4: Déplacez le pseudo curseur

Au fur et à mesure que le curseur se déplace, déplacez votre pseudo-curseur de la même différence X et Y. De même, vous pouvez toujours générer un événement de clic à n'importe quel endroit de votre page Web avec javascript magic (il suffit de rechercher sur Internet pour savoir comment faire).

Maintenant, à ce stade, vous pouvez contrôler le curseur pesudo comme vous le souhaitez, et votre utilisateur aura l'impression que le véritable curseur se déplace.

====

Avertissement juste: ne le faites pas. Personne ne veut que son curseur ou son ordinateur soit contrôlé de cette manière, sauf si vous avez un cas d'utilisation spécifique ou si vous êtes déterminé à fuir vos utilisateurs.