7.1 KiB

Raw Permalink Blame History

Jenga Mchezo wa Anga Sehemu ya 5: Alama na Maisha

Jaribio la Kabla ya Somo

Katika somo hili, utajifunza jinsi ya kuongeza alama kwenye mchezo na kuhesabu maisha.

Chora maandishi kwenye skrini

Ili kuweza kuonyesha alama za mchezo kwenye skrini, unahitaji kujua jinsi ya kuweka maandishi kwenye skrini. Jibu ni kutumia njia ya fillText() kwenye kitu cha canvas. Unaweza pia kudhibiti vipengele vingine kama fonti ya kutumia, rangi ya maandishi na hata mpangilio wake (kushoto, kulia, katikati). Hapo chini kuna msimbo unaochora maandishi kwenye skrini.

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

✅ Soma zaidi kuhusu jinsi ya kuongeza maandishi kwenye canvas, na jisikie huru kufanya yako ionekane ya kuvutia zaidi!

Maisha, kama dhana ya mchezo

Dhana ya kuwa na maisha kwenye mchezo ni namba tu. Katika muktadha wa mchezo wa anga, ni kawaida kupewa seti ya maisha ambayo hupunguzwa moja baada ya nyingine wakati chombo chako kinapopata uharibifu. Ni vizuri ikiwa unaweza kuonyesha uwakilishi wa picha wa hili kama vyombo vidogo au mioyo badala ya namba.

Nini cha kujenga

Ongeza yafuatayo kwenye mchezo wako:

Alama za mchezo: Kwa kila chombo cha adui kinachoharibiwa, shujaa anapaswa kupewa alama, tunapendekeza alama 100 kwa kila chombo. Alama za mchezo zinapaswa kuonyeshwa chini kushoto.
Maisha: Chombo chako kina maisha matatu. Unapoteza maisha kila wakati chombo cha adui kinapogongana na wewe. Alama za maisha zinapaswa kuonyeshwa chini kulia na ziwe na picha ifuatayo .

Hatua Zinazopendekezwa

Tafuta faili ambazo zimeundwa kwa ajili yako kwenye folda ndogo ya your-work. Inapaswa kuwa na yafuatayo:

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

Anzisha mradi wako kwenye folda ya your_work kwa kuandika:

cd your-work
npm start

Hii itaanzisha HTTP Server kwenye anwani http://localhost:5000. Fungua kivinjari na uweke anwani hiyo, kwa sasa inapaswa kuonyesha shujaa na maadui wote, na unapobonyeza mishale ya kushoto na kulia, shujaa anasogea na anaweza kupiga maadui risasi.

Ongeza msimbo

Nakili mali zinazohitajika kutoka kwenye folda ya solution/assets/ hadi kwenye folda ya your-work; utaongeza mali ya life.png. Ongeza lifeImg kwenye kazi ya window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Ongeza lifeImg kwenye orodha ya mali:

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

Ongeza vigezo. Ongeza msimbo unaowakilisha alama zako za jumla (0) na maisha yaliyobaki (3), onyesha alama hizi kwenye skrini.

Panua kazi ya updateGameObjects(). Panua kazi ya updateGameObjects() ili kushughulikia migongano ya maadui:

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

Ongeza life na points.

Anzisha vigezo. Chini ya this.cooldown = 0 kwenye darasa la Hero, weka maisha na alama:
```
this.life = 3;
this.points = 0;
```

Chora vigezo kwenye skrini. Chora thamani hizi kwenye skrini:

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

Ongeza mbinu kwenye mzunguko wa Mchezo. Hakikisha unaongeza kazi hizi kwenye kazi yako ya window.onload chini ya updateGameObjects():
```
drawPoints();
drawLife();
```

Tekeleza sheria za mchezo. Tekeleza sheria zifuatazo za mchezo:

Kwa kila mgongano wa shujaa na adui, punguza maisha moja.

Panua darasa la Hero kufanya upunguzaji huu:

decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}

Kwa kila risasi inayogonga adui, ongeza alama za mchezo kwa alama 100.

Panua darasa la Hero kufanya ongezeko hili:

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

Ongeza kazi hizi kwenye Emitters za Tukio la Migongano:

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

✅ Fanya utafiti kidogo kugundua michezo mingine iliyoundwa kwa kutumia JavaScript/Canvas. Ni sifa gani za kawaida wanazo?

Mwisho wa kazi hii, unapaswa kuona vyombo vidogo vya 'maisha' chini kulia, alama chini kushoto, na unapaswa kuona hesabu ya maisha ikipungua unapogongana na maadui na alama zako zikiongezeka unapopiga maadui risasi. Hongera! Mchezo wako karibu umekamilika.

🚀 Changamoto

Msimbo wako karibu umekamilika. Je, unaweza kufikiria hatua zako zinazofuata?

Jaribio la Baada ya Somo

Jaribio la baada ya somo

Mapitio na Kujisomea

Fanya utafiti wa njia ambazo unaweza kuongeza na kupunguza alama za mchezo na maisha. Kuna injini za michezo za kuvutia kama PlayFab. Je, kutumia moja ya hizi kunaweza kuboresha mchezo wako vipi?

Kazi

Jenga Mchezo wa Alama

Kanusho:
Hati hii imetafsiriwa kwa kutumia huduma ya tafsiri ya AI Co-op Translator. Ingawa tunajitahidi kwa usahihi, tafadhali fahamu kuwa tafsiri za kiotomatiki zinaweza kuwa na makosa au kutokuwa sahihi. Hati ya asili katika lugha yake ya awali inapaswa kuzingatiwa kama chanzo cha mamlaka. Kwa taarifa muhimu, inashauriwa kutumia tafsiri ya kitaalamu ya binadamu. Hatutawajibika kwa maelewano mabaya au tafsiri zisizo sahihi zinazotokana na matumizi ya tafsiri hii.

7.1 KiB Raw Permalink Blame History