8.6 KiB

Raw Permalink Blame History

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

Maswali ya Awali ya Somo

Kuna njia tofauti za kuonyesha hali ya mwisho katika mchezo. Ni juu yako 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 vinaweza kuanguka wakati vinaharibiwa.
Kukamilisha kiwango: Hii inaweza kuhusisha masharti kadhaa kama X meli za maadui zimeharibiwa, Y alama zimekusanywa au labda kwamba kipengele maalum kimekusanywa.

Kuanzisha Tena

Ikiwa watu wanapenda mchezo wako, kuna uwezekano wa kutaka kuucheza tena. Mara mchezo unapomalizika kwa sababu yoyote, unapaswa kutoa chaguo la kuanzisha tena.

✅ Fikiria kidogo kuhusu masharti ambayo unadhani mchezo unamalizika, na kisha jinsi unavyohimizwa kuanzisha 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.
Kuanzisha tena. Mara maisha yako yote yanapopotea au mchezo unashinda, unapaswa kutoa njia ya kuanzisha 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 ingiza 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 wahandaji 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 kuanzisha tena msimbo unaoanzisha tena mchezo kwa kubonyeza kitufe kilichochaguliwa.
1. Sikiliza bonyeza kitufe Enter. Hariri msikilizaji wa tukio la dirisha lako ili kusikiliza bonyeza hili:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Ongeza ujumbe wa kuanzisha 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 kuanzisha tena. Wakati maisha yote yanapopotea au mchezaji ameshinda mchezo, onyesha kwamba mchezo unaweza kuanzishwa tena. Zaidi ya hayo, anzisha tena mchezo wakati kitufe cha kuanzisha tena kinapobonyezwa (unaweza kuamua ni kitufe gani kinapaswa kuhusishwa na kuanzisha 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 leza, 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