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 un effetto sonoro quando il giocatore perde, oppure reimpostare il gioco per far sì che il giocatore possa ricominciare una nuova partita senza dover ricaricare la pagina.

Aggiungi il seguente codice al tuo file index.js:

function resetGame() {
    player.opacity = 1;
    player.position.x = canvas.width / 2 - player.width / 2;
    invaderProjectiles.length = 0;
    grids.length = 0;
    particles.length = 0;
    score = 0;
    scoreElement.innerHTML = score;
    game.active = true;
    game.over = false;
    ending.style.display = 'none';
    animate();
}

window.addEventListener('keydown', ({ key }) => {
    if (game.over && key === 'Enter') {
        resetGame();
    }
});

Cosa fa questo codice?

1. Funzione di Reset del gioco (resetGame): questa funzione ripristina lo stato del gioco per permettere al giocatore di iniziare una nuova partita. Resetta l’opacità del giocatore, la sua posizione, cancella tutti i proiettili e le griglie di invasori, azzera il punteggio, e nasconde il messaggio di “Game Over”.
2. Ricominciare il gioco (keydown): se il gioco è finito (game.over) e il giocatore preme “Enter”, il gioco viene resettato e si può iniziare una nuova partita.

Visualizzazione del messaggio di “Game Over”

Il messaggio di “Game Over” che abbiamo impostato nella struttura HTML viene visualizzato quando il giocatore perde. Tuttavia, potremmo voler migliorare questa parte aggiungendo un messaggio che spieghi come ricominciare a giocare.

Modifica il messaggio di “Game Over” nel file index.html:

<div id="ending">GAME OVER<br><span style="font-size: 2rem;">Press Enter to Restart</span></div>

Cosa fa questo codice?

1. Messaggio di Restart: abbiamo aggiunto una riga di testo che invita il giocatore a premere “Enter” per ricominciare il gioco. Questo rende il flusso del gioco più chiaro e user-friendly.

Ottimizzazioni finali e Debugging

Per concludere, vediamo alcune ottimizzazioni e verifiche che possiamo fare per assicurarci che il gioco funzioni al meglio:

1. Verifica delle collisioni: assicurati che tutte le collisioni (tra proiettili e invasori, tra proiettili nemici e il giocatore) funzionino correttamente. Testa il gioco e verifica che non ci siano situazioni in cui i proiettili attraversano gli invasori senza distruggerli, o che il giocatore non venga colpito correttamente.
2. Performance: se noti che il gioco diventa lento man mano che avanzano le griglie di invasori, considera di ottimizzare il codice rimuovendo elementi non più necessari dal DOM e riducendo la complessità delle animazioni.
3. Aggiunta di suoni: ouoi migliorare ulteriormente l’esperienza di gioco aggiungendo effetti sonori per gli spari, le esplosioni, e la fine del gioco. Puoi farlo utilizzando l’elemento <audio> di HTML5 o con librerie JavaScript come Howler.js.
4. Test Cross-Browser: testa il gioco su diversi browser (Chrome, Firefox, Edge) e su dispositivi mobili per assicurarti che funzioni correttamente ovunque. Alcune funzioni JavaScript potrebbero comportarsi diversamente su vari browser, quindi è importante verificare.

Complimenti! Hai portato a termine il tutorial e creato il tuo **Space Invaders** da zero, aggiungendo tutte quelle “chicche” finali che lo rendono unico. Ora sei ufficialmente un pro della manipolazione del DOM! Hai imparato a usare JavaScript per gestire elementi, eventi, contenuti dinamici e animazioni.

Continua a sperimentare e perfeziona il tuo gioco aggiungendo nuove funzionalità. E se vuoi approfondire ancora di più le tue abilità, dai un’occhiata alla nostra guida JavaScript per diventare un vero esperto!