Web-Dev-For-Beginners/translations/tr/6-space-game/6-end-condition

Uzay Oyunu Yapımı Bölüm 6: Bitirme ve Yeniden Başlatma

Ders Öncesi Test

Ders öncesi testi

Bir oyunda bitirme koşulunu ifade etmenin farklı yolları vardır. Oyunun yaratıcısı olarak, oyunun neden sona erdiğini belirlemek size bağlıdır. Şimdiye kadar inşa ettiğiniz uzay oyunu bağlamında, işte bazı nedenler:

• N düşman gemisi yok edildi: Oyunu farklı seviyelere böldüğünüzde, bir seviyeyi tamamlamak için N düşman gemisini yok etmeniz gerekmesi oldukça yaygındır.
• Geminiz yok edildi: Geminiz yok edilirse oyunu kaybettiğiniz oyunlar kesinlikle vardır. Bir diğer yaygın yaklaşım ise "can" kavramını kullanmaktır. Geminiz her yok edildiğinde bir can eksilir. Tüm canlar tükendiğinde oyunu kaybedersiniz.
• N puan topladınız: Bir diğer yaygın bitirme koşulu, belirli bir puan toplamaktır. Puanları nasıl kazanacağınız size bağlıdır, ancak genellikle düşman gemilerini yok etmek veya yok edilen gemilerden düşen eşyaları toplamak gibi çeşitli aktivitelere puan atanır.
• Bir seviyeyi tamamladınız: Bu, X düşman gemisinin yok edilmesi, Y puanın toplanması veya belirli bir eşyanın toplanması gibi birkaç koşulu içerebilir.

Yeniden Başlatma

Eğer insanlar oyununuzu beğenirse, tekrar oynamak isteyeceklerdir. Oyun herhangi bir nedenle sona erdiğinde, yeniden başlatma seçeneği sunmalısınız.

✅ Bir oyunun hangi koşullarda sona erdiğini ve ardından nasıl yeniden başlatılmaya teşvik edildiğinizi düşünün.

Ne Yapılacak

Oyununuz için şu kuralları ekleyeceksiniz:

1. Oyunu kazanma. Tüm düşman gemileri yok edildiğinde oyunu kazanırsınız. Ayrıca bir zafer mesajı görüntüleyin.
2. Yeniden başlatma. Tüm canlarınız tükendiğinde veya oyunu kazandığınızda, oyunu yeniden başlatma seçeneği sunmalısınız. Unutmayın! Oyunu yeniden başlatmanız ve önceki oyun durumunu temizlemeniz gerekecek.

Önerilen Adımlar

your-work alt klasöründe sizin için oluşturulmuş dosyaları bulun. Şu dosyaları içermelidir:

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

Projenizi your_work klasöründe şu komutla başlatın:

cd your-work
npm start

Yukarıdaki komut, http://localhost:5000 adresinde bir HTTP Sunucusu başlatacaktır. Bir tarayıcı açın ve bu adresi girin. Oyununuz oynanabilir durumda olmalıdır.

ipucu: Visual Studio Code'da uyarılardan kaçınmak için, window.onload fonksiyonunu gameLoopId'yi olduğu gibi çağıracak şekilde düzenleyin (başında let olmadan) ve gameLoopId'yi dosyanın en üstünde bağımsız olarak tanımlayın: let gameLoopId;

Kod Ekleme

1. Bitirme koşulunu takip edin. Düşman sayısını veya kahraman gemisinin yok edilip edilmediğini takip eden şu iki fonksiyonu ekleyin:

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

2. Mesaj işleyicilere mantık ekleyin. eventEmitter'ı şu koşulları işlemek için düzenleyin:

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

3. Yeni mesaj türleri ekleyin. Bu mesajları constants nesnesine ekleyin:

   GAME_END_LOSS: "GAME_END_LOSS",
   GAME_END_WIN: "GAME_END_WIN",
   

4. Yeniden başlatma kodu ekleyin. Seçilen bir tuşa basıldığında oyunu yeniden başlatacak kodu ekleyin.

   1. Enter tuşuna basmayı dinleyin. Pencerenizin eventListener'ını bu tuşu dinleyecek şekilde düzenleyin:

    else if(evt.key === "Enter") {
       eventEmitter.emit(Messages.KEY_EVENT_ENTER);
     }
   

   1. Yeniden başlatma mesajı ekleyin. Bu mesajı Messages sabitine ekleyin:

      KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
      

5. Oyun kurallarını uygulayın. Şu oyun kurallarını uygulayın:

   1. Oyuncu kazanma koşulu. Tüm düşman gemileri yok edildiğinde bir zafer mesajı görüntüleyin.

      1. İlk olarak, bir displayMessage() fonksiyonu oluşturun:

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

      1. Bir endGame() fonksiyonu oluşturun:

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

   2. Yeniden başlatma mantığı. Tüm canlar tükendiğinde veya oyuncu oyunu kazandığında, oyunun yeniden başlatılabileceğini gösterin. Ayrıca, yeniden başlatma tuşuna basıldığında oyunu yeniden başlatın (hangi tuşun yeniden başlatmaya atanacağına siz karar verebilirsiniz).

      1. resetGame() fonksiyonunu oluşturun:

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

   3. initGame() içinde oyunu sıfırlamak için eventEmitter çağrısı ekleyin:

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

   4. EventEmitter'a bir clear() fonksiyonu ekleyin:

      clear() {
        this.listeners = {};
      }
      

👽 💥 🚀 Tebrikler, Kaptan! Oyununuz tamamlandı! Harika iş çıkardınız! 🚀 💥 👽

---

🚀 Zorluk

Bir ses ekleyin! Oyun deneyiminizi geliştirmek için bir ses ekleyebilir misiniz? Belki bir lazer çarptığında, kahraman öldüğünde veya kazandığında bir ses çalabilir. JavaScript kullanarak ses çalmayı öğrenmek için bu sandbox'a göz atın.

Ders Sonrası Test

Ders sonrası testi

Gözden Geçirme ve Kendi Kendine Çalışma

Göreviniz, yeni bir örnek oyun oluşturmaktır, bu yüzden inşa edebileceğiniz oyun türlerini görmek için ilginç oyunları keşfedin.

Ödev

Örnek Bir Oyun Yapın

---

Feragatname:
Bu belge, Co-op Translator adlı yapay zeka çeviri hizmeti kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlıklar içerebileceğini lütfen unutmayın. Belgenin orijinal dili, yetkili kaynak olarak kabul edilmelidir. Kritik bilgiler için profesyonel insan çevirisi önerilir. Bu çevirinin kullanımından kaynaklanan yanlış anlama veya yanlış yorumlamalardan sorumlu değiliz.