History

Lee Stott 2daab5271b Update Quiz Link		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 Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	3 weeks ago

README.md

Jenga Mchezo wa Anga Sehemu ya 5: Alama na Maisha

Maswali ya Awali ya Somo

Maswali ya awali 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). Hapa 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 moja unapopata uharibifu kwenye chombo chako. Ni vizuri ikiwa unaweza kuonyesha uwakilishi wa picha wa hili kama vyombo vidogo au mioyo badala ya namba.

Kitu cha Kujenga

Tuongeze 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 chombo chako. Alama ya maisha inapaswa kuonyeshwa chini kulia na iwe 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 seva ya HTTP kwenye anwani http://localhost:5000. Fungua kivinjari na ingiza anwani hiyo, kwa sasa inapaswa kuonyesha shujaa na maadui wote, na unapobonyeza mishale ya kushoto na kulia, shujaa husogea na anaweza kupiga maadui.

Ongeza Msimbo

Nakili mali zinazohitajika kutoka folda ya solution/assets/ kwenda 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 yaliyosalia (3), onyesha alama hizi kwenye skrini.

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

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

Ongeza maisha na alama.

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 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.

Panua darasa la Hero kufanya upunguzaji huu:

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

Kwa kila laser 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 Matukio ya 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. Je, 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 yako ikipungua unapogongana na maadui na alama zako zikiongezeka unapopiga maadui. Hongera! Mchezo wako karibu umekamilika.

🚀 Changamoto

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

Maswali ya Baada ya Somo

Maswali ya baada ya somo

Mapitio na Kujisomea

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

Kazi

Jenga Mchezo wa Alama

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