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:
- keys
utilizzeremo questo array per memorizzare al suo interno la sequenza di tasti digitata dall’utente - 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: http://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?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
21 commenti
Trackback e pingback
-
Mr Sparkle
Superb article, great writing style, content, and blog theme....
Spettacolare quello di Jquery… non la sapevo! :D
Complimenti, davvero carino come articolo!
Ciao Antonio,
grazie per i complimenti !!
Io l’ho realizzato in jQuery solamente per comodità.. in questo caso con qualche riga in più si poteva ottenere lo stesso risultato con puro js :D !!!!
Scusami, mi riferivo proprio al sito di http://www.jquery.com, mi sono accorto ora che mi ero espresso un pò male :D
Non sapevo dell’esistenza di questo codice ed è abbastanza carino quello che c’è :D
Beh, John Resig non poteva rimanere indientro con il codice konami!!!
Infatti la sua riproduzione di Guitar Hero in Javascript è semplicemente incredibile !!!!!!
E’ sempre divertente il Konami Code!
Ciao Giovanni,
Grazie per essere passato di qui :) !!!
Sono d’accordo con te, da quando è stato inventato, il codice konami si è evoluto moltissimo, ma il più semplice rimane il migliore, poichè ci fa tornare “bambini” per un ‘attimo :D
Dì un po’…
..è stato Chris Coyier su Twitter ad ispirare il tuo articolo? ;)
Ciao Raspo, grazie per aver commentato :)
Per quanto riguarda Chris Coyier, no, non sono stato ispirato da lui … :D
Anche lui ha scritto in merito al konami code? se, si, posta pure un link che sono curioso di vedere l’articolo :) !!!!
L’idea mi è venuta dopo aver visto un articolo che ne parlava un po’ in un blog che seguo spesso in spagnolo :P
Assolutamente fantastico!
Ciao Andrea,
grazie, sei molto gentile :)
Divertentissimo modo di utilizzare jQuery, grande Nic!
E adesso vediamo chi riesce a trovare cosa abbiamo nascosto su YIW! ahaha
HAHAhahah…
Grazie Nando!!!!!
Inizio subito a cercare anch’io :D
posso far entrare gli utenti in una pagina del sitodopo aver premuto in sequenza questi codici?
Assolutamente graficando!
Dovresti fare una cosa del genere:
$(document).ready(function(){
var keys = [];
var konami = ’38,38,40,40,37,39,37,39,66,65′;
$(document)
.keydown(
function(e) {
keys.push( e.keyCode );
if ( keys.toString().indexOf( konami ) >= 0 ){
location.href = ‘http://www.google.it’;
}
}
);
});
wowowo grazie nicolas davvero ottimo..
ora faro qualche trucchetto nelle mie pagine web ehehhehe(risata di Peter Griffin)
Figurati!!!
Appena hai qualcosa di pronto facci vedere che siamo curiosi !!!!!!!!!
Fooooorte!!!
Ciao lauri, sono d’accordo con te :D
Well done Mr. Nicolas!
I’m waiting for your next article!
Bye
jDav
Grazie jDav… sarai mica un jDav che conosco io no??? :D
Comunque sono certo che il prossimo articolo ti piacerà parecchio !
See you soon jDav!