J'essaie de laisser un utilisateur déplacer un élément sur la page à l'aide des touches fléchées. Jusqu'à présent, j'ai un mouvement de travail pour haut / bas / gauche / gauche / droite, mais pas pour diagonale (deux touches fléchées pressées simultanément).
Mon auditeur ressemble à ceci: p>
addEventListener('keydown', function(e){
move = false;
x = false;
y = false;
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
switch(keycode){
case 37:
move = true;
x = 'negative';
//prevent page scroll
e.preventDefault()
break;
case 38:
move = true;
y = 'negative'
//prevent page scroll
e.preventDefault()
break;
case 39:
move = true;
x = 'positive'
//prevent page scroll
e.preventDefault()
break;
case 40:
move = true;
y = 'positive'
//prevent page scroll
e.preventDefault()
break;
}
if(move){
animation.move(x,y);
}
return false;
})
3 Réponses :
Créez un cache temporaire pour mémoriser vos coups de clé. Une implémentation de la manipulation de deux clés suivrait ce motif: Délai raisonnable: expérience de savoir quel délai d'attente suffit pour vous. Lorsque le délai est trop court, le prochain événement initié ne trouvera pas un code de clé entré précédemment. Lorsque le délai est trop long, les coups de clé s'empileront lorsque vous ne le souhaitez pas.
J'ai créé une fonction efficace, en gardant votre code à l'esprit. Vous devriez être capable de le mettre en œuvre très facilement. à la fin de la fonction anonyme, l'écouteur J'ai conçu
Si oui, et combinaison valide:
- Supprimer tous les codes de clé en cache
- exécuter fonction pour cette combinaison de
sinon
- Supprimer tous les codes de clé en cache
- stocker le nouveau code de clé
- Définissez un délai d'arrêt pour effacer les codes clés (voir ci-dessous), avec un délai raisonnable
code
keydown est ajouté. Cet événement n'est tiré qu'une seule fois (lorsque la touche est enfoncée). Lorsqu'une deuxième clé est appuyée assez rapidement, le code reconnaît deux coups de clé après l'autre et appelle keycombi () . keycombi Pour être intelligent et appeler uniquement animation.move (x, y) lorsque les valeurs sont modifiées. En outre, j'ai mis en place la possibilité de faire face à deux directions à la fois. fenêtre ). Si vous ne vous souciez pas de la portée, n'hésitez pas à supprimer la première et la dernière ligne.
Je suis curieux de dire que je devrais supprimer les codes de clé en cache. Je penserais que je voudrais principalement faire cela sur l'événement keyup ? Ou faire des événements de clé à tirer pour tirer tant que les clés sont tenues?
@Chrissobolewski J'ai mis à jour ma réponse. Regardez également le lien du violon pour un exemple en direct.
Wow. Merci! Ceci est assez similaire à celui où j'allais ... Vous êtes certainement allé au-delà de monsieur monsieur.
logiquement cela semble plutôt simple:
Voici votre code pour vous, légèrement révisé ... http: // jsfiddle. NET / W8UNZ / ça marche. Déplace l'élément sur l'élément parent.
rob w a raison, vous devez avoir une cache dynamique des clés enfoncées pendant une période de temps. Mais pour quoi ? Si vous faites un jeu dynamique - il doit y avoir une abstraction beaucoup plus élevée pour cela. Et dans l'ensemble, vous devez améliorer votre niveau de codage si vous voulez faire des choses comme ça. (Ou il va simplement générer des maux de tête pour vous.)