9.6 KiB

Raw Permalink Blame History

Construiește un Joc Spațial Partea 5: Scor și Vieți

Chestionar Pre-Lecție

Ești pregătit să faci ca jocul tău spațial să se simtă ca un joc adevărat? Hai să adăugăm puncte de scor și gestionarea vieților - mecanici de bază care au transformat jocurile arcade timpurii precum Space Invaders din simple demonstrații în divertisment captivant. Aici jocul tău devine cu adevărat jucabil.

Afișarea Textului pe Ecran - Vocea Jocului Tău

Pentru a afișa scorul, trebuie să învățăm cum să redăm text pe canvas. Metoda fillText() este instrumentul tău principal pentru asta - este aceeași tehnică folosită în jocurile arcade clasice pentru a afișa scoruri și informații de stare.

Ai control complet asupra aspectului textului:

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

✅ Află mai multe despre adăugarea textului pe un canvas - s-ar putea să fii surprins de cât de creativ poți fi cu fonturile și stilurile!

Viețile - Mai Mult Decât Doar un Număr

În designul jocurilor, o "viață" reprezintă marja de eroare a jucătorului. Acest concept datează de la mașinile de pinball, unde primeai mai multe bile pentru a juca. În jocurile video timpurii precum Asteroids, viețile le ofereau jucătorilor permisiunea de a-și asuma riscuri și de a învăța din greșeli.

Reprezentarea vizuală contează semnificativ - afișarea unor pictograme cu nave în loc de simplul "Vieți: 3" creează o recunoaștere vizuală imediată, similar cu modul în care cabinetele arcade timpurii foloseau iconografia pentru a comunica dincolo de barierele lingvistice.

Construirea Sistemului de Recompense al Jocului Tău

Acum vom implementa sistemele de feedback de bază care mențin jucătorii implicați:

Sistem de scor: Fiecare navă inamică distrusă oferă 100 de puncte (numerele rotunde sunt mai ușor de calculat mental pentru jucători). Scorul va fi afișat în colțul din stânga jos.
Contor de vieți: Eroul tău începe cu trei vieți - un standard stabilit de jocurile arcade timpurii pentru a echilibra provocarea cu jucabilitatea. Fiecare coliziune cu un inamic costă o viață. Vom afișa viețile rămase în colțul din dreapta jos folosind pictograme cu nave .

Să Începem Construcția!

Mai întâi, configurează-ți spațiul de lucru. Navighează la fișierele din subfolderul your-work. Ar trebui să vezi aceste fișiere:

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

Pentru a testa jocul, pornește serverul de dezvoltare din folderul your_work:

cd your-work
npm start

Acest lucru va rula un server local la http://localhost:5000. Deschide această adresă în browser pentru a-ți vedea jocul. Testează controalele cu tastele săgeți și încearcă să tragi în inamici pentru a verifica dacă totul funcționează.

E timpul să scriem cod!

Obține resursele vizuale de care ai nevoie. Copiază fișierul life.png din folderul solution/assets/ în folderul tău your-work. Apoi adaugă lifeImg în funcția ta window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Nu uita să adaugi lifeImg în lista ta de resurse:

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

Configurează variabilele jocului tău. Adaugă ceva cod pentru a urmări scorul total (începând de la 0) și viețile rămase (începând de la 3). Le vom afișa pe ecran astfel încât jucătorii să știe mereu unde se află.

Implementează detectarea coliziunilor. Extinde funcția ta updateGameObjects() pentru a detecta când inamicii se ciocnesc cu eroul tău:

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

Adaugă urmărirea vieților și punctelor pentru Eroul tău.

Inițializează contoarele. Sub this.cooldown = 0 în clasa ta Hero, configurează viețile și punctele:
```
this.life = 3;
this.points = 0;
```

Afișează aceste valori jucătorului. Creează funcții pentru a desena aceste valori pe ecran:

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);
}

Integrează totul în bucla jocului tău. Adaugă aceste funcții în funcția ta window.onload imediat după updateGameObjects():
```
drawPoints();
drawLife();
```

Implementează consecințele și recompensele jocului. Acum vom adăuga sistemele de feedback care fac acțiunile jucătorului semnificative:
1. Coliziunile costă vieți. De fiecare dată când eroul tău se ciocnește cu un inamic, ar trebui să pierzi o viață.
  
  Adaugă această metodă în clasa ta Hero:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Împușcarea inamicilor aduce puncte. Fiecare lovitură reușită oferă 100 de puncte, oferind un feedback pozitiv imediat pentru o țintire precisă.
  
  Extinde clasa Hero cu această metodă de incrementare:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Acum conectează aceste funcții la evenimentele de coliziune:
```
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();
});
```

✅ Curios despre alte jocuri construite cu JavaScript și Canvas? Fă câteva cercetări - s-ar putea să fii uimit de ceea ce este posibil!

După ce implementezi aceste funcții, testează-ți jocul pentru a vedea sistemul complet de feedback în acțiune. Ar trebui să vezi pictogramele vieților în colțul din dreapta jos, scorul tău în colțul din stânga jos și să observi cum coliziunile reduc viețile, în timp ce loviturile reușite îți cresc scorul.

Jocul tău are acum mecanicile esențiale care au făcut jocurile arcade timpurii atât de captivante - obiective clare, feedback imediat și consecințe semnificative pentru acțiunile jucătorului.

Provocarea Agentului GitHub Copilot 🚀

Folosește modul Agent pentru a finaliza următoarea provocare:

Descriere: Îmbunătățește sistemul de scor al jocului spațial implementând o funcție de scor maxim cu stocare persistentă și mecanici de punctaj bonus.

Instrucțiuni: Creează un sistem de scor maxim care salvează cel mai bun scor al jucătorului în localStorage. Adaugă puncte bonus pentru eliminări consecutive de inamici (sistem de combo) și implementează valori diferite de punctaj pentru diferite tipuri de inamici. Include un indicator vizual atunci când jucătorul atinge un nou scor maxim și afișează scorul maxim curent pe ecranul jocului.

🚀 Provocare

Acum ai un joc funcțional cu scor și vieți. Gândește-te ce alte funcții ar putea îmbunătăți experiența jucătorului.

Chestionar Post-Lecție

Chestionar post-lecție

Recapitulare & Studiu Individual

Vrei să explorezi mai mult? Cercetează diferite abordări pentru sistemele de scor și vieți în jocuri. Există motoare de joc fascinante precum PlayFab care gestionează scoruri, clasamente și progresul jucătorilor. Cum ar putea integrarea unui astfel de sistem să ducă jocul tău la nivelul următor?

Temă

Construiește un Joc cu Scor

Declinare de responsabilitate:
Acest document a fost tradus folosind serviciul de traducere AI Co-op Translator. Deși ne străduim să asigurăm acuratețea, vă rugăm să fiți conștienți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa maternă ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de oameni. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.

9.6 KiB Raw Permalink Blame History