7.5 KiB

Raw Permalink Blame History

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 canvas objekto. Taip pat galite kontroliuoti 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 canvas ir drąsiai padarykite savo tekstą įdomesnį!

Gyvybės kaip žaidimo koncepcija

Gyvybės koncepcija žaidime yra tik skaičius. Kosminio žaidimo kontekste dažnai priskiriamos kelios gyvybės, kurios mažėja po vieną, kai jūsų laivas patiria žalą. Gražu, jei galite parodyti grafinę šio atvaizdavimo formą, pvz., mažus laivelius ar širdeles, o ne 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 jumis, prarandate gyvybę. Gyvybių skaičius turėtų būti rodomas apatiniame dešiniajame kampe ir būti sudarytas iš šio grafinio elemento .

Rekomenduojami žingsniai

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

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

Pradėkite savo projektą your_work aplanke į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 rodyklių klavišus, herojus judės ir galės šaudyti į priešus.

Pridėkite kodą

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

Pridėkite lifeImg į išteklių 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), parodykite šiuos skaičius ekrane.

Išplėskite updateGameObjects() funkciją. Išplėskite updateGameObjects() funkciją, kad apdorotumėte 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 Hero klasėje 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 keletas įdomių žaidimų variklių, pvz., 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 dirbtinio intelekto vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, atkreipiame 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 naudoti profesionalų žmogaus vertimą. Mes neprisiimame atsakomybės už nesusipratimus ar klaidingus aiškinimus, kylančius dėl šio vertimo naudojimo.

7.5 KiB Raw Permalink Blame History