jQuery - comment se déplacer dans la figure coordinationsystem

Question

permet de dire que j'ai ce code:

<div id="gameFrame"> 
    <div id="figure"></div> 
</div> 

Lorsque le chiffre est div permet de dire une image d'une figure. Comment puis-je utiliser jQuery pour déplacer la figurine à l'intérieur du gameFrame avec les touches du clavier à gauche et à droite?

Answer 1

À l'exception de l'utilisation du clavier, ce que vous essayez de faire a déjà été fait dans le module jQuery Draggable: http://jqueryui.com/demos/draggable/#default. Vous pourriez être en mesure d'utiliser ce qu'ils ont fait leur comme point de départ. Le code réel est ici: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.draggable.js. L'inconvénient est que vous devrez peut-être déployer des efforts considérables pour étendre/modifier le code, et cela dépendra probablement encore d'un autre code jQuery.

Ensuite, vous pourriez probablement fouetter quelque chose dans une fraction de la taille du code jQuery. Mais, je pensais que je posterais ceci au cas où personne d'autre ne changerait quelque chose.

Si vous voulez faire vous-même, le processus général serait:

1. Wrap l'élément que vous souhaitez déplacer dans un récipient (comme un autre div) et définir la position à l'aide de CSS relatif.
2. événements clavier Bind pour les touches fléchées
3. Lorsqu'une touche est enfoncée, modifier le positionnement de l'élément pour le déplacer (les attributs CSS comme left et top)

Answer 2

j'ai trouvé un site Web où ils ont codé un exemple. Je cherche en maintenant et l'utiliser :)

http://atomicrobotdesign.com/blog_media/canvas_move.html

Answer 3

Jetez un oeil à mon demo:

$(document).keydown(function(e){ 
    // Left 
    if (e.keyCode == 37) { 
     $("#moveMe").animate({marginLeft: "-=100px"}, {queue:false}); 
     return false; 
    } 
    // Top 
    if (e.keyCode == 38) { 
     $("#moveMe").animate({marginTop: "-=100px"}, {queue:false}); 
     return false; 
    } 
    // Right 
    if (e.keyCode == 39) { 
     $("#moveMe").animate({marginLeft: "+=100px"}, {queue:false}); 
     return false; 
    } 
    // Bottom 
    if (e.keyCode == 40) { 
     $("#moveMe").animate({marginTop: "+=100px"}, {queue:false}); 
     return false; 
    } 
}); 

Dans votre cas, vous devez vérifier les limites après chaque déplacement, donc la figurine ne sort pas du cadre.