Divertirsi con JavaScript: jQuery ed il Codice Konami

Oggi faremo tutti un piccolo salto indietro nel tempo, fino al 1985, quando uno sviluppatore della Konami (Kazuhisa Hashimoto) creò la prima versione di Gradius (un videogioco per la console NES). Durante le prove del gioco, Kazuhisa, si accorse che era davvero difficile completarlo, e quindi creò un codice, il quale dava al giocatore tutte le migliorie possibili.

Sono ormai diversi i siti web che integrano il codice konami, e tra questi troviamo www.jquery.com, www.damnyeah.de, www.cssline.com e tanti altri..

Konami Code

Il Codice Konami (Konami Code, conosciuto anche come Konami Command o Contra Code) è un trucco che può essere usato in molti videogiochi della famosissima Konami Corporation, che normalmente attiva qualche opzione segreta.

La combinazione di tasti originali del Konami Code è la seguente:

↑  ↑ ↓ ↓ ← → ← → B A

Per questo articolo ho creato due piccoli esempio che potete raggiungere cliccando i seguenti links:
esempio 1
esempio 2

Il codice

Implementare il Konami Code nei nostri siti internet e molto facile, tutto ciò di cui abbiamo bisogno per utilizzare l’effetto Konami Code è l’ultima versione di jQuery ed una pagina html.

$(document).ready(function(){
    var keys     = [];
    var konami  = '38,38,40,40,37,39,37,39,66,65';
    [...]
});

Esaminando il codice precendente notiamo che tutto il funzionamento è stato inserito all’interno del metodo ready() di jQuery, il quale si occuperà di eseguirlo, appena il DOM HTML sarà pronto.

Possiamo notare la creazione di un’array e di una stringa:

  1. keys
    utilizzeremo questo array per memorizzare al suo interno la sequenza di tasti digitata dall’utente
  2. konami
    questa stringa contiene la sequenza corretta del konami code.

In JavaScript ad ogni tasto premuto corrisponde un numero, infatti i numeri contenuti nell’array konami non sono altro che la corrispondenza numerica dei tasti del Konami Code:

↑ ↑ ↓ ↓ ← → ← → B  A
$(document).ready(function(){
    var keys     = [];
    var konami  = '38,38,40,40,37,39,37,39,66,65';

   $(document)
        .keydown(
            function(e) {
                [...]
            }
        );
});

Ora dobbiamo creare una funzione che “si attivi” ogni volta che viene premuto un tasto, per farlo utilizzeremo il metodo keydown() di jQuery.
Questo metodo ci permette di eseguire una funzione ogni qual volta venga premuto un tasto dall’utente, inoltre viene passato un parametro alla funzione (con il nome di ‘e’).
Il parametro passato alla funzione è un oggetto che contiene tutte le informazioni sull’evento, in questo caso la pressione di un tasto.

Esaminiamo ora il resto della funzione:

[...]
   $(document)
        .keydown(
            function(e) {
                keys.push( e.keyCode );
                if ( keys.toString().indexOf( konami ) >= 0 ){

                    // fai qualcosa quando viene eseguito il konami code

                    // svuoto l'array che contiene la sequenza digitata dall'utente
                    keys = [];
                }
            }
        );
[...]

All’inizio della nostra funzione potete subito notare questo codice:

keys.push( e.keyCode );

Il metodo push() di JavaScript ci permette di inserire un nuovo valore in fondo ad un Array. In questo caso keys indica il nostro Array, mentre e.keyCode indica il codice corrispondente al tasto premuto.

Visto che questo array verrà “aggiornato” ad ogni pressione di un tasto non ci resta che fare l’ultimo controllo: verificare che ci sia presente la sequenza del Konami Code all’interno dell’array keys.

Per controllare che nell’array sia presente la sequenza del Konami Code utilizzeremo il metodo indexOf() di JavaScript il quale si occupa di controllare che il valore passato come parametro sia presente all’interno di una stringa, e restituisce la sua posizione nella stringa, se presente; altrimenti il valore restituito è ‘-1’.

Per fare in modo che indexOf funzioni correttamente, dobbiamo convertire il nostro array keys in una stringa, utilizzando il metodo toString() di JavaScript.
Come abbiamo appena detto, toString() si occupa di trasformare un valore in stringa.

Come parametro di indexOf passeremo la stringa del Konami Kode, per controllare che essa sia contenuta all’interno dell’array keys.

Se il valore restituito da indexOf sarà maggiore o uguale a zero, significa che l’utente ha digitato correttamente il Konami Code e quindi possiamo inserire all’interno il resto del codice da eseguire in questo caso.
Prima di chiudere questo blocco di codice potete notare:

keys = [];

Questo serve a svuotare l’array contente il Konami Code, in modo che possa essere eseguita la stessa funzione nuovamente.
Nell’esempio proposto in questo articolo non è previsto un riutilizzo del codice Konami, di conseguenza anche se il Codice può essere eseguito più volte il risultato non cambierà.

Conclusioni

Come hai notato, inserire il Codice Konami nel tuo sito web non richiede particolari sforzi.
In questo articolo, e nelle demo a esso associato, avrai potuto notare un banale utilizzo del codice konami, che può ovviamente essere migliorato e reso più divertente!

Puoi trovare una lista di siti che utilizzano il Konami Code al seguente indirizzo: https://www.konamicodesites.com/ (ovviamente dopo aver digitato il codice! ).

Ora che hai visto come implementare questo “trucchetto”, pensi che ti tornerà utile in qualche progetto?

Tag: , ,

L'autore

Nicolas è un programmatore web con la passione per il web design e per javascript. Passa la maggior parte del suo tempo libero alla ricerca di nuove idee e nuovi progetti da sviluppare. É fanatico di Wordress e jQuery e si diverte nella creazione di plugins per quest'ultimo.

Altri articoli scritti da

Articoli correlati

21 commenti

Trackback e pingback

  1. Mr Sparkle
    Superb article, great writing style, content, and blog theme....