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

Gumawa ng Space Game Bahagi 5: Puntos at Buhay

Pre-Lecture Quiz

Pre-lecture quiz

Sa araling ito, matututuhan mo kung paano magdagdag ng puntos sa laro at magtala ng buhay.

Maglagay ng teksto sa screen

Upang maipakita ang puntos ng laro sa screen, kailangan mong malaman kung paano maglagay ng teksto sa screen. Ang sagot ay sa pamamagitan ng paggamit ng fillText() method sa canvas object. Maaari mo ring kontrolin ang iba pang aspeto tulad ng font na gagamitin, kulay ng teksto, at maging ang alignment nito (kaliwa, kanan, gitna). Narito ang isang halimbawa ng code na naglalagay ng teksto sa screen.

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

✅ Basahin pa ang tungkol sa kung paano magdagdag ng teksto sa canvas, at huwag mag-atubiling gawing mas maganda ang iyong disenyo!

Buhay, bilang konsepto sa laro

Ang konsepto ng buhay sa laro ay simpleng numero lamang. Sa konteksto ng isang space game, karaniwang naglalaan ng ilang buhay na nababawasan isa-isa kapag nasira ang iyong barko. Maganda kung maaari kang magpakita ng graphical na representasyon nito tulad ng maliliit na barko o puso sa halip na numero.

Ano ang gagawin

Idagdag ang mga sumusunod sa iyong laro:

Puntos ng Laro: Para sa bawat barko ng kalaban na masisira, dapat bigyan ang bayani ng ilang puntos, iminumungkahi namin ang 100 puntos bawat barko. Ang puntos ng laro ay dapat ipakita sa ibabang kaliwa.
Buhay: Ang iyong barko ay may tatlong buhay. Mawawalan ka ng isang buhay tuwing may kalabang barko na babangga sa iyo. Ang bilang ng buhay ay dapat ipakita sa ibabang kanan gamit ang sumusunod na graphic .

Mga Inirerekomendang Hakbang

Hanapin ang mga file na nilikha para sa iyo sa sub-folder na your-work. Dapat itong maglaman ng mga sumusunod:

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

Simulan ang iyong proyekto sa folder na your_work sa pamamagitan ng pag-type ng:

cd your-work
npm start

Ang nasa itaas ay magpapasimula ng HTTP Server sa address na http://localhost:5000. Buksan ang browser at ilagay ang address na iyon. Sa ngayon, dapat nitong ipakita ang bayani at lahat ng kalaban, at kapag pinindot mo ang kaliwa at kanang arrow, gumagalaw ang bayani at maaaring barilin ang mga kalaban.

Magdagdag ng code

Kopyahin ang mga kinakailangang assets mula sa folder na solution/assets/ papunta sa folder na your-work; magdadagdag ka ng life.png asset. Idagdag ang lifeImg sa window.onload function:
```
lifeImg = await loadTexture("assets/life.png");
```

Idagdag ang lifeImg sa listahan ng mga assets:

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

Magdagdag ng mga variable. Magdagdag ng code na kumakatawan sa kabuuang puntos (0) at natitirang buhay (3), at ipakita ang mga ito sa screen.

Palawakin ang updateGameObjects() function. Palawakin ang updateGameObjects() function upang hawakan ang mga banggaan ng kalaban:

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

Idagdag ang buhay at puntos.

I-initialize ang mga variable. Sa ilalim ng this.cooldown = 0 sa Hero class, itakda ang buhay at puntos:
```
this.life = 3;
this.points = 0;
```

Ipakita ang mga variable sa screen. Ipakita ang mga halagang ito sa screen:

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

Idagdag ang mga method sa Game loop. Siguraduhing idagdag ang mga function na ito sa iyong window.onload function sa ilalim ng updateGameObjects():
```
drawPoints();
drawLife();
```

Ipatupad ang mga patakaran ng laro. Ipatupad ang mga sumusunod na patakaran ng laro:

Para sa bawat banggaan ng bayani at kalaban, bawasan ang isang buhay.

Palawakin ang Hero class upang gawin ang pagbawas na ito:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Para sa bawat laser na tumama sa kalaban, dagdagan ang puntos ng laro ng 100 puntos.

Palawakin ang Hero class upang gawin ang pagtaas na ito:

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

Idagdag ang mga function na ito sa iyong Collision Event Emitters:

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

✅ Mag-research ng kaunti upang matuklasan ang iba pang mga laro na ginawa gamit ang JavaScript/Canvas. Ano ang kanilang mga karaniwang katangian?

Sa pagtatapos ng gawaing ito, dapat mong makita ang maliliit na 'life' ships sa ibabang kanan, puntos sa ibabang kaliwa, at dapat mong makita ang pagbawas ng bilang ng buhay kapag bumangga ka sa mga kalaban at ang pagtaas ng puntos kapag binaril mo ang mga kalaban. Magaling! Halos tapos na ang iyong laro.

🚀 Hamon

Halos tapos na ang iyong code. Ano ang nakikita mong susunod na hakbang?

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Mag-research ng ilang paraan kung paano mo maaring dagdagan o bawasan ang puntos at buhay sa laro. May mga kawili-wiling game engine tulad ng PlayFab. Paano makakatulong ang paggamit ng isa sa mga ito upang mapahusay ang iyong laro?

Takdang-Aralin

Build a Scoring Game

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.