Capturando eventos del teclado "keystrokes" es el tipo de interacción más potente que tienes a tu disposición. Puedes tener control total (casi) de cualquier tecla "key" que ha sido presionada o soltada. Nota: Netscape no incluyó la habilidad de capturar eventos de Keystrokes dentro de las Versiones UNIX del Comunicador 4.0. Si planeas en utilizar Keystrokes en un juego de JavaScript este no podrá ser jugado en ninguna de las versiones de UNIX incluyendo Linux.
La primera cosa es que tienes que comprender es de como iniciar eventos. Aquí hay una utilización básica para el evento "onkeydown"
document.onkeydown = keyDown
Cuando este código es leído por el browser este sabrá si una tecla es presionada, la función keyDown() será llamada. No importa cual función tú llamas, y el código no necesita los paréntesis después del nombre de la función.
Para capturar cual tecla fue presionada funciona un poco diferente entre los browsers. Así que te mostrare cada uno individualmente.
Netscape es un poquito más dificultoso que IE es con respecto al controlador de eventos. Tienes que incluir una línea extra para decirle a Netscape que siempre chequee por el evento keydown. Si no tienes esta línea, causará problemas cuando otros eventos como mousedown ocurran.
document.onkeydown = keyDown if (ns4) document.captureEvents(Event.KEYDOWN)
Tu keyDown() tiene que pasar un variable escondido - Utilizare la letra "e" porque esa es la que es utilizada comúnmente.
function keyDown(e)
La letra "e" representa la key que ha sido justamente presionada. Para saber cual key es esa, podrás utilizar la propiedad which:
e.which
Esto te dará el código índice para el key - no que letra o número fue presionado. Para convertir el índice para saber el valor de la letra o el número, tienes que utilizar:
String.fromCharCode(e.which)
Entonces poniendo todo junto, podemos hacer una función que mostrará un mensaje diciendo el código del key y los valores reales de la key que fue presionada:
function keyDown(e) {
var keycode = e.which
var realkey = String.fromCharCode(e.which)
alert("keycode: " + keycode + "\nrealkey: " + realkey)
}
document.onkeydown = keyDown
document.captureEvents(Event.KEYDOWN)
Ver este ejemplo (solo en Netscape )
En lugar de utilizar e.which, tienes que usar window.event.keyCode.
Y la conversion del real valor del key es el mismo: String.fromCharCode(event.keyCode).
function keyDown() {
var keycode = event.keyCode
var realkey = String.fromCharCode(event.keyCode)
alert("keycode: " + keycode + "\nrealkey: " + realkey)
}
document.onkeydown = keyDown
document.onkeydown = keyDown
Ver este ejemplo (Solo en Internet Explorer )
Ahora, se desearas abrir los dos browsers y comparar los ejemplos, verás que los resultados no son siempre los mismos. Los códigos de teclado (keycode) son diferentes porque cada browser utiliza un set de carácteres diferente Ya que esto es así tendrás que siempre hacer códigos separados para cada uno de los browsers - no hay otra forma.
Lo que yo sugiero es de olvidar totalmente sobre los valores reales del teclado, y solo trabajar con los códigos de teclado. El siguiente pedazo de código asignara nKey al código del teclado y ieKey un 0 si estas utilizando Netscape o esta fijara ieKey al código del teclado y nKey un 0 si estas utilizando Internet Explorer. Entonces mostrará una advertencia de los dos valores:
function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
alert("nKey:"+nKey+" ieKey:" + ieKey)
}
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
Ahora a lo bueno....
Ahora podrás activar las funciones de tus movimientos con el teclado. Tienes que hacer un chequeo de cual tecla fue presionada y luego la función apropiada para mover tu objeto. Para el siguiente ejemplo he utilizado la tecla "A" para iniciar una función de deslizar. Para la tecla "A", el valor nKey es 97, y la ieKey es 65. Entonces hago un chequeo para esos valores para llamar la función deslizar "slide"
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
}
function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if (nKey==97 || ieKey==65) { // if "A" key is pressed
slide()
}
}
function slide() {
block.xpos += 5
block.left = block.xpos
status = block.xpos // not needed, just for show
setTimeout("slide()",30)
}
El último script es de alguna manera limitada. Después que el movimiento ha sido comenzado, no hay forma de pararlo, y si presionas la tecla bastantes veces esta se moverá mucho más ligero y ligero. Entonces tendremos que arreglar eso.
He desarrollado una técnica utilizando lo que yo llamo variables activos para representar el estado actual del movimiento…. Sé esta moviendo? O no sé esta moviendo? Una vez que hayas comenzado a trabajar con ellas, podrán ser bastante útiles. Porque casi todas las funciones del movimiento son repetidas (loops), no tienen una forma de ser paradas, y es allí donde los variables activos son útiles. Con insertar el apropiado "if" informe dentro de la función deslizar "slide", podrás tener control de que esa función se repita o no. Usualmente tienes que hacer la función como esta:
function slide() {
if (myobj.active) {
myobj.xpos += 5
myojb.left = myobj.xpos
setTimeout("slide()",30)
}
}
En este caso, la función slide() operará solamente cuando el valor myobj.active es verdadera true. Una vez que hayas fijado myobj.active a falso false el movimiento de la función parará. Teniendo conocimiento de esto, podremos insertar algún código dentro de nuestro script el cual nos dará más control de lo que esta pasando.
En el evento onkeyup funciona exactamente de la misma forma que le de onkeydown. Puedes iniciar los dos keydown y keyup con lo siguiente:
document.onkeydown = keyDown document.onkeyup = keyUp if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
Y la función keyUp() es lo mismo también. Pero queremos hacer que cuando la tecla está soltada, parará cualquier movimiento que se esta usando en el momento. Para hacer esto podemos fijar el variable de block a 0:
function keyUp(e) {
if (ns4) var nKey = e.which
if (ie4) var ieKey = window.event.keyCode
if (nKey==97 || ieKey==65) block.active = false
}
Pero para estar seguros de no tener "error" en nuestro código, tenemos que poner algunos chequeos en otras funciones. Mira al código que se encuentra abajo y ve si comprendes lo que estoy haciendo. La función keyDown, él && !block.active es para estar seguro de que solamente llamaremos a la función si el block no esta activo. En otras palabras, si el block sé esta moviendo no ejecutamos otra vez la función slide(). Entonces fijamos el valor activo al verdadero y movemos el block. La función slide() tiene el informe if (block.active) así que solo se mueve cuando el valor de block.active es verdad - de esa forma cuando soltamos una tecla parará de ejecutar.
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.active = false
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
}
function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed
block.active = true
slide()
}
}
function keyUp(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if (nKey==97 || ieKey==65) {
block.active = false // if "A" key is released
}
}
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
status = block.xpos // not needed, just for show
setTimeout("slide()",30)
}
}
Como he mencionado anteriormente, los sets de carácteres en Netscape y en Internet Explorer son diferentes. En general, todas las letras, números, símbolos, espacio y Enter funcionaran bien. Una forma ligera de saber los valores de unas teclas particulares en nKey y ieKey puedes observar mi nKey and ieKey Finder
Aquí se encuentran algunas demostraciones de "huesos" que enseña como en un ambiente de juego se pueden utilizar estas técnicas:
| Casa | Próxima Lección: Recortando Capas |