8.6 KiB

Raw Permalink Blame History

Jenga Mchezo wa Anga Sehemu ya 6: Mwisho na Kuanza Tena

Maswali ya Kabla ya Somo

Kuna njia tofauti za kuelezea hali ya mwisho katika mchezo. Ni jukumu lako kama mtengenezaji wa mchezo kuamua ni kwa nini mchezo umeisha. Hapa kuna sababu kadhaa, tukizingatia tunazungumzia mchezo wa anga ambao umekuwa ukijenga hadi sasa:

N Meli za maadui zimeharibiwa: Ni jambo la kawaida ikiwa unagawanya mchezo katika viwango tofauti kwamba unahitaji kuharibu N meli za maadui ili kukamilisha kiwango.
Meli yako imeharibiwa: Kuna michezo ambapo unapoteza mchezo ikiwa meli yako imeharibiwa. Njia nyingine ya kawaida ni kuwa na dhana ya maisha. Kila wakati meli yako inaharibiwa, inapunguza maisha. Mara maisha yote yanapopotea, basi unapoteza mchezo.
Umekusanya N alama: Hali nyingine ya kawaida ya mwisho ni kukusanya alama. Jinsi unavyopata alama ni juu yako, lakini ni jambo la kawaida kupeana alama kwa shughuli mbalimbali kama kuharibu meli ya adui au labda kukusanya vitu ambavyo vinaanguka wakati vinaharibiwa.
Kukamilisha kiwango: Hii inaweza kuhusisha masharti kadhaa kama X meli za maadui zimeharibiwa, Y alama zimekusanywa, au labda kipengee maalum kimekusanywa.

Kuanza Tena

Ikiwa watu wanapenda mchezo wako, kuna uwezekano mkubwa watataka kuucheza tena. Mara mchezo unapomalizika kwa sababu yoyote, unapaswa kutoa chaguo la kuanza tena.

✅ Fikiria kidogo kuhusu hali gani unadhani mchezo unamalizika, na kisha jinsi unavyohimizwa kuanza tena.

Kitu cha Kujenga

Utakuwa unaongeza sheria hizi kwenye mchezo wako:

Kushinda mchezo. Mara meli zote za maadui zinapoharibiwa, unashinda mchezo. Zaidi ya hayo, onyesha ujumbe wa ushindi.
Kuanza tena. Mara maisha yako yote yanapopotea au mchezo unashindwa, unapaswa kutoa njia ya kuanza tena mchezo. Kumbuka! Utahitaji kuanzisha upya mchezo na hali ya awali ya mchezo inapaswa kufutwa.

Hatua Zinazopendekezwa

Tafuta faili ambazo zimeundwa kwako katika folda ndogo ya your-work. Inapaswa kuwa na yafuatayo:

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

Anzisha mradi wako katika folda ya your_work kwa kuandika:

cd your-work
npm start

Hii itaanzisha seva ya HTTP kwenye anwani http://localhost:5000. Fungua kivinjari na weka anwani hiyo. Mchezo wako unapaswa kuwa katika hali inayoweza kuchezwa.

kidokezo: ili kuepuka maonyo katika Visual Studio Code, hariri kazi ya window.onload ili kuita gameLoopId kama ilivyo (bila let), na tangaza gameLoopId juu ya faili, kwa kujitegemea: let gameLoopId;

Ongeza Msimbo

Fuata hali ya mwisho. Ongeza msimbo unaofuatilia idadi ya maadui, au ikiwa meli ya shujaa imeharibiwa kwa kuongeza kazi hizi mbili:

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

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

Ongeza mantiki kwa watunzaji wa ujumbe. Hariri eventEmitter kushughulikia hali hizi:

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

Ongeza aina mpya za ujumbe. Ongeza Ujumbe huu kwenye kitu cha constants:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Ongeza msimbo wa kuanza tena msimbo unaoanzisha tena mchezo kwa kubonyeza kitufe kilichochaguliwa.
1. Sikiliza bonyezo la kitufe Enter. Hariri msikilizaji wa tukio la dirisha lako ili kusikiliza bonyezo hili:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Ongeza ujumbe wa kuanza tena. Ongeza Ujumbe huu kwenye constants ya Ujumbe wako:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

Tekeleza sheria za mchezo. Tekeleza sheria zifuatazo za mchezo:

Hali ya ushindi wa mchezaji. Wakati meli zote za maadui zimeharibiwa, onyesha ujumbe wa ushindi.

Kwanza, unda kazi ya 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);
}

Unda kazi ya 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)  
}

Mantiki ya kuanza tena. Wakati maisha yote yanapopotea au mchezaji ameshinda mchezo, onyesha kwamba mchezo unaweza kuanzishwa tena. Zaidi ya hayo, anzisha tena mchezo wakati kitufe cha kuanza tena kinapobonyezwa (unaweza kuamua ni kitufe gani kinapaswa kuhusishwa na kuanza tena).

Unda kazi ya 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);
  }
}

Ongeza mwito kwa eventEmitter ili kuanzisha tena mchezo katika initGame():

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

Ongeza kazi ya clear() kwa EventEmitter:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Hongera, Kapteni! Mchezo wako umekamilika! Umefanya kazi nzuri! 🚀 💥 👽

🚀 Changamoto

Ongeza sauti! Je, unaweza kuongeza sauti ili kuboresha uchezaji wa mchezo wako, labda wakati kuna pigo la laser, au shujaa anakufa au kushinda? Angalia sandbox ili kujifunza jinsi ya kucheza sauti kwa kutumia JavaScript.

Maswali ya Baada ya Somo

Maswali ya baada ya somo

Mapitio na Kujisomea

Kazi yako ni kuunda mfano mpya wa mchezo, kwa hivyo chunguza baadhi ya michezo ya kuvutia huko nje ili kuona ni aina gani ya mchezo unaweza kujenga.

Kazi

Jenga Mfano wa Mchezo

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.

8.6 KiB Raw Permalink Blame History