Comment puis-je détecter les touches enfoncées simultanément dans les jeux JavaScript ?

Comment détecter plusieurs touches enfoncées simultanément en JavaScript

Énoncé du problème

Dans un moteur de jeu JavaScript, la fonctionnalité de saut est déclenchée en appuyant sur la touche Espace , tandis que le mouvement vers la droite est déclenché en appuyant sur la touche fléchée droite. Le problème survient lorsqu'un utilisateur appuie sur la touche fléchée droite, puis sur la touche Espace. Dans ce scénario, le personnage saute et s'arrête de bouger. L'objectif est de déterminer si plusieurs touches sont enfoncées simultanément pour gérer ces scénarios efficacement.

Solution

Pour détecter plusieurs frappes, nous pouvons utiliser la Fonction d'écoute d'événement :

onkeydown = onkeyup = function(event) {
  // event object contains information about the key pressed
  const key = event.keyCode; // Use event.key for modern browsers (more reliable)
  // map stores the pressed keys and their current states (true/false)
  const map[key] = event.type == "keydown";
};

Cet extrait de code configure les écouteurs d'événements keydown et keyup. Lorsqu'une touche est enfoncée, son code clé est enregistré dans l'objet cartographique avec son état (vrai pour enfoncée, faux pour relâchée).

Vérification des combinaisons de touches

Pour vérifier plusieurs touches enfoncées simultanément , nous pouvons utiliser la logique conditionnelle :

if (map[key1] && map[key2] && map[key3]) {
  // Do something when all three keys are pressed
}

Cette approche permet une détection complète des combinaisons de touches.

Supplémentaire Considérations

• Paramètres par défaut du navigateur : Certains navigateurs ont des actions par défaut pour certaines combinaisons de touches (par exemple, Ctrl D pour les signets). Pour éviter les conflits, c'est une bonne pratique d'utiliser event.preventDefault() pour arrêter l'action par défaut.
• Dépréciation d'Event.keyCode : dans les navigateurs modernes, event.key doit être utilisé à la place de event.keyCode, qui est obsolète.
• Utilisation de return false; : return false; peut être utilisée pour empêcher la propagation des événements et le comportement par défaut de la pression sur une touche, mais cette approche peut avoir des conséquences inattendues.
• Gestionnaires d'événements : envisagez d'utiliser addEventListener sur les propriétés .onevent pour une gestion plus fluide des événements et comportement prévisible.
• Classes d'assistance : les classes d'assistance personnalisées peuvent simplifier la tâche de gestion des touches États et définition de points de surveillance pour des combinaisons de touches spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!