Fin dal suo esordio nei nostri browser il nuovissimo e ancora poco conosciuto markup language HTML5 rappresenta una vera e propria rivoluzione nel mondo dello sviluppo web. Esso ci dona strumenti che fino a poco tempo fa erano esclusivo appannaggio di applicativi di terze parti legati ad ambienti di sviluppo proprietari e in più ci permette di sfruttare tutta la potenza grafica di cui sono dotati i nostri sistemi accedendo all’accelerazione grafica hardware.
Ecco perchè sono lieto di presentarti la mia prima guida allo sviluppo di videogiochi tramite HTML5 e Javascript. Il mio impegno primario è insegnarti nel modo più semplice e completo le basi dello sviluppo di giochi prendendo come esempio progetti reali di complessità crescente.
INDICE DEI CONTENUTI
1.1 INTRODUZIONE
1.2 L’AUTORE
1.3 NOTE SULLA REVISIONE 1.3
2. SI COMINCIA
2.1 GLI STRUMENTI DI SVILUPPO
3. IL LINGUAGGIO JAVASCRIPT
3.1 INTRODUZIONE E STORIA
3.2 INTEGRAZIONE CON LA PAGINA HTML
3.3 DICHIARAZIONE DELLE VARIABILI
3.4 OPERAZIONI CON LE VARIABILI
3.5 CONDIZIONI, CICLI E LOOP
3.6 GLI ARRAY
3.7 LE FUNZIONI
3.8 GLI OGGETTI IN JAVASCRIPT
3.9 IL DOCUMENT OBJECT MODEL DOM
3.10 GLI EVENTI
3.11 GESTIRE GLI ERRORI CON TRY.. CATCH
3.12 AJAX E RICHIESTE ASINCRONE XMLHTTPREQUEST()
4. HTML5
4.1 LA PRIMA PAGINA IN HTML5
5. IL TAG CANVAS
5.1 DESCRIZIONE DEL TAG CANVAS
5.2 ACQUISIRE IL DRAWING CONTEXT
6. PRIMITIVE GRAFICHE
6.1 TRACCIARE FORME RETTANGOLARI
6.2 I PATHS
6.3 TRACCIARE RETTE
6.4 TRACCIARE ARCHI
6.5 TRACCIARE CURVE QUADRATICHE E DI BEZIER
6.6 RIEMPIRE UN PATH
6.7 DEFINIRE UN’AREA DI CLIPPING
6.8 GLI STILI DI DISEGNO E RIEMPIMENTO
6.9 CREARE GRADIENTI DI COLORE
6.10 APPLICARE OMBRE
6.11 IMMAGINI E SPRITE
6.12 GESTIONE DELLE RISORSE GRAFICHE
6.13 CREAZIONE DI PATTERN
6.14 SCRIVERE UN TESTO
6.15 CANCELLARE UN’AREA RETTANGOLARE O TUTTO IL CANVAS
6.16 RUOTARE, SCALARE E TRASFORMARE IMMAGINI
6.17 COMPOSIZIONE DI PIÙ ELEMENTI CANVAS
7. IL GAME FRAMEWORK
7.1 UN MODELLO GENERICO
7.2 ACQUISIZIONE INPUT: LA TASTIERA
7.3 ACQUISIZIONE INPUT: IL MOUSE
8. FRAME BUFFER
8.1 LA TECNICA DEL FRAMEBUFFER
8.2 REALIZZIAMO UN BENCHMARK
8.3 ANIMAZIONI FLUIDE CON REQUESTANIMATIONFRAME
9. EFFETTI MULTIMEDIALI
9.1 ELEMENTI AUDIO
9.2 ELEMENTI VIDEO
10. LE WEBSTORAGE API
11. PROGETTO: FUTUREPONG
11.2 DINAMICA DI GIOCO
11.3 IL GAME ENGINE
11.4 INTELLIGENZA ARTIFICIALE
11.5 DISEGNO DELLA SCHERMATA DI GIOCO
12. PROGETTO: VOLLEY DI TESTA
12.1 REGOLE DEL GIOCO
12.2 IL GAME ENGINE
12.3 GESTIONE DELL’INPUT DA TASTIERA
12.4 DISEGNO DELLA SCHERMATA DI GIOCO
12.5 DINAMICA DELLA PALLA
13. PROGETTO: CAMPO DI ASTEROIDI
13.1 LAYER GRAFICI E PROFONDITÀ
13.2 IL CAMPO STELLARE ANIMATO
13.3 METEORITI ANIMATI
13.4 ESPLOSIONI ANIMATE
13.5 SALVATAGGIO DEI PUNTEGGI
14. PROGETTO: SPACE HERO
14.2 LA TECNICA DEL PARALLAX SCROLLING
14.3 PERSONAGGI DEL GIOCO
14.4 ADATTAMENTO DEGLI ASSI CARTESIANI
14.5 EFFETTI PARTICELLARI
14.6 DINAMICA DEGLI SPARI
14.7 GRAFICA E ANIMAZIONI
14.8 INTELLIGENZA ARTIFICIALE
15. SICUREZZA NEI GIOCHI ONLINE
15.1 METODO 1. OFFUSCAMENTO DEL CODICE JAVASCRIPT
15.2 METODO 2. WRAPPING DEL CODICE ALL'INTERNO DI UNA FUNZIONE ANONIMA
15.3 METODO 3. CREARE UN BACKEND SUL SERVER REMOTO
16. SORGENTI COMPLETI
16.1 BENCHMARK: FILE INDEX.HTML
16.2 BENCHMARK: FILE BENCHMARK1.JS
16.3 FUTURE PONG: FILE INDEX.HTML
16.4 VOLLEY DI TESTA: FILE INDEX.HTML
16.5 VOLLEY DI TESTA: FILE VOLLEYDITESTA.JS
16.6 CAMPO DI ASTEROIDI: FILE INDEX.HTML
16.7 SPACE HERO: FILE INDEX.HTML
16.8 SPACE HERO: FILE HERO_INIT.JS
16.9 SPACE HERO: FILE HERO_INPUT.JS
16.10 SPACE HERO: FILE HERO_LOGICA.JS
16.11 FONTI UTILI
Ecco perchè sono lieto di presentarti la mia prima guida allo sviluppo di videogiochi tramite HTML5 e Javascript. Il mio impegno primario è insegnarti nel modo più semplice e completo le basi dello sviluppo di giochi prendendo come esempio progetti reali di complessità crescente.
INDICE DEI CONTENUTI
1.1 INTRODUZIONE
1.2 L’AUTORE
1.3 NOTE SULLA REVISIONE 1.3
2. SI COMINCIA
2.1 GLI STRUMENTI DI SVILUPPO
3. IL LINGUAGGIO JAVASCRIPT
3.1 INTRODUZIONE E STORIA
3.2 INTEGRAZIONE CON LA PAGINA HTML
3.3 DICHIARAZIONE DELLE VARIABILI
3.4 OPERAZIONI CON LE VARIABILI
3.5 CONDIZIONI, CICLI E LOOP
3.6 GLI ARRAY
3.7 LE FUNZIONI
3.8 GLI OGGETTI IN JAVASCRIPT
3.9 IL DOCUMENT OBJECT MODEL DOM
3.10 GLI EVENTI
3.11 GESTIRE GLI ERRORI CON TRY.. CATCH
3.12 AJAX E RICHIESTE ASINCRONE XMLHTTPREQUEST()
4. HTML5
4.1 LA PRIMA PAGINA IN HTML5
5. IL TAG CANVAS
5.1 DESCRIZIONE DEL TAG CANVAS
5.2 ACQUISIRE IL DRAWING CONTEXT
6. PRIMITIVE GRAFICHE
6.1 TRACCIARE FORME RETTANGOLARI
6.2 I PATHS
6.3 TRACCIARE RETTE
6.4 TRACCIARE ARCHI
6.5 TRACCIARE CURVE QUADRATICHE E DI BEZIER
6.6 RIEMPIRE UN PATH
6.7 DEFINIRE UN’AREA DI CLIPPING
6.8 GLI STILI DI DISEGNO E RIEMPIMENTO
6.9 CREARE GRADIENTI DI COLORE
6.10 APPLICARE OMBRE
6.11 IMMAGINI E SPRITE
6.12 GESTIONE DELLE RISORSE GRAFICHE
6.13 CREAZIONE DI PATTERN
6.14 SCRIVERE UN TESTO
6.15 CANCELLARE UN’AREA RETTANGOLARE O TUTTO IL CANVAS
6.16 RUOTARE, SCALARE E TRASFORMARE IMMAGINI
6.17 COMPOSIZIONE DI PIÙ ELEMENTI CANVAS
7. IL GAME FRAMEWORK
7.1 UN MODELLO GENERICO
7.2 ACQUISIZIONE INPUT: LA TASTIERA
7.3 ACQUISIZIONE INPUT: IL MOUSE
8. FRAME BUFFER
8.1 LA TECNICA DEL FRAMEBUFFER
8.2 REALIZZIAMO UN BENCHMARK
8.3 ANIMAZIONI FLUIDE CON REQUESTANIMATIONFRAME
9. EFFETTI MULTIMEDIALI
9.1 ELEMENTI AUDIO
9.2 ELEMENTI VIDEO
10. LE WEBSTORAGE API
11. PROGETTO: FUTUREPONG
11.2 DINAMICA DI GIOCO
11.3 IL GAME ENGINE
11.4 INTELLIGENZA ARTIFICIALE
11.5 DISEGNO DELLA SCHERMATA DI GIOCO
12. PROGETTO: VOLLEY DI TESTA
12.1 REGOLE DEL GIOCO
12.2 IL GAME ENGINE
12.3 GESTIONE DELL’INPUT DA TASTIERA
12.4 DISEGNO DELLA SCHERMATA DI GIOCO
12.5 DINAMICA DELLA PALLA
13. PROGETTO: CAMPO DI ASTEROIDI
13.1 LAYER GRAFICI E PROFONDITÀ
13.2 IL CAMPO STELLARE ANIMATO
13.3 METEORITI ANIMATI
13.4 ESPLOSIONI ANIMATE
13.5 SALVATAGGIO DEI PUNTEGGI
14. PROGETTO: SPACE HERO
14.2 LA TECNICA DEL PARALLAX SCROLLING
14.3 PERSONAGGI DEL GIOCO
14.4 ADATTAMENTO DEGLI ASSI CARTESIANI
14.5 EFFETTI PARTICELLARI
14.6 DINAMICA DEGLI SPARI
14.7 GRAFICA E ANIMAZIONI
14.8 INTELLIGENZA ARTIFICIALE
15. SICUREZZA NEI GIOCHI ONLINE
15.1 METODO 1. OFFUSCAMENTO DEL CODICE JAVASCRIPT
15.2 METODO 2. WRAPPING DEL CODICE ALL'INTERNO DI UNA FUNZIONE ANONIMA
15.3 METODO 3. CREARE UN BACKEND SUL SERVER REMOTO
16. SORGENTI COMPLETI
16.1 BENCHMARK: FILE INDEX.HTML
16.2 BENCHMARK: FILE BENCHMARK1.JS
16.3 FUTURE PONG: FILE INDEX.HTML
16.4 VOLLEY DI TESTA: FILE INDEX.HTML
16.5 VOLLEY DI TESTA: FILE VOLLEYDITESTA.JS
16.6 CAMPO DI ASTEROIDI: FILE INDEX.HTML
16.7 SPACE HERO: FILE INDEX.HTML
16.8 SPACE HERO: FILE HERO_INIT.JS
16.9 SPACE HERO: FILE HERO_INPUT.JS
16.10 SPACE HERO: FILE HERO_LOGICA.JS
16.11 FONTI UTILI
