sabato, luglio 31, 2010

E se sviluppassi un Tetris con Javascript ...

Una idea mi girava per la testa.
Perche' non provare a sviluppare una versione del Tetris con HTML e Javascript ...

Ero un po' scettico pero', dicevo: ... ci vorra' molto tempo ... magari non ci riesco ... e' difficile ...

Poi ci ho pensato seriamente.
Ho cominciato giocando con le parti grafiche, ho disegnato il tavolo di gioco, ho disegnato i pezzi ... e poi son passato alle prime prove con il javascript.

Piccola premessa: Da un po' di mesi ormai, per lavoro, ho fatto pratica con il framework MooTools, e' molto facile da usare e nel suo core ci sono gia' delle funzioni utili per le animazioni.

Quindi, dicevo, ho cominciato a sviluppare le rotazioni dei pezzi usando mootools (alla fine potevo anche non usarlo, o usare jQuery ... o qualsiasi altra cosa ...), ogni pezzo, html parlando, e' fatto da un div che contiene 4 altri div. Giocando con i margini e le posizioni assolute ho trovato tutte le coordinate delle rotazioni.

Ok, avevo tutto. Graficamente. E adesso c'era la parte piu' difficile. Come collocare i pezzi dentro il tavolo da gioco? Beh ... ho usato una grossa matrice. Ho riempito il tavolo di boxettini con le loro belle coordinate cartesiane ... et-volia' ... ho trovato il metodo per continuare lo sviluppo.

Superato lo scoglio delle collisioni con il muro e con i pezzi gia' inseriti (davvero certosino come lavoro, non posso annoiarvi con altri dettagli) ho integrato i livelli, il calcolo dei punteggi, la pausa, il softDrop, l'hardDrop ... ed ecco, in una settimana circa ho ottenuto il mio tetris (e' stato molto utile questo wiki per conoscere i vari dettagli da implementare).

L'ho battezzato TetriJs :)

Allora, volete giocarci e/o scaricare il codice sorgente? Spero di si :)

Qui trovate tutto, il codice l'ho rilasciato con licenza GNU GPL, cosi' chiunque puo' ridistribuirlo, modificarlo, sfasciarlo come piu' gli aggrada (rispettando i termini della licenza, ovviamente) :)

E' probabile che lo aggiorni man mano fixando bug, aggiungendo funzionalita' e altro.

Intanto che ne pensate? Vi piace?

Aggiornamento (21 Agosto 2010): Ho rilasciato una seconda versione. Ho fixato alcuni bug ed aggiunto nuove funzionalita'. Il changeLog completo e' qui. Grazie per i vostri commenti e suggerimenti. Spero di poterci lavorare ancora su ... mi mancano un paio di cose da aggiungere :)

PS: so che non funziona bene su IE7 ... non so pero' se avro' voglia di fixarlo per lui ...

Etichette: , , , ,


Condividi questo Articolo:   Bookmark and Share

9 Commenti:

Anonymous Cinzia said...

Non vedevo l'ora che lo finivi per provarlo!! L'ho visto nascere crescere e formarsi ...... vado a provarlo!!

31/7/10 7:21 PM  
Blogger AkiRoss' said...

Bravo, e' molto bello! Lo stile e' semplice, ma le animazioni sono davvero graziose :)

L'ho provato solo su Chrome e funziona bene.

Un paio di consigli:
1. Il gioco e' troppo lento, si dovrebbero raggiungere velocita' maggiori piu' in fretta.
2. Quando il gioco si fa veloce, e' meglio avere due tasti che spostano il blocco tutto a dx o tutto a sx con una sola pressione. Non fa parte del concetto originale, credo, ma e' apprezzato dai giocatori hardcore ;)

Ancora complimenti :)
~Aki

1/8/10 7:03 PM  
Anonymous Giovanni ~ Quacos said...

Complimenti per la pazienza e per aver dimostrato cosa si può fare con Javascript! Le rotazioni sono fuori di testa! Massimo rispetto!

2/8/10 9:40 AM  
Blogger Francesco said...

@AkiRoss': Grazie per i consigli, ne faccio tesoro per la prossima versione. :)

E grazie a tutti per i complimenti ^_^

2/8/10 10:22 AM  
Blogger Gian Paolo Ghilardi said...

Molto bello e divertente!

Una cosa però: puoi aggiungere una piccola animazione quando le righe spariscono? Tipo farle lampeggiare e sparire... Era una cosa che mi piace tanto in Tetris... ^^'

Ciau & bel lavoro!

JP (Rejex)

2/8/10 8:46 PM  
Blogger Francesco said...

@rejex: ho la vaga impressione che devo cominciare a lavorare sulla seconda versione :D

Grazie ^_^

2/8/10 10:26 PM  
Anonymous Anonimo said...

Complimenti franco.....o' franco!!
Mi piace molto.
Mirko

22/8/10 6:32 PM  
Anonymous unblocked games said...

Great! Thank for sharing!
pacman |happy wheels |my little pony games | unblockedgames

14/4/15 10:35 AM  
Blogger aber andro said...

20 years ago in the hands of the falling tetris game, java-based PCs is now being played as he brings the end of the gameboy.
unblocked games 6

22/4/15 5:34 PM  

Posta un commento

Io sono per la comunicazione libera senza blocchi, ma dato che comunque questo e' il mio spazio personale e personalmente non sopporto chi commenta usando un linguaggio volgare mi vedo costretto a moderare i commenti.
Abbiate pazienza.

Links to this post:

Crea un link

<< Home