Eventi di Tastiera

Sentire quali tasti vengono premuti è il tipo di interazione più potente che voi avete a vostra disposizione. Potete avere il totale controllo su qualsiasi (o quasi) tasto che venga premuto o rilasciato. Notate però che Netscape non include l'abililtà di sentire gli eventi di tastiera nella versione 4.0 per Unix se state pensando a un gioco in JavaScript che faccia uso della tastiera esso non funzionerà in nessuna versione di Unix incluso Linux ??????????.

La prima cosa che dovete capire è come inizializzare i vostri eventi. Qui c'è l'inizializzazione di base per l'evento "onkeydown".

document.onkeydown = keyDown
Quando questo codice viene letto il browser richiamerà la funzion keyDown() ogniqualvolta un tasto venga premuto, non importa quale funzione richiamerete e il codice non necessita di parentesi dopo il nome funzione.

Capire quale dei tasti sia stato premuto risulta leggermente differente nei due browser. Così esaminerò i due codici in due paragrafi distinti.

Netscape

Netscape è un po' più accattivante rispetto a IE nel maneggiare gli eventi. Dovete mettere una riga in più per dire a Netscape di controllare sempre l'evento di tastiera. Se non metterete questa riga il browser pasticcerà quando altri eventi, come quelli del mouse accadranno.
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
La vostra funzione keyDown() deve fornire una variabile nascosta - io userò la lettera "e" poiché e questa quella che viene comunemente usata.
function keyDown(e)
Questa "e" rappresenta la chiave che è stata appena premuta. Per capire quale chiave essa sia potete usare la proprietà which:
e.which
Questa darà il codice per il tasto - non quale lettera o numero sia stato premuto. Per convertire l'indice in una lettera o valore numerico, userete:
String.fromCharCode(e.which)
Così mettendo tutto insieme possiamo scrivere una funzione che scriva un messaggio recante il codice del tasto e il reale vaolore in codice del tasto che è stato appena premuto:
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)
Osservate questo esempio (solo per Netscape)

Internet ExplorerIE lavora in modo simile eccettuato il fatto che non dovete fornire il valore "e".

Anziché utilizzare e.which, userete window.event.keyCode.

E la conversione al reale valore del tasto è lo stesso: 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
Osservate questo esempio (solo per Internet Explorer)

Metterli Tutti e Due Insieme

Ora se voi doveste aprirli tutti e due nell'altro browser scorpireste che i risultati non sono sempre uguali. Le codifiche della tastiera sono differenti poiché ogni browser utilizza un set di caratteri differente. Per questo motivo dovrete sempre costruire codici separati per ciascun browser, non c'è modo per aggirare l'ostacolo.

Ciò che io suggerirei è di dimenticarsi totalmente dei valori reali dei tasti e di lavorare solo con i codici. Il seguente codice assegnerà nKey al keycode e a ieKey a 0 se state lavorando con Netscape oppure ieKey al codice e nKey a 0 se state utilizzando Internet Explorer. Quindi mostra una finestra di avvertimento di entrambi i valori:

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)
Osservate questo esempio

Ora le cose ben fatte....

Muovere gli Elementi con la Tastiera

Adesso potete attivare le funzioni del movimento dalla tasstiera. Controllate quale chiave è stata premuta, e quindi richiamate la funzione appropiata per muovere il vostro oggetto. Per il seguente esempio io uso la "A" per avviare  la funzione di scivolamento. per la "A" key, il valore della nKey è 97, e il valore della ieKey è 65. Cosicché io controllo questi valori per chiamare la funzione di "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) {   // se viene premuta una "A" key
                slide()
        }
}

function slide() {
        block.xpos += 5
        block.left = block.xpos
        status = block.xpos       // non necessaria se viene solamente mostrata
        setTimeout("slide()",30)
}
Osservate questo esempio

Capire le variabili "Attive"

L'ulitmo script è alquanto limitato. Dopo che è iniziato il moviemnto, non c'è modo per fermarlo, e se premete parecchie volte il tasto si muove sempre più velocemente. Dovremo aggiustarlo.

Ho sviluppato una tecnica che usa delle variabili "attive" pr rappresentare l'attuale stato del movimento... si sta muovendo? non si sta muovendo? Una volta che avrete imparato a lavorarci su diventeranno molto utili. Poiché la maggior parte delle funzioni che regolano il movimento sono ricorsive non hanno un modo per fermarsi e qui entrano in azione le variabili attive. Inserendo l'"if" appropriata nella funzione di slide, voi potete controllare se quella funzione verrà ripetuta o no. Di solito la funzione viene così costruita:

function slide() {
        if (myobj.active) {
                myobj.xpos += 5
                myojb.left = myobj.xpos
                setTimeout("slide()",30)
        }
}
In questo caso ,  la funzione slide() sarà operativa solamente quando il valore di myobj.active e true. Una volta posto il valore di myobj.active a false la funzione del movimento terminerà. Sapendo questo, possiamo inserire qualche riga di codice nel nostro script che ci permetterà un maggiore controllo di che cosa sta accadendo.

Usare onKeyUp e le Variabili "Attive"

l'evento onkeyup (tasto sollevato) si comporta esattamnete allo stesso modo di onkeydown. potete inizializzare sia keydown sia keyup con il seguente:
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
La funzione keyUp() rimane pure uguale. Ma noi vogliamo fare in modo che l'oggetto si arresti quando rilasciamo il tasto. per farlo possiamo porre la variabile attiva del nostro 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
}
Per salvaguardare totalmente il nostro codice da "errori", dobbiamo stabilire alcuni punti di controllo nelle altre funzioni. Osservate il codice qua sotto e cercate di capire quel che sto facendo.Nella funzione keyDown, la && !block.active ci assicura che noi stiamo attivando solamente la funzione se block non è attivo. In parole povere se block si sta muovendo non eseguiamo di nuovo la funzione slide(). Quindo poniamo il valore attivo a true e spostiamo block. La funzione slide() ha la if (block.active) cosicché si muove solamnete quando il valore di block.active è true - in questo modo quando rilasciamo il tasto fermerà l'esecuzione.
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)
        }
}
Osservate questo esempio

Quali Tasti posso usare?

Come detto precedentemente, i set di caratteri di Netscape e di Internet Explorer sono differenti. In generale, tutte le lettere, i numeri, simboli, lo Spazio e Invioandranno bene. Per avere un modo veloce per sapere i valori di nKey e ieKey di un particolare tasto potete utilizzare il mio nKey e ieKey Finder.

Tastierini di Gioco

Qui ci sono alcuni demo di base che mostrano come un ambiente di gioco può essere strutturato mediante queste tecniche:  
Home Prossima Lezione: Controlli Audio
copyright 1998 Dan Steinman