manipolazione del DOM

17 risultati

GUIDA GRATUITA

Fase 6: diamo gli ultimi ritocchi! Le chicche per perfezionare il gioco

Implementazione della logica di fine partita Già nel passo precedente abbiamo introdotto la logica per la fine del gioco, ovvero il "Game Over" che si attiva quando la navicella del giocatore viene colpita da un proiettile nemico. Tuttavia, possiamo fare qualche piccolo miglioramento per rendere questa parte del gioco più interessante. Possiamo, ad esempio, aggiungere…

GUIDA GRATUITA

Fase 5: implementiamo il sistema di punteggio e gli effetti grafici

Creazione del sistema di punteggio Per rendere il gioco più coinvolgente, aggiungiamo un sistema di punteggio che aumenta ogni volta che un invader viene abbattuto. Il punteggio è già collegato nel codice che abbiamo scritto in precedenza, ma vediamo esattamente come funziona. Il punteggio viene aggiornato ogni volta che un proiettile del giocatore colpisce un…

GUIDA GRATUITA

Fase 4: gestiamo i proiettili nemici

Creazione della Classe InvaderProjectile Per far sì che gli invaders possano davvero attaccare la tua navicella, dobbiamo creare dei proiettili che gli invaders possano sparare verso il basso. Questa volta useremo una classe simile a quella dei proiettili del giocatore, ma con alcune differenze. Aggiungi questo codice al tuo file index.js: class InvaderProjectile {…

Vuoi avviare una nuova carriera o fare un upgrade?

Trova il corso Digital & Tech più adatto a te nel nostro catalogo!

Scopri i corsi 👨‍🏫

GUIDA GRATUITA

Fase 3: creiamo gli invaders!

Creazione della Classe Invader Per rappresentare gli invaders alieni, creeremo una nuova classe chiamata Invader. Questa classe sarà simile a quella del Player, ma con alcune differenze. Gli invadersi si muoveranno automaticamente da sinistra a destra e, occasionalmente, spareranno dei proiettili verso la tua navicella. Aggiungi questo codice al tuo file index.js: class Invader…

GUIDA GRATUITA

Fase 2: aggiungiamo i proiettili!

Creazione della Classe Projectile Per far sì che la nostra navicella possa difendersi dagli alieni, dobbiamo darle la capacità di sparare proiettili. Per fare ciò, creeremo una classe Projectile, che rappresenta ogni singolo proiettile che la navicella può sparare. Aggiungi questo codice al tuo file index.js: class Projectile { constructor({ position, velocity }) {…

GUIDA GRATUITA

Fase 1: creiamo la base del gioco

Impostazione del Canvas È ora di iniziare a programmare il gioco vero e proprio! Apri index.js e inserisci questo codice: const canvas = document.querySelector('canvas'); const c = canvas.getContext('2d'); canvas.width = 1480; canvas.height = 750; Cosa fa questo codice? Preparare il Canvas: document.querySelector('canvas') dice al browser di prendere il nostro canvas dal file HTML. Questo…

GUIDA GRATUITA

Configurazione iniziale

Anche se non sappiamo esattamente quanti anni hai, siamo pronti a scommettere che conosci sicuramente Space Invaders! Questo gioco iconico è uno dei più grandi classici degli anni '80 e ha fatto la storia dei videogiochi. L’idea è semplice: una navicella spaziale, controllata da te, deve respingere ondate di alieni che scendono lentamente dall’alto dello…

GUIDA GRATUITA

Analisi del codice JavaScript del quiz

Il codice JavaScript che abbiamo sviluppato per creare il quiz interattivo è il cuore del nostro progetto. Ma leggere e copiare degli snippet di codice non basta per farti assimilare le logiche alle spalle del funzionamento del quiz. Niente paura! In questa sezione andremo ad esaminare ogni parte del codice nel dettaglio, spiegando le scelte…

GUIDA GRATUITA

Fase 2: carichiamo le domande e creiamo il quiz!

Per procedere con il quiz dobbiamo passare al riflettere sul caricamento delle domande: queste saranno caricate dinamicamente da un file JSON. La struttura di questo file JSON è la seguente e la integreremo direttamente nel codice JavaScript. Se necessario, è possibile caricare queste domande in modo asincrono da un backend collegato ad un database così…