History

softchris 9837770ac1 🌐 Update translations via Co-op Translator		1 month ago
..
solution	🌐 Update translations via Co-op Translator	3 months ago
your-work	🌐 Update translations via Co-op Translator	3 months ago
README.md	🌐 Update translations via Co-op Translator	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	3 months ago

README.md

Costruisci un Gioco Spaziale Parte 5: Punteggio e Vite

Quiz Pre-Lettura

Quiz pre-lettura

Pronto a rendere il tuo gioco spaziale un vero gioco? Aggiungiamo il sistema di punteggio e la gestione delle vite - le meccaniche fondamentali che hanno trasformato i primi giochi arcade come Space Invaders da semplici dimostrazioni a intrattenimento coinvolgente. È qui che il tuo gioco diventa davvero giocabile.

Disegnare Testo sullo Schermo - La Voce del Tuo Gioco

Per mostrare il tuo punteggio, dobbiamo imparare a rendere il testo sulla tela. Il metodo fillText() è il tuo strumento principale per questo - è la stessa tecnica utilizzata nei classici giochi arcade per mostrare punteggi e informazioni di stato.

Hai il controllo completo sull'aspetto del testo:

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

✅ Approfondisci aggiungere testo a una tela - potresti essere sorpreso da quanto puoi essere creativo con font e stile!

Vite - Più di un Semplice Numero

Nel design dei giochi, una "vita" rappresenta il margine di errore del giocatore. Questo concetto risale ai flipper, dove si avevano più palline con cui giocare. Nei primi videogiochi come Asteroids, le vite permettevano ai giocatori di correre rischi e imparare dai propri errori.

La rappresentazione visiva è molto importante - mostrare icone di navi invece di un semplice "Vite: 3" crea un riconoscimento visivo immediato, simile a come i primi cabinati arcade usavano l'iconografia per comunicare oltre le barriere linguistiche.

Costruire il Sistema di Ricompense del Tuo Gioco

Ora implementeremo i sistemi di feedback fondamentali che mantengono i giocatori coinvolti:

Sistema di punteggio: Ogni nave nemica distrutta assegna 100 punti (i numeri tondi sono più facili da calcolare mentalmente per i giocatori). Il punteggio viene mostrato nell'angolo in basso a sinistra.
Contatore delle vite: Il tuo eroe inizia con tre vite - uno standard stabilito dai primi giochi arcade per bilanciare la sfida con la giocabilità. Ogni collisione con un nemico costa una vita. Mostreremo le vite rimanenti nell'angolo in basso a destra usando icone di navi .

Iniziamo a Costruire!

Per prima cosa, configura il tuo spazio di lavoro. Vai ai file nella sottocartella your-work. Dovresti vedere questi file:

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

Per testare il tuo gioco, avvia il server di sviluppo dalla cartella your_work:

cd your-work
npm start

Questo avvierà un server locale su http://localhost:5000. Apri questo indirizzo nel tuo browser per vedere il tuo gioco. Prova i controlli con i tasti freccia e cerca di sparare ai nemici per verificare che tutto funzioni.

È Ora di Codificare!

Prendi le risorse visive necessarie. Copia l'asset life.png dalla cartella solution/assets/ nella tua cartella your-work. Poi aggiungi il lifeImg alla tua funzione window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Non dimenticare di aggiungere il lifeImg alla tua lista di risorse:

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

Configura le variabili del gioco. Aggiungi del codice per tenere traccia del tuo punteggio totale (partendo da 0) e delle vite rimanenti (partendo da 3). Mostreremo questi valori sullo schermo così i giocatori sapranno sempre la loro situazione.

Implementa il rilevamento delle collisioni. Estendi la tua funzione updateGameObjects() per rilevare quando i nemici si scontrano con il tuo eroe:

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

Aggiungi il tracciamento delle vite e dei punti al tuo Eroe.

Inizializza i contatori. Sotto this.cooldown = 0 nella tua classe Hero, configura vite e punti:
```
this.life = 3;
this.points = 0;
```

Mostra questi valori al giocatore. Crea funzioni per disegnare 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);
}

Collega tutto al ciclo del gioco. Aggiungi queste funzioni alla tua funzione window.onload subito dopo updateGameObjects():
```
drawPoints();
drawLife();
```

Implementa conseguenze e ricompense nel gioco. Ora aggiungeremo i sistemi di feedback che rendono significative le azioni del giocatore:
1. Le collisioni costano vite. Ogni volta che il tuo eroe si scontra con un nemico, perdi una vita.
  
  Aggiungi questo metodo alla tua classe Hero:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Sparare ai nemici guadagna punti. Ogni colpo riuscito assegna 100 punti, fornendo un feedback positivo immediato per un tiro preciso.
  
  Estendi la tua classe Hero con questo metodo di incremento:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Ora collega queste funzioni agli eventi di collisione:
```
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();
});
```

✅ Curioso di altri giochi costruiti con JavaScript e Canvas? Fai qualche ricerca - potresti essere sorpreso da ciò che è possibile!

Dopo aver implementato queste funzionalità, testa il tuo gioco per vedere il sistema di feedback completo in azione. Dovresti vedere le icone delle vite nell'angolo in basso a destra, il tuo punteggio nell'angolo in basso a sinistra, e osservare come le collisioni riducono le vite mentre i colpi riusciti aumentano il punteggio.

Il tuo gioco ora ha le meccaniche essenziali che hanno reso i primi giochi arcade così coinvolgenti - obiettivi chiari, feedback immediato e conseguenze significative per le azioni del giocatore.

Sfida GitHub Copilot Agent 🚀

Usa la modalità Agent per completare la seguente sfida:

Descrizione: Migliora il sistema di punteggio del gioco spaziale implementando una funzione di punteggio massimo con archiviazione persistente e meccaniche di punteggio bonus.

Prompt: Crea un sistema di punteggio massimo che salvi il miglior punteggio del giocatore in localStorage. Aggiungi punti bonus per uccisioni consecutive di nemici (sistema combo) e implementa valori di punteggio diversi per diversi tipi di nemici. Includi un indicatore visivo quando il giocatore raggiunge un nuovo punteggio massimo e mostra il punteggio massimo attuale sullo schermo del gioco.

🚀 Sfida

Ora hai un gioco funzionante con punteggio e vite. Pensa a quali funzionalità aggiuntive potrebbero migliorare l'esperienza del giocatore.

Quiz Post-Lettura

Quiz post-lettura

Revisione e Studio Autonomo

Vuoi esplorare di più? Ricerca diversi approcci ai sistemi di punteggio e vite nei giochi. Ci sono motori di gioco affascinanti come PlayFab che gestiscono punteggi, classifiche e progressione dei giocatori. Come potrebbe l'integrazione di qualcosa del genere portare il tuo gioco al livello successivo?

Compito

Costruisci un Gioco con Punteggio

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.