Bonjour,

Voila je rencontre un petit problème avec mon code.

document.onkeydown = checkKey;
var touche = { 65: false, 90: false }

function checkKey(e) {
    console.log('touche = ' + e.keyCode)

        if(e.keyCode == 65 ) {
            if(e.keyCode == 90) {
                console.log('GG')
            }
        }
}

Quand on presse la touche 'a' puis la touche 'z' normalement le message 'GG' apparait

Je souhaite que le message GG apparaisse

9 réponses


thecedet
Auteur
Réponse acceptée

J'ai trouvé une solution

document.onkeydown = checkKey;
var nombre = 0
var touche = { 65: false, 90: false }

function checkKey(e) {

        if(e.keyCode in touche) {
            // touche[e.keyCode] = true;
            if(e.keyCode == '65' && nombre == 0) {
                nombre = 1
                touche[e.keyCode] = true;
            }else if (e.keyCode == '90' && nombre == 1) {
                nombre = 0
                touche[e.keyCode] = true;
            }else {
                touche = { 65: false, 90: false }
                nombre = 0
            }

        }else {
            touche = { 65: false, 90: false }
        }

        if(touche[65] && touche[90]) {
            console.log('GG')
            touche = { 65: false, 90: false }
        }

}

Si une personne trouve un moyen d'optimiser le code je suis preneur

Yop.

Stock ta combinaison de touche dans un objet.

var mapKeyboard = { 65: false, 90: false } // a + z

Puis l'idée est d'utiliser l'événement

  • keydown pour mettre la valeur de la touche tapée à true et ensuite vérifier si les deux touches leurs valeurs sont à true.
  • keyup pour remettre la valeur de la touche tapée à false.
thecedet
Auteur

Merci de votre réponse,

Je voix pas trop comment je peux utiliser le keyup et l'objet et pour moi si l'utilisateur fait ' a + b + z' la fonction fonctionne

Il faut filtrer les keyCodes avec une condition pour cela tu peux utiliser l'opérateur in. =>>> if(propriété in nomObjet) ici propriété = e.keyCode et nomObjet = mapKeyboard. ^^

thecedet
Auteur

J'avais compris

document.onkeydown = checkKey;
var touche = { 65: false, 90: false }

function checkKey(e) {
    console.log('touche = ' + e.keyCode)

        if(e.keyCode in touche) {
            touche[e.keyCode] = true;
            console.log(touche)
        }else {
            touche = { 65: false, 90: false }
        }

        if(touche[65] && touche[90]) {
            console.log('GG')
            touche = { 65: false, 90: false }
        }

}

Mais mon seul probleme il ne detect pas l'ordre ( ou c'est moi qui vous comprend mal)

thecedet
Auteur

Cela ne marche pas

thecedet
Auteur

Pour que le avoir le message 'GG' il faut avoir la touche 'a' enfoncer et ensuite enfoncer la touche 'z'

Mais je vais chercher avec le indexOf comment faire

thecedet
Auteur

Pardon je me suis mal exprimer je voulais que l'utilisateur appuie sur 'a' puis la relache et apres il appuie sur 'z'

J'ai fait ceci: (Et ne demande qu'à être amélioré :c)

document.addEventListener('keydown', handleKeydown)

var _timeout = 0

var mapsKeyboard = [{
  65: false, // a
  90: false, // z
  call_user_func: userHandleKeydownAZ
}, {
  81: false, // q
  83: false, // s
  68: false, // d
  call_user_func: userHandleKeydownQSD_withDelay,
  delay: 2000 // @param {Boolean|Number} delay -> L'utilisateur a un nombre de secondes, entre chaque touche, pour utiliser les touches.
              //                                  si true = 500 ms par défaut, sinon Number ms ou le comportement par défaut.
              // @example `q` (avant 2 secondes), `s` (avant 2 secondes), `d` (avant 2 secondes) => execute la fonction `call_user_func`
              // @example `q` (avant 2 secondes), `s` (après 2 secondes), `d` (ne fonctionnera pas car `s` a été executé après 2 secondes)
}, {
  87: false, // w
  88: false, // x
  67: false, // c
  86: false, // v
  call_user_func: userHandleKeydownWXCV
}]

function handleKeydown (e) {
  mapsKeyboard.forEach(function (mapKeyboard, index) {
    if (e.keyCode in mapKeyboard) {
      mapKeyboard[e.keyCode] = +new Date()

      if ('call_user_func' in mapKeyboard) {
        var cuf = mapKeyboard.call_user_func(e, mapKeyboard)
        var delay = false
        if ('delay' in mapKeyboard) {
          clearTimeout(_timeout)

          if (typeof mapKeyboard.delay === 'boolean' && mapKeyboard.delay) {
            delay = 500
          } else if (typeof mapKeyboard.delay === 'number') {
            delay = mapKeyboard.delay
          }
        }

        if (delay) {
          _timeout = setTimeout(function () {
            resetKeymap(mapKeyboard)
          }, delay)
        } else {
          if (typeof cuf === 'undefined' || cuf) {
            resetKeymap(mapKeyboard)
          }
        }
      } else {
        console.group('[Debug handleKeydown]')
        console.error("[App error]: la propriété `call_user_func` n'a pas été défini.")

        console.warn(
          '[App debug]:',
          '(' + typeof e.keyCode + ')',
          'TOUCHE',
          e.keyCode
        )

        console.warn(
          '[App debug]:',
          '(' + typeof mapKeyboard + ')',
          'mapsKeyboard[' + index + ']',
          mapKeyboard
        )

        console.groupEnd()
      }
    } else {
      resetKeymap(mapKeyboard)
    }
  })
}

function resetKeymap (mapKeyboard) {
  Object.keys(mapKeyboard).forEach(function (prop) {
    if (!(prop === 'call_user_func' || prop === 'delay')) {
      mapKeyboard[prop] = false
    }
  })
}

/* user */

// Lorsqu'on appuie sur a et z
// 2 touches
function userHandleKeydownAZ (e, mapKeyboard) {
  if (!(mapKeyboard[65] &&
        mapKeyboard[90])) return false

  if (mapKeyboard[65] > mapKeyboard[90]) return false

  console.log('userHandleKeydownAZ')
}

// Lorsqu'on appuie sur q, s et d
// 3 touches
function userHandleKeydownQSD_withDelay (e, mapKeyboard) {
  if (!(mapKeyboard[81] &&
        mapKeyboard[83] &&
        mapKeyboard[68])) return false

  if (mapKeyboard[81] > mapKeyboard[83]) return false
  if (mapKeyboard[83] > mapKeyboard[68]) return false

  console.log('userHandleKeydownQSD_withDelay')
}

// Lorsqu'on appuie sur w, x, c, v
// 4 touches
function userHandleKeydownWXCV (e, mapKeyboard) {
  if (!(mapKeyboard[87] &&
        mapKeyboard[88] &&
        mapKeyboard[67] &&
        mapKeyboard[86])) return false

  if (mapKeyboard[87] > mapKeyboard[88]) return false
  if (mapKeyboard[88] > mapKeyboard[67]) return false
  if (mapKeyboard[67] > mapKeyboard[86]) return false

  console.log('userHandleKeydownWXCV')
}