7.5 KiB

Raw Permalink Blame History

Costruisci un Gioco Spaziale Parte 5: Punteggio e Vite

Quiz Pre-Lezione

In questa lezione, imparerai come aggiungere un punteggio a un gioco e calcolare le vite.

Disegnare testo sullo schermo

Per poter visualizzare un punteggio di gioco sullo schermo, devi sapere come posizionare il testo sullo schermo. La risposta è utilizzare il metodo fillText() sull'oggetto canvas. Puoi anche controllare altri aspetti come il font da usare, il colore del testo e persino il suo allineamento (sinistra, destra, centro). Qui sotto c'è un esempio di codice che disegna del testo sullo schermo.

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Leggi di più su come aggiungere testo a un canvas e sentiti libero di rendere il tuo testo più accattivante!

La vita, come concetto di gioco

Il concetto di avere una vita in un gioco è semplicemente un numero. Nel contesto di un gioco spaziale, è comune assegnare un certo numero di vite che vengono sottratte una alla volta quando la tua nave subisce danni. È carino se puoi mostrare una rappresentazione grafica di questo, come mini-navi o cuori, invece di un numero.

Cosa costruire

Aggiungiamo i seguenti elementi al tuo gioco:

Punteggio di gioco: Per ogni nave nemica distrutta, l'eroe dovrebbe guadagnare dei punti, suggeriamo 100 punti per nave. Il punteggio di gioco dovrebbe essere mostrato in basso a sinistra.
Vite: La tua nave ha tre vite. Perdi una vita ogni volta che una nave nemica collide con te. Il punteggio delle vite dovrebbe essere mostrato in basso a destra e rappresentato graficamente con la seguente immagine .

Passaggi consigliati

Individua i file che sono stati creati per te nella sottocartella your-work. Dovrebbe contenere i seguenti file:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

Avvia il tuo progetto nella cartella your_work digitando:

cd your-work
npm start

Il comando sopra avvierà un server HTTP all'indirizzo http://localhost:5000. Apri un browser e inserisci quell'indirizzo; al momento dovrebbe mostrare l'eroe e tutti i nemici, e premendo le frecce sinistra e destra, l'eroe si muove e può abbattere i nemici.

Aggiungi codice

Copia le risorse necessarie dalla cartella solution/assets/ nella cartella your-work; aggiungerai una risorsa life.png. Aggiungi il lifeImg alla funzione window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Aggiungi il lifeImg all'elenco delle risorse:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Aggiungi variabili. Aggiungi il codice che rappresenta il tuo punteggio totale (0) e le vite rimaste (3), visualizzando questi punteggi sullo schermo.

Estendi la funzione updateGameObjects(). Estendi la funzione updateGameObjects() per gestire le collisioni con i nemici:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Aggiungi vite e punti.

Inizializza le variabili. Sotto this.cooldown = 0 nella classe Hero, imposta vite e punti:
```
this.life = 3;
this.points = 0;
```

Disegna le variabili sullo schermo. Disegna questi valori sullo schermo:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Aggiungi metodi al ciclo di gioco. Assicurati di aggiungere queste funzioni alla tua funzione window.onload sotto updateGameObjects():
```
drawPoints();
drawLife();
```

Implementa le regole del gioco. Implementa le seguenti regole del gioco:

Per ogni collisione tra eroe e nemico, sottrai una vita.

Estendi la classe Hero per effettuare questa sottrazione:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Per ogni laser che colpisce un nemico, aumenta il punteggio di gioco di 100 punti.

Estendi la classe Hero per effettuare questo incremento:

  incrementPoints() {
    this.points += 100;
  }

Aggiungi queste funzioni ai tuoi Collision Event Emitters:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ Fai una piccola ricerca per scoprire altri giochi creati utilizzando JavaScript/Canvas. Quali sono le loro caratteristiche comuni?

Alla fine di questo lavoro, dovresti vedere le piccole navi 'vita' in basso a destra, i punti in basso a sinistra, e dovresti vedere il conteggio delle vite diminuire quando collidi con i nemici e i punti aumentare quando abbatti i nemici. Ben fatto! Il tuo gioco è quasi completo.

🚀 Sfida

Il tuo codice è quasi completo. Riesci a immaginare i prossimi passi?

Quiz Post-Lezione

Quiz post-lezione

Revisione e Studio Autonomo

Ricerca alcuni modi per incrementare e decrementare i punteggi e le vite nei giochi. Esistono motori di gioco interessanti come PlayFab. Come potrebbe l'uso di uno di questi migliorare il tuo gioco?

Compito

Costruisci un Gioco con Punteggio

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

7.5 KiB Raw Permalink Blame History