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 6: Pagtatapos at Pag-restart

Pre-Lecture Quiz

Pre-lecture quiz

May iba't ibang paraan upang ipahayag ang kondisyon ng pagtatapos sa isang laro. Nasa iyo bilang tagalikha ng laro kung bakit ito magtatapos. Narito ang ilang mga dahilan, kung iisipin natin ang tungkol sa space game na ginagawa mo:

N Kalabang barko ang nawasak: Karaniwan ito kung hinahati mo ang laro sa iba't ibang antas, kung saan kailangan mong wasakin ang N kalabang barko upang matapos ang isang antas.
Ang iyong barko ay nawasak: May mga laro kung saan talo ka kapag ang iyong barko ay nawasak. Isa pang karaniwang paraan ay ang konsepto ng "buhay." Sa tuwing ang iyong barko ay nawasak, mababawasan ka ng isang buhay. Kapag naubos na ang lahat ng buhay, talo ka na sa laro.
Nakalikom ka ng N puntos: Isa pang karaniwang kondisyon ng pagtatapos ay ang pagkolekta ng puntos. Nasa iyo kung paano makakakuha ng puntos, ngunit karaniwan itong ibinibigay sa mga aktibidad tulad ng pagwasak ng kalabang barko o pagkolekta ng mga bagay na bumabagsak kapag sila ay nawasak.
Natapos ang isang antas: Maaaring kabilang dito ang ilang mga kondisyon tulad ng X nawasak na kalabang barko, Y nakolektang puntos, o marahil isang partikular na bagay na nakolekta.

Pag-restart

Kung nagustuhan ng mga tao ang iyong laro, malamang na gusto nilang ulitin ito. Kapag natapos ang laro sa anumang dahilan, dapat kang magbigay ng opsyon upang i-restart ito.

✅ Mag-isip ng kaunti tungkol sa mga kondisyon kung kailan natatapos ang isang laro, at kung paano ka hinihikayat na i-restart ito.

Ano ang gagawin

Idadagdag mo ang mga patakarang ito sa iyong laro:

Panalo sa laro. Kapag ang lahat ng kalabang barko ay nawasak, panalo ka sa laro. Magpakita rin ng mensahe ng tagumpay.
Pag-restart. Kapag naubos na ang lahat ng iyong buhay o nanalo ka sa laro, dapat kang magbigay ng paraan upang i-restart ang laro. Tandaan! Kailangan mong i-reinitialize ang laro at burahin ang nakaraang estado ng laro.

Mga Inirerekomendang Hakbang

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

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
  -| life.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 isang browser at ilagay ang address na iyon. Dapat nasa playable na estado ang iyong laro.

tip: upang maiwasan ang mga babala sa Visual Studio Code, i-edit ang function na window.onload upang tawagin ang gameLoopId nang walang let, at ideklara ang gameLoopId sa itaas ng file nang hiwalay: let gameLoopId;

Magdagdag ng Code

Subaybayan ang kondisyon ng pagtatapos. Magdagdag ng code na sumusubaybay sa bilang ng mga kalaban, o kung ang hero ship ay nawasak sa pamamagitan ng pagdaragdag ng dalawang function na ito:

function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}

Magdagdag ng lohika sa mga message handler. I-edit ang eventEmitter upang hawakan ang mga kondisyong ito:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
    first.dead = true;
    second.dead = true;
    hero.incrementPoints();

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // loss before victory
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});

eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});

Magdagdag ng mga bagong uri ng mensahe. Idagdag ang mga Mensaheng ito sa constants object:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Magdagdag ng restart code na magre-restart ng laro kapag pinindot ang napiling button.
1. Makinig sa key press na Enter. I-edit ang eventListener ng iyong window upang makinig sa pindot na ito:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Magdagdag ng restart message. Idagdag ang Mensaheng ito sa iyong Messages constant:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

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

Kondisyon ng panalo ng manlalaro. Kapag ang lahat ng kalabang barko ay nawasak, magpakita ng mensahe ng tagumpay.

Una, gumawa ng function na displayMessage():

function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}

Gumawa ng function na endGame():

function endGame(win) {
  clearInterval(gameLoopId);

  // set a delay so we are sure any paints have finished
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}

Lohika ng pag-restart. Kapag naubos na ang lahat ng buhay o nanalo ang manlalaro, magpakita na maaaring i-restart ang laro. Bukod dito, i-restart ang laro kapag pinindot ang restart key (maaari mong piliin kung anong key ang itatalaga sa restart).

Gumawa ng function na resetGame():

function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}

Magdagdag ng tawag sa eventEmitter upang i-reset ang laro sa initGame():

eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});

Magdagdag ng function na clear() sa EventEmitter:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Binabati kita, Kapitan! Kumpleto na ang iyong laro! Mahusay na trabaho! 🚀 💥 👽

🚀 Hamon

Magdagdag ng tunog! Kaya mo bang magdagdag ng tunog upang mapaganda ang gameplay ng iyong laro, marahil kapag may laser hit, o kapag namatay o nanalo ang hero? Tingnan ang sandbox upang matutunan kung paano magpatugtog ng tunog gamit ang JavaScript.

Post-Lecture Quiz

Post-lecture quiz

Review at Pag-aaral sa Sarili

Ang iyong takdang-aralin ay gumawa ng bagong sample na laro, kaya mag-explore ng ilang mga kawili-wiling laro upang makita kung anong uri ng laro ang maaari mong gawin.

Takdang-Aralin

Gumawa ng Sample na Laro

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.