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…

Lezione 12 / 17

Enza Neri

DOM javascript Javascript tutorial manipolazione del DOM

Vuoi avviare una nuova carriera o fare un upgrade?

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

Scopri i corsi 👨‍🏫

CERCA ARGOMENTO

Introduzione alla manipolazione del DOM

Tutorial principiante: come creare un cursore personalizzato

Tutorial intermedio: come creare un quiz interattivo

Tutorial avanzato: come creare Space Invaders

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 sarà lo spazio di gioco.
Context 2D: c è ciò che useremo per disegnare le nostre immagini e forme nel gioco.
Dimensioni del Canvas: impostiamo la larghezza e l’altezza del canvas, in modo che occupi una buona parte dello schermo.

Creazione della Classe Player

Adesso diamo vita al nostro protagonista: la navicella spaziale!

Aggiungi questo codice:

class Player {
    constructor() {
        this.velocity = {
            x: 0,
            y: 0
        };

        this.rotation = 0;
        this.opacity = 1;

        const image = new Image();
        image.src = './img/spaceship.png';
        image.onload = () => {
            const scale = 0.15;
            this.image = image;
            this.width = image.width * scale;
            this.height = image.height * scale;

            this.position = {
                x: canvas.width / 2 - this.width / 2,
                y: canvas.height - this.height - 20
            };
        };
    }

    draw() {
        c.save();
        c.globalAlpha = this.opacity;
        c.translate(
            this.position.x + this.width / 2,
            this.position.y + this.height / 2
        );
        c.rotate(this.rotation);
        c.translate(
            -this.position.x - this.width / 2,
            -this.position.y - this.height / 2
        );

        c.drawImage(this.image, this.position.x, this.position.y, this.width, this.height);
        c.restore();
    }

    update() {
        if (this.image) {
            this.draw();
            this.position.x += this.velocity.x;
        }
    }
}

const player = new Player();

Cosa fa questo codice?

Creare il Giocatore (Player): qui stiamo definendo un modello per la nostra navicella. Ogni volta che vogliamo un nuovo giocatore, usiamo questo modello.
Velocità e Movimento: la velocity ci dice quanto velocemente si muove la navicella. All’inizio è ferma, ma presto cambierà!
Immagine della Navicella: carichiamo l’immagine della navicella e la ridimensioniamo in modo che si adatti bene allo schermo.
Disegnare la Navicella (draw): questa funzione si occupa di disegnare la navicella sullo schermo, applicando rotazioni e trasparenze se necessario.
Aggiornare la Posizione (update): questa funzione sposta la navicella ogni volta che aggiorniamo il gioco, in base alla sua velocità.

Gestione del Movimento del Giocatore

Adesso facciamo in modo che la navicella possa muoversi a sinistra e a destra usando le frecce della tastiera.

Aggiungi questo codice:

const keys = {
    arrowLeft: {
        pressed: false
    },
    arrowRight: {
        pressed: false
    }
};

window.addEventListener('keydown', ({ key }) => {
    switch (key) {
        case 'ArrowLeft':
            keys.arrowLeft.pressed = true;
            break;
        case 'ArrowRight':
            keys.arrowRight.pressed = true;
            break;
    }
});

window.addEventListener('keyup', ({ key }) => {
    switch (key) {
        case 'ArrowLeft':
            keys.arrowLeft.pressed = false;
            break;
        case 'ArrowRight':
            keys.arrowRight.pressed = false;
            break;
    }
});

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

    player.update();

    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?

Tasti Premuti (keys): qui creiamo un oggetto che tiene traccia dei tasti premuti. All’inizio, nessun tasto è premuto.
Rilevare i Tasti (keydown e keyup): quando premi una freccia, diciamo al nostro gioco di muovere la navicella a sinistra o a destra. Quando rilasci il tasto, fermiamo il movimento.
Animare la Navicella (animate): questa funzione viene chiamata continuamente, e ogni volta aggiorna la posizione della navicella e la ridisegna sullo schermo. Se stai premendo una freccia, la navicella si muove; se rilasci il tasto, si ferma.

Hai bisogno di informazioni? 🙋🏻‍♂️

Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.

Scrivici

Oppure chiamaci al 800 128 626

CONTENUTI GRATUITI IN EVIDENZA

Guide per aspiranti programmatori 👨🏻‍🚀

Vuoi muovere i primi passi nel Digital e Tech? Abbiamo preparato alcune guide per aiutarti a orientarti negli ambiti più richiesti oggi.