17 KiB

Raw Blame History Unescape Escape

Costruisci un gioco spaziale Parte 2: Disegna l'eroe e i mostri sulla Canvas

L'API Canvas è una delle funzionalità più potenti dello sviluppo web per creare grafica dinamica e interattiva direttamente nel tuo browser. In questa lezione, trasformeremo quell'elemento HTML <canvas> vuoto in un mondo di gioco pieno di eroi e mostri. Pensa alla canvas come alla tua tavola da disegno digitale dove il codice diventa visivo.

Stiamo costruendo su ciò che hai imparato nella lezione precedente, e ora ci immergeremo negli aspetti visivi. Imparerai come caricare e visualizzare gli sprite di gioco, posizionare gli elementi con precisione e creare la base visiva per il tuo gioco spaziale. Questo colma il divario tra pagine web statiche e esperienze dinamiche e interattive.

Alla fine di questa lezione, avrai una scena di gioco completa con la tua nave eroica posizionata correttamente e formazioni nemiche pronte per la battaglia. Capirai come i giochi moderni rendono la grafica nei browser e acquisirai competenze per creare le tue esperienze visive interattive. Esploriamo la grafica della canvas e diamo vita al tuo gioco spaziale!

Quiz Pre-Lezione

Quiz pre-lezione

La Canvas

Cos'è esattamente questo elemento <canvas>? È la soluzione di HTML5 per creare grafica e animazioni dinamiche nei browser web. A differenza delle immagini o dei video regolari che sono statici, la canvas ti dà il controllo a livello di pixel su tutto ciò che appare sullo schermo. Questo la rende perfetta per giochi, visualizzazioni di dati e arte interattiva. Pensala come una superficie di disegno programmabile dove JavaScript diventa il tuo pennello.

Per impostazione predefinita, un elemento canvas appare come un rettangolo vuoto e trasparente sulla tua pagina. Ma è qui che risiede il potenziale! Il suo vero potere emerge quando usi JavaScript per disegnare forme, caricare immagini, creare animazioni e far rispondere le cose alle interazioni dell'utente. È simile a come i pionieri della grafica computerizzata dei Bell Labs negli anni '60 dovevano programmare ogni pixel per creare le prime animazioni digitali.

✅ Leggi di più sull'API Canvas su MDN.

Ecco come viene tipicamente dichiarata, come parte del corpo della pagina:

<canvas id="myCanvas" width="200" height="100"></canvas>

Ecco cosa fa questo codice:

Imposta l'attributo id per poter fare riferimento a questo specifico elemento canvas in JavaScript
Definisce la larghezza in pixel per controllare la dimensione orizzontale della canvas
Stabilisce l'altezza in pixel per determinare le dimensioni verticali della canvas

Disegnare Geometrie Semplici

Ora che sai cos'è l'elemento canvas, esploriamo come disegnarci sopra! La canvas utilizza un sistema di coordinate che potrebbe sembrare familiare dalle lezioni di matematica, ma c'è una differenza importante specifica della grafica computerizzata.

La canvas utilizza coordinate cartesiane con un asse x (orizzontale) e un asse y (verticale) per posizionare tutto ciò che disegni. Ma ecco la differenza chiave: a differenza del sistema di coordinate della matematica, il punto di origine (0,0) inizia nell'angolo in alto a sinistra, con i valori x che aumentano spostandosi verso destra e i valori y che aumentano spostandosi verso il basso. Questo approccio risale ai primi display dei computer in cui i fasci di elettroni scansionavano dall'alto verso il basso, rendendo l'angolo in alto a sinistra il punto di partenza naturale.

Immagine da MDN

Per disegnare sull'elemento canvas, seguirai lo stesso processo in tre passaggi che forma la base di tutta la grafica della canvas. Una volta fatto alcune volte, diventerà naturale:

Ottieni un riferimento al tuo elemento Canvas dal DOM (proprio come qualsiasi altro elemento HTML)
Ottieni il contesto di rendering 2D – questo fornisce tutti i metodi di disegno
Inizia a disegnare! Usa i metodi integrati del contesto per creare la tua grafica

Ecco come appare nel codice:

// Step 1: Get the canvas element
const canvas = document.getElementById("myCanvas");

// Step 2: Get the 2D rendering context
const ctx = canvas.getContext("2d");

// Step 3: Set fill color and draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 200, 200); // x, y, width, height

Analizziamo questo passaggio per passaggio:

Prendiamo il nostro elemento canvas usando il suo ID e lo memorizziamo in una variabile
Otteniamo il contesto di rendering 2D – questo è il nostro kit di strumenti pieno di metodi di disegno
Indichiamo alla canvas che vogliamo riempire le cose con il rosso usando la proprietà fillStyle
Disegniamo un rettangolo che inizia nell'angolo in alto a sinistra (0,0) largo e alto 200 pixel

✅ L'API Canvas si concentra principalmente su forme 2D, ma puoi anche disegnare elementi 3D su un sito web; per questo, potresti usare l'API WebGL.

Puoi disegnare tutti i tipi di cose con l'API Canvas come:

Forme geometriche, abbiamo già mostrato come disegnare un rettangolo, ma c'è molto di più che puoi disegnare.
Testo, puoi disegnare un testo con qualsiasi font e colore desideri.
Immagini, puoi disegnare un'immagine basata su un asset immagine come un .jpg o .png, per esempio.

✅ Prova! Sai come disegnare un rettangolo, riesci a disegnare un cerchio su una pagina? Dai un'occhiata ad alcuni disegni interessanti su Canvas su CodePen. Ecco un esempio particolarmente impressionante.

Caricare e Disegnare un Asset Immagine

Disegnare forme di base è utile per iniziare, ma la maggior parte dei giochi ha bisogno di immagini reali! Sprite, sfondi e texture sono ciò che dà ai giochi il loro fascino visivo. Caricare e visualizzare immagini sulla canvas funziona in modo diverso rispetto al disegno di forme geometriche, ma è semplice una volta compreso il processo.

Dobbiamo creare un oggetto Image, caricare il nostro file immagine (questo avviene in modo asincrono, cioè "in background"), e poi disegnarlo sulla canvas una volta che è pronto. Questo approccio garantisce che le tue immagini vengano visualizzate correttamente senza bloccare la tua applicazione durante il caricamento.

Caricamento Base delle Immagini

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // Image loaded and ready to be used
  console.log('Image loaded successfully!');
};

Ecco cosa succede in questo codice:

Creiamo un nuovo oggetto Image per contenere il nostro sprite o texture
Indichiamo quale file immagine caricare impostando il percorso della sorgente
Ascoltiamo l'evento di caricamento per sapere esattamente quando l'immagine è pronta per essere utilizzata

Un Modo Migliore per Caricare Immagini

Ecco un modo più robusto per gestire il caricamento delle immagini che gli sviluppatori professionisti usano comunemente. Avvolgeremo il caricamento delle immagini in una funzione basata su Promise – questo approccio, reso popolare quando le Promesse JavaScript sono diventate standard in ES6, rende il tuo codice più organizzato e gestisce gli errori in modo elegante:

function loadAsset(path) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      resolve(img);
    };
    img.onerror = () => {
      reject(new Error(`Failed to load image: ${path}`));
    };
  });
}

// Modern usage with async/await
async function initializeGame() {
  try {
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');
    // Images are now ready to use
  } catch (error) {
    console.error('Failed to load game assets:', error);
  }
}

Cosa abbiamo fatto qui:

Avvolto tutta la logica di caricamento delle immagini in una Promise per gestirla meglio
Aggiunto la gestione degli errori che ci dice effettivamente quando qualcosa va storto
Usato la sintassi moderna async/await perché è molto più leggibile
Incluso blocchi try/catch per gestire con grazia eventuali problemi di caricamento

Una volta che le tue immagini sono caricate, disegnarle sulla canvas è in realtà piuttosto semplice:

async function renderGameScreen() {
  try {
    // Load game assets
    const heroImg = await loadAsset('hero.png');
    const monsterImg = await loadAsset('monster.png');

    // Get canvas and context
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");

    // Draw images to specific positions
    ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
    ctx.drawImage(monsterImg, 0, 0);
  } catch (error) {
    console.error('Failed to render game screen:', error);
  }
}

Analizziamo questo passaggio per passaggio:

Carichiamo sia le immagini dell'eroe che dei mostri in background usando await
Prendiamo il nostro elemento canvas e otteniamo quel contesto di rendering 2D di cui abbiamo bisogno
Posizioniamo l'immagine dell'eroe proprio al centro usando un rapido calcolo delle coordinate
Mettiamo l'immagine del mostro nell'angolo in alto a sinistra per iniziare la formazione nemica
Catturiamo eventuali errori che potrebbero verificarsi durante il caricamento o il rendering

Ora è il Momento di Iniziare a Costruire il Tuo Gioco

Ora metteremo tutto insieme per creare la base visiva del tuo gioco spaziale. Hai una solida comprensione dei fondamenti della canvas e delle tecniche di caricamento delle immagini, quindi questa sezione pratica ti guiderà nella costruzione di uno schermo di gioco completo con sprite posizionati correttamente.

Cosa Costruire

Creerai una pagina web con un elemento Canvas. Dovrebbe rendere uno schermo nero 1024*768. Ti abbiamo fornito due immagini:

Nave dell'eroe
5*5 mostri

Passaggi Consigliati per Iniziare lo Sviluppo

Trova i file di partenza che sono stati creati per te nella sottocartella your-work. La struttura del tuo progetto dovrebbe contenere:

your-work/
├── assets/
│   ├── enemyShip.png
│   └── player.png
├── index.html
├── app.js
└── package.json

Ecco con cosa stai lavorando:

Sprite di gioco si trovano nella cartella assets/ così tutto rimane organizzato
Il tuo file HTML principale configura l'elemento canvas e prepara tutto
Un file JavaScript dove scriverai tutta la magia del rendering del gioco
Un package.json che configura un server di sviluppo per testare localmente

Apri questa cartella in Visual Studio Code per iniziare lo sviluppo. Avrai bisogno di un ambiente di sviluppo locale con Visual Studio Code, NPM e Node.js installati. Se non hai npm configurato sul tuo computer, ecco come installarlo.

Avvia il tuo server di sviluppo navigando nella cartella your-work:

cd your-work
npm start

Questo comando fa alcune cose piuttosto interessanti:

Avvia un server locale su http://localhost:5000 per testare il tuo gioco
Serve correttamente tutti i tuoi file in modo che il browser possa caricarli
Osserva le modifiche ai tuoi file per uno sviluppo fluido
Ti offre un ambiente di sviluppo professionale per testare tutto

💡 Nota: Il tuo browser mostrerà inizialmente una pagina vuota – è normale! Man mano che aggiungi codice, aggiorna il browser per vedere le modifiche. Questo approccio di sviluppo iterativo è simile a come la NASA ha costruito il computer di guida Apollo – testando ogni componente prima di integrarlo nel sistema più grande.

Aggiungi codice

Aggiungi il codice richiesto a your-work/app.js per completare le seguenti attività:

Disegna una canvas con sfondo nero

💡 Ecco come: Trova il TODO in /app.js e aggiungi solo due righe. Imposta ctx.fillStyle su nero, quindi usa ctx.fillRect() a partire da (0,0) con le dimensioni della tua canvas. Facile!
Carica le texture del gioco

💡 Ecco come: Usa await loadAsset() per caricare le immagini del giocatore e del nemico. Conservale in variabili così potrai usarle più tardi. Ricorda – non appariranno finché non le disegnerai effettivamente!
Disegna la nave dell'eroe nella posizione centrale in basso

💡 Ecco come: Usa ctx.drawImage() per posizionare il tuo eroe. Per la coordinata x, prova canvas.width / 2 - 45 per centrarlo, e per la coordinata y usa canvas.height - canvas.height / 4 per posizionarlo nella parte inferiore.
Disegna una formazione di 5×5 navi nemiche

💡 Ecco come: Trova la funzione createEnemies e configura un ciclo annidato. Dovrai fare un po' di calcoli per spaziatura e posizionamento, ma non preoccuparti – ti mostrerò esattamente come!

Prima, stabilisci le costanti per un layout corretto della formazione nemica:

const ENEMY_TOTAL = 5;
const ENEMY_SPACING = 98;
const FORMATION_WIDTH = ENEMY_TOTAL * ENEMY_SPACING;
const START_X = (canvas.width - FORMATION_WIDTH) / 2;
const STOP_X = START_X + FORMATION_WIDTH;

Analizziamo cosa fanno queste costanti:

Impostiamo 5 nemici per riga e colonna (una bella griglia 5×5)
Definiamo quanto spazio mettere tra i nemici per evitare che sembrino ammassati
Calcoliamo quanto sarà larga tutta la formazione
Determiniamo dove iniziare e finire affinché la formazione sembri centrata

Poi, crea cicli annidati per disegnare la formazione nemica:

for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) {
  for (let y = 0; y < 50 * 5; y += 50) {
    ctx.drawImage(enemyImg, x, y);
  }
}

Ecco cosa fa questo ciclo annidato:

Il ciclo esterno si muove da sinistra a destra attraverso la formazione
Il ciclo interno va dall'alto verso il basso per creare file ordinate
Disegniamo ogni sprite nemico alle coordinate x,y esatte che abbiamo calcolato
Tutto rimane spaziato uniformemente così sembra professionale e organizzato

Risultato

Il risultato finale dovrebbe apparire così:

Soluzione

Prova a risolverlo da solo prima, ma se ti blocchi, dai un'occhiata a una soluzione

Sfida GitHub Copilot Agent 🚀

Usa la modalità Agent per completare la seguente sfida:

Descrizione: Migliora la canvas del tuo gioco spaziale aggiungendo effetti visivi e elementi interattivi utilizzando le tecniche dell'API Canvas che hai imparato.

Prompt: Crea un nuovo file chiamato enhanced-canvas.html con una canvas che visualizza stelle animate sullo sfondo, una barra della salute pulsante per la nave dell'eroe e navi nemiche che si muovono lentamente verso il basso. Includi il codice JavaScript che disegna stelle scintillanti usando posizioni e opacità casuali, implementa una barra della salute che cambia colore in base al livello di salute (verde > giallo > rosso) e anima le navi nemiche per muoversi verso il basso a velocità diverse.

Scopri di più sulla modalità agent qui.

🚀 Sfida

Hai imparato a disegnare con l'API Canvas focalizzata sul 2D; dai un'occhiata all'API WebGL e prova a disegnare un oggetto 3D.

Quiz Post-Lezione

Quiz post-lezione

Revisione & Studio Autonomo

Scopri di più sull'API Canvas leggendo a riguardo.

Compito

Gioca con l'API Canvas

Disclaimer:
Questo documento è stato tradotto utilizzando il servizio di traduzione AI Co-op Translator. Sebbene ci impegniamo per garantire l'accuratezza, si prega di notare che le traduzioni automatiche possono contenere errori o imprecisioni. Il documento originale nella sua lingua nativa dovrebbe essere considerato la fonte autorevole. Per informazioni critiche, si raccomanda una traduzione professionale umana. Non siamo responsabili per eventuali incomprensioni o interpretazioni errate derivanti dall'uso di questa traduzione.

17 KiB Raw Blame History Unescape Escape