History

leestott 7cfaffabb5 🌐 Update translations via Co-op Translator		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	3 weeks ago
your-work	🌐 Update translations via Co-op Translator	3 weeks ago
README.md	🌐 Update translations via Co-op Translator	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Sukurkite kosminį žaidimą 5 dalis: Taškai ir gyvybės

Klausimai prieš paskaitą

Šioje pamokoje sužinosite, kaip pridėti taškų skaičiavimą žaidime ir apskaičiuoti gyvybes.

Teksto rodymas ekrane

Norėdami ekrane rodyti žaidimo taškus, turite žinoti, kaip pateikti tekstą ekrane. Atsakymas yra naudojant fillText() metodą ant drobės objekto. Taip pat galite valdyti kitus aspektus, pvz., kokį šriftą naudoti, teksto spalvą ir net jo lygiavimą (kairė, dešinė, centras). Žemiau pateiktas kodas, kuris piešia tekstą ekrane.

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

✅ Skaitykite daugiau apie kaip pridėti tekstą prie drobės, ir drąsiai padarykite savo tekstą įdomesnį!

Gyvybės kaip žaidimo koncepcija

Gyvybės koncepcija žaidime yra tik skaičius. Kosminio žaidimo kontekste įprasta priskirti tam tikrą gyvybių skaičių, kuris mažėja po vieną, kai jūsų laivas patiria žalą. Gražu, jei galite parodyti grafinę šio skaičiaus reprezentaciją, pvz., mažus laivelius ar širdeles, o ne tik skaičių.

Ką sukurti

Pridėkime šiuos elementus į jūsų žaidimą:

Žaidimo taškai: Už kiekvieną sunaikintą priešo laivą herojus turėtų gauti taškų, siūlome 100 taškų už laivą. Žaidimo taškai turėtų būti rodomi apatiniame kairiajame kampe.
Gyvybės: Jūsų laivas turi tris gyvybes. Kiekvieną kartą, kai priešo laivas susiduria su jūsų laivu, prarandate vieną gyvybę. Gyvybių skaičius turėtų būti rodomas apatiniame dešiniajame kampe ir būti sudarytas iš šio grafinio elemento .

Rekomenduojami žingsniai

Raskite failus, kurie buvo sukurti jums aplanke your-work. Jame turėtų būti šie elementai:

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

Pradėkite savo projektą aplanke your_work įvesdami:

cd your-work
npm start

Aukščiau pateiktas kodas paleis HTTP serverį adresu http://localhost:5000. Atidarykite naršyklę ir įveskite šį adresą. Šiuo metu turėtumėte matyti herojų ir visus priešus, o paspaudę kairės ir dešinės rodykles, herojus judės ir galės šaudyti į priešus.

Pridėkite kodą

Nukopijuokite reikalingus elementus iš aplanko solution/assets/ į aplanką your-work; pridėsite life.png elementą. Pridėkite lifeImg į window.onload funkciją:
```
lifeImg = await loadTexture("assets/life.png");
```

Pridėkite lifeImg į elementų sąrašą:

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

Pridėkite kintamuosius. Pridėkite kodą, kuris atspindi jūsų bendrą taškų skaičių (0) ir likusias gyvybes (3), rodykite šiuos skaičius ekrane.

Išplėskite updateGameObjects() funkciją. Išplėskite updateGameObjects() funkciją, kad ji apdorotų priešų susidūrimus:

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

Pridėkite gyvybes ir taškus.

Inicializuokite kintamuosius. Po this.cooldown = 0 klasėje Hero, nustatykite gyvybes ir taškus:
```
this.life = 3;
this.points = 0;
```

Pieškite kintamuosius ekrane. Rodykite šias reikšmes ekrane:

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

Pridėkite metodus į žaidimo ciklą. Įsitikinkite, kad pridėjote šias funkcijas į window.onload funkciją po updateGameObjects():
```
drawPoints();
drawLife();
```

Įgyvendinkite žaidimo taisykles. Įgyvendinkite šias žaidimo taisykles:

Už kiekvieną herojaus ir priešo susidūrimą atimkite gyvybę.

Išplėskite Hero klasę, kad atliktumėte šį atėmimą:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Už kiekvieną lazerį, kuris pataiko į priešą, padidinkite žaidimo taškus 100 taškų.

Išplėskite Hero klasę, kad atliktumėte šį padidinimą:

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

Pridėkite šias funkcijas į susidūrimo įvykių emitentus:

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

✅ Šiek tiek pasidomėkite, kokie kiti žaidimai yra sukurti naudojant JavaScript/Canvas. Kokie jų bendri bruožai?

Baigę šį darbą, turėtumėte matyti mažus „gyvybės“ laivelius apatiniame dešiniajame kampe, taškus apatiniame kairiajame kampe, ir turėtumėte matyti, kaip jūsų gyvybių skaičius mažėja susidūrus su priešais, o taškai didėja šaudant į priešus. Puiku! Jūsų žaidimas beveik baigtas.

🚀 Iššūkis

Jūsų kodas beveik baigtas. Ar galite įsivaizduoti kitus žingsnius?

Klausimai po paskaitos

Apžvalga ir savarankiškas mokymasis

Pasidomėkite būdais, kaip galite padidinti ir sumažinti žaidimo taškus bei gyvybes. Yra įdomių žaidimų variklių, tokių kaip PlayFab. Kaip vieno iš jų naudojimas galėtų pagerinti jūsų žaidimą?

Užduotis

Sukurkite žaidimą su taškų skaičiavimu

Atsakomybės apribojimas:
Šis dokumentas buvo išverstas naudojant AI vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, prašome atkreipti dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas jo gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Kritinei informacijai rekomenduojama profesionali žmogaus vertimo paslauga. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus interpretavimus, atsiradusius naudojant šį vertimą.