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 }) {
        this.position = position;
        this.velocity = velocity;
        this.radius = 4; // La dimensione del proiettile
    }

    draw() {
        c.beginPath(); // Inizia un nuovo disegno
        c.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2); // Disegna un cerchio (il proiettile)
        c.fillStyle = 'red'; // Colore del proiettile
        c.fill(); // Riempi il cerchio con il colore
        c.closePath(); // Chiudi il disegno
    }

    update() {
        this.draw(); // Disegna il proiettile
        this.position.x += this.velocity.x; // Aggiorna la posizione del proiettile in orizzontale
        this.position.y += this.velocity.y; // Aggiorna la posizione del proiettile in verticale
    }
}

Cosa fa questo codice?

1. Creare un Proiettile (Projectile): ogni volta che la navicella spara, creiamo un nuovo proiettile usando questo modello. Il proiettile ha una posizione di partenza (da dove viene sparato) e una velocità (quanto velocemente si muove sullo schermo).
2. Disegnare il Proiettile (draw): questa funzione disegna un cerchio rosso sul canvas, che rappresenta il nostro proiettile.
3. Aggiornare la Posizione (update): questa funzione sposta il proiettile sullo schermo. Ogni volta che viene chiamata, il proiettile si sposta un po’ più in alto.

Implementazione dello sparo

Ora che abbiamo i proiettili, dobbiamo fare in modo che la navicella possa effettivamente spararli quando premi la barra spaziatrice. Aggiungiamo il codice per gestire lo sparo:

Aggiungi questo codice al tuo file index.js:

const projectiles = []; // Array per tenere traccia di tutti i proiettili sparati

window.addEventListener('keydown', ({ key }) => {
    if (key === ' ') { // Se premi la barra spaziatrice
        projectiles.push(
            new Projectile({
                position: {
                    x: player.position.x + player.width / 2, // Posizione iniziale (centro della navicella)
                    y: player.position.y // Parte superiore della navicella
                },
                velocity: {
                    x: 0, // I proiettili si muovono solo verso l'alto
                    y: -20 // Velocità verso l'alto
                }
            })
        );
    }
});

Cosa fa questo codice?

1. Tenere Traccia dei Proiettili (projectiles): creiamo un array Javascript vuoto che conterrà tutti i proiettili sparati. Ogni volta che spariamo, aggiungiamo un nuovo proiettile a questo array.
2. Rilevare la Barra Spaziatrice (keydown): aggiungiamo un evento che rileva quando premi la barra spaziatrice. Al premere della barra spaziatrice, creiamo un nuovo proiettile e lo aggiungiamo all’array dei proiettili.

Gestione dell’Interazione con il Canvas

Ora dobbiamo fare in modo che i proiettili appaiano sullo schermo e si muovano verso l’alto. Modifica la funzione animate per aggiungere la gestione dei proiettili:

function animate() {
    requestAnimationFrame(animate);
    c.fillStyle = 'black';
    c.fillRect(0, 0, canvas.width, canvas.height);

    player.update();

    projectiles.forEach((projectile, index) => {
        if (projectile.position.y + projectile.radius <= 0) {
            setTimeout(() => {
                projectiles.splice(index, 1); // Rimuovi il proiettile dall'array se esce dallo schermo
            }, 0);
        } else {
            projectile.update(); // Aggiorna la posizione del proiettile
        }
    });

    if (keys.arrowLeft.pressed && player.position.x >= 0) {
        player.velocity.x = -10;
        player.rotation = -0.15;
    } else if (keys.arrowRight.pressed && player.position.x + player.width <= canvas.width) {
        player.velocity.x = 10;
        player.rotation = 0.15;
    } else {
        player.velocity.x = 0;
        player.rotation = 0;
    }
}

animate();

Cosa fa questo codice?

1. Gestione dei Proiettili (projectiles.forEach): ora, ogni volta che chiamiamo animate, controlliamo dove si trovano tutti i proiettili sullo schermo. Se un proiettile supera la parte superiore dello schermo, lo rimuoviamo dall’array in modo che non continui a essere aggiornato.
2. Disegnare e Aggiornare i Proiettili (projectile.update()): per ogni proiettile, chiamiamo update, che lo sposta sullo schermo e lo ridisegna nella sua nuova posizione.

Adesso la tua navicella può sparare proiettili, e questi si muovono verso l’alto, esattamente come dovrebbero! Abbiamo fatto grandi progressi, ma il gioco non è ancora completo. Nel prossimo passo, inizieremo a lavorare sugli invaders che arriveranno dall’alto, pronti a dare del filo da torcere alla tua navicella. È il momento di dare vita agli invasori alieni, i nemici che dovrai abbattere nel nostro gioco. Vediamo come farlo nel prossimo step del tutorial!