Événements clés qui se chevauchent

Question

Je travaille sur un petit projet HTML / JavaScript / CSS3 pour le plaisir. J'essaie essentiellement de faire une roue qui roule dans la fenêtre du navigateur. Pour contrôler la roue, j'utilise des événements de clé et de clé pour les touches de curseur (à gauche et à droite, tournez la roue et de haut en bas, faites-la en avant ou en arrière).

Je dois travailler assez bien jusqu'à présent, mais il y a deux problèmes majeurs. Disons que je veux rouler le roue en avant et sans arrêter, je veux le transformer un peu à droite, puis je maintiens la touche UP enfoncée et appuyez sur la touche de curseur droite. Quand je le fais, il y a une pause dans le mouvement avant qu'il enregistre les deux événements et continue de rouler.

C'est l'un des problèmes, le problème principal est que, une fois que j'ai effectué l'action précédente, puis une roue est à un angle souhaitable, si je laisse aller de la clé de curseur droit, le navigateur enregistre les deux clés telles que libérées et la roue vient sur un stand toujours. Voici un jsfiddle de ce à quoi on dirait:

Answer 1

Ainsi, ce qui se passe est essentiellement une limitation intégrée par votre système d'exploitation, mais il existe un simple travail. D'abord, je vais expliquer la limitation, puis le travail autour.

Si vous deviez (dans une zone de texte), appuyez sur le bouton « j », premier « j » apparaît, puis après un court délai beaucoup « j » s apparaîtraient « jjjjjjjjjjjjjjjjjjjj »

C'est le même problème de votre expérience. L'événement incendie une fois, attend un instant, puis tire beaucoup plus de fois.

La solution, cependant est simple. Au lieu d'avoir votre émission de roue lorsque les événements sont tirés ... Faites-le mettre à jour constamment et gardez séparément la trace de quelles clés sont en hausse ou en bas.

Le gestionnaire de clé ressemblerait à quelque chose comme ça ...

function KeyHandler() {
  this.left = false;
  this.right= false;
  ...
  function onKeyDown(e) {
    if (e.keyCode == 37) {
      this.left = true;
    }
    ...
  }
  function onKeyUp(e) {
    if (e.keyCode == 37) {
      this.left = false;
    }
    ...
  }
}

(vous attachez le gestionnaire de clé au corps ou quel que soit l'élément que vous souhaitez)

Votre roue aurait une fonction de mise à jour ressemblant à ...

wheel.update = function() {
  // the wheel is turning left
  if (wheel.keyhandler.left) {
    // make the appropriate adjustments
  }
}

Et puis le jeu aurait quelque chose comme ça ...

wheel = new Wheel;
setInterval(function() {
  wheel.update();
},100);

De cette façon, votre roue sera toujours mise à jour en fonction de l'état actuel des clés, et vous ne devrez pas compter sur les limitations des événements qui tirent. :)

Answer 2

Voici un extrait d'un jeu simple, j'ai écrit une fois

//key codes
var KEY_LEFT = 37;
var KEY_RIGHT = 39;
var KEY_A = 65;
var KEY_D = 68;
var KEY_SPACE = 32;

var keys = {};

function onKeyDown(e)
{
    e = e || window.event;
    var key = window.event.keyCode || e.which; // ie

    keys[key] = true;
}

function onKeyUp(e)
{
    var key = window.event.keyCode || e.which; // ie

    delete keys[key];
}

Ceci garde une trace de tous les états clés actuels.Ensuite, votre jeu "Tick" est sur un paramètre () plutôt que de vous déplacer sur des événements clés et des vérifications pour les clés appropriées.

function gameTick()
{
    // update paddle angles
if (keys[KEY_LEFT])
    {
        // move left
    }

if (keys[KEY_RIGHT])
    {
        // move right
    }
}

ici est le jeu;

Answer 3

Le problème que vous êtes confronté est parce que votre code est censé détecter une touche unique, appuyez sur pendant que votre jeu a besoin de 2 touches de détection de presse.

Mettez cette ligne en boucle sur la taille de e.Cela définira toutes les touches pressées comme 1. Actuellement, sa détection d'une seule touche appuyez sur une touche et un traitement pour une à la fois.

keys[e.keyCode] = 1;

Vérifiez ce fil et vous pourriez obtenir ce dont vous avez besoin.Bien que sa jQuery, cela pourrait aider conceptuellement.m y travaille aussi avec JS ... si quelque chose de nouveau se présente partagera ...

Détecter plusieurs clés sur un seul événement à clé à clavier dans JQuery

Votre code et votre concept est cool si vous êtes vraiment un mois en programmation.