Soy muy nuevo en la codificación en general y estoy aprendiendo javascript para empezar, así que perdónenme si tengo una idea equivocada sobre algo. He hecho un trabajo bastante bueno hasta ahora al enseñarme los conceptos básicos, pero me he topado con una pared tratando de descubrir cómo detectar varias pulsaciones de teclas a la vez. He visto un par de aproximaciones a esto, pero parece que la idea general es marcar las pulsaciones de teclas en 'keydown' y 'keyup'. El problema es que no puedo entender cómo hacer que mi keyBoard['w'].pressed = true .
const keyBoard = { w: {pressed: false} } document.addEventListener('keyDown', (e) => { keyBoard[e.key].pressed = true }); if(keyBoard['w'].pressed){ alert("success!") }Este es un caso de prueba muy simple que hice para comprender la lógica y, a través de prueba y error, sé que el problema es hacer que mi w.pressed sea verdadero. Sé que necesito agregar un oyente 'keyup' para establecerlo en falso, pero por ahora todo lo que necesito saber cómo hacer es lo que se describe. ¡Gracias!
Solo necesita poner su declaración IF dentro de su función de escucha, Y usar 'keydown' no 'keyDown'. Además, agregué una línea que agrega cada tecla presionada en su objeto.
const keyBoard = { w: { pressed: false } } document.addEventListener('keydown', (e) => { keyBoard[e.key] = keyBoard[e.key] ? ? {} keyBoard[e.key].pressed = true; console.log(keyBoard) if (keyBoard['w'].pressed) { console.log("success!") } });Lo primero es lo primero, el evento que está utilizando tiene un error tipográfico. El nombre propio es keydown , no keyDown . Puede leer sobre esto aquí Documento: evento keydown
Ahora pasando a su código: esta no es la forma en que no funciona, pero esto lo ayudará en el futuro. La función para el listado de eventos está buscando una clave e.key en su objeto keyBoard sin declararlos primero. En JavaScript, esto no es un problema si su JSON no tiene la clave, entonces se agregará. El problema aquí es que está tratando de agregar un valor de true a un atributo pressed en una tecla que no existe. Esto generará un error.
No se pueden establecer propiedades de nulo (configuración 'pulsada')
Para ver esto, presione F12 para abrir la consola en su navegador.
¿Por qué? Bueno, como se mencionó anteriormente, la clave se puede agregar al objeto keyBoard , ¡pero el tipo de esa clave no está definido! cuando haces keyBoard[e.key].pressed = true le estás diciendo al intérprete que el objeto keyBoard tiene un objeto del valor e.key que también es un objeto y tiene una tecla llamada pressed . Debe especificar que lo que sea que entre en keyBoard[e.key] es un objeto. Puedes resolver esto de la siguiente manera:
document.addEventListener('keydown', (e) => { keyBoard[e.key] = keyBoard[e.key] == undefined ? {} : keyBoard[e.key] keyBoard[e.key].pressed = true }); Agregar esa línea adicional especificará que keyBoard[e.key] es un objeto y le permitirá asignar el valor de true al atributo pressed .
Ahora pasando a la solución real:
Todo en su secuencia de comandos se ejecuta justo cuando se carga la página. Esto significa que su declaración if nunca será verdadera porque presionará cualquier tecla después de la carga, en otras palabras, después de que el script ya haya terminado. Si desea que aparezca una alerta cada vez que se presiona w , debe agregarla como parte de la funcionalidad del evento que ya creó. El evento permanecerá vivo incluso después de que el script termine de escuchar las pulsaciones de teclas y ejecute el código que escribió en él. Aquí hay una manera de conseguir lo que quieres. Aparecerá una alerta cada vez que se presione w .
document.addEventListener('keydown', (e) => { if (e.key === 'w') { alert("success") } });Yendo paso a paso a través de tres bloques de su código:
Parece estar bien, pero adjuntar un evento no detiene la ejecución del código hasta que sucede. El hilo principal continúa, por lo que el objeto teclado no se cambia en el tercer paso.
Para que funcione, debe verificar la variable en el bucle, es decir.
setInterval(() => { if (keyBoard['w'].pressed){ alert("success!") } }, 10);pero no es muy necesario en este caso.
La forma correcta es dejar que su código ejecute algún método cada vez que la tecla esté arriba o abajo:
const keyBoard = { w: {pressed: false} } document.addEventListener('keydown', e => { keyBoard[e.key] ||= {}; keyBoard[e.key].pressed = true doImportantStuff(); }); document.addEventListener('keyup', e => { keyBoard[e.key] ||= {}; keyBoard[e.key].pressed = false; // or better `delete keyBoard[e.key];` doImportantStuff(); }); function doImportantStuff() { console.log(Object.entries(keyBoard)); }Si desea mantener SOLO el estado presionado para cada tecla, su código podría ser un poco más simple si omite la propiedad presionada:
const keyBoard = {} document.addEventListener('keydown', e => { keyBoard[e.key] = true doImportantStuff(); }); document.addEventListener('keyup', e => { keyBoard[e.key] = false; // or better `delete keyBoard[e.key]; doImportantStuff(); }); function doImportantStuff() { console.log(Object.keys(keyBoard).filter(key => keyBoard[key])); // console.log(Object.keys(keyBoard)); if you delete keys from keyBoard when they up }