7.6 KiB

Raw Permalink Blame History

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

Chestionar Pre-Lecție

În această lecție, vei învăța cum să adaugi un sistem de scor într-un joc și cum să calculezi viețile.

Afișarea textului pe ecran

Pentru a putea afișa scorul jocului pe ecran, trebuie să știi cum să plasezi text pe ecran. Răspunsul este utilizarea metodei fillText() pe obiectul canvas. De asemenea, poți controla alte aspecte, cum ar fi fontul utilizat, culoarea textului și chiar alinierea acestuia (stânga, dreapta, centru). Mai jos este un exemplu de cod care afișează text pe ecran.

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

✅ Citește mai multe despre cum să adaugi text pe un canvas și simte-te liber să-l faci să arate mai interesant!

Viața, ca un concept de joc

Conceptul de viață într-un joc este doar un număr. În contextul unui joc spațial, este obișnuit să atribui un set de vieți care sunt scăzute una câte una atunci când nava ta suferă daune. Este plăcut să poți arăta o reprezentare grafică a acestora, cum ar fi mini-nave sau inimi, în loc de un număr.

Ce să construiești

Adaugă următoarele în jocul tău:

Scorul jocului: Pentru fiecare navă inamică distrusă, eroul ar trebui să primească puncte, sugerăm 100 de puncte per navă. Scorul jocului ar trebui să fie afișat în colțul din stânga jos.
Viață: Nava ta are trei vieți. Pierzi o viață de fiecare dată când o navă inamică se ciocnește de tine. Scorul vieții ar trebui să fie afișat în colțul din dreapta jos și să fie reprezentat grafic prin următoarea imagine .

Pași recomandați

Localizează fișierele care au fost create pentru tine în subfolderul your-work. Acesta ar trebui să conțină următoarele:

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

Pornește proiectul tău din folderul your_work tastând:

cd your-work
npm start

Comanda de mai sus va porni un server HTTP la adresa http://localhost:5000. Deschide un browser și introdu această adresă; în acest moment ar trebui să afișeze eroul și toți inamicii, iar când apeși săgețile stânga și dreapta, eroul se mișcă și poate doborî inamicii.

Adaugă cod

Copiază resursele necesare din folderul solution/assets/ în folderul your-work; vei adăuga resursa life.png. Adaugă lifeImg în funcția window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Adaugă lifeImg în lista de resurse:

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

Adaugă variabile. Adaugă cod care să reprezinte scorul total (0) și viețile rămase (3), afișează aceste scoruri pe ecran.

Extinde funcția updateGameObjects(). Extinde funcția updateGameObjects() pentru a gestiona coliziunile cu inamicii:

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

Adaugă life și points.

Inițializează variabilele. Sub this.cooldown = 0 în clasa Hero, setează viața și punctele:
```
this.life = 3;
this.points = 0;
```

Afișează variabilele pe ecran. Desenează 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);
}

Adaugă metode în bucla jocului. Asigură-te că adaugi aceste funcții în funcția window.onload sub updateGameObjects():
```
drawPoints();
drawLife();
```

Implementează regulile jocului. Implementează următoarele reguli:

Pentru fiecare coliziune între erou și inamic, scade o viață.

Extinde clasa Hero pentru a face această scădere:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Pentru fiecare laser care lovește un inamic, crește scorul jocului cu 100 de puncte.

Extinde clasa Hero pentru a face această creștere:

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

Adaugă aceste funcții în emițătoarele de evenimente pentru coliziuni:

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

✅ Fă puțină cercetare pentru a descoperi alte jocuri create folosind JavaScript/Canvas. Care sunt trăsăturile lor comune?

La finalul acestei lucrări, ar trebui să vezi micile nave 'viață' în colțul din dreapta jos, punctele în colțul din stânga jos și ar trebui să vezi cum numărul de vieți scade când te ciocnești cu inamicii și cum punctele cresc când dobori inamicii. Bravo! Jocul tău este aproape complet.

🚀 Provocare

Codul tău este aproape complet. Poți să-ți imaginezi următorii pași?

Chestionar Post-Lecție

Chestionar post-lecție

Recapitulare și Studiu Individual

Cercetează câteva modalități prin care poți crește sau scădea scorurile și viețile în jocuri. Există câteva motoare de joc interesante, cum ar fi PlayFab. Cum ar putea utilizarea unuia dintre acestea să îmbunătățească jocul tău?

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ă rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm responsabilitatea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.

7.6 KiB Raw Permalink Blame History