History

Lee Stott 2daab5271b Update Quiz Link		3 weeks ago
..
solution	🌐 Update translations via Co-op Translator	4 weeks ago
your-work	🌐 Update translations via Co-op Translator	4 weeks ago
README.md	Update Quiz Link	3 weeks ago
assignment.md	🌐 Update translations via Co-op Translator	4 weeks ago

README.md

Unescape Escape

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 geliştirdiğ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 edildiğinde 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 miktar 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

Oyununuzda şu kuralları ekleyeceksiniz:

Oyunu kazanma. Tüm düşman gemileri yok edildiğinde oyunu kazanırsınız. Ayrıca bir zafer mesajı görüntüleyin.
Yeniden başlatma. Tüm canlarınızı kaybettiğinizde 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

Bitirme koşulunu takip et. 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;
}

Mesaj işleyicilere mantık ekle. eventEmitter'ı şu koşulları ele alacak şekilde 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);
});

Yeni mesaj türleri ekle. Bu mesajları constants nesnesine ekleyin:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Yeniden başlatma kodu ekle. Seçilen bir tuşa basıldığında oyunu yeniden başlatacak kodu ekleyin.
1. Enter tuşuna basmayı dinle. 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ı ekle. Bu mesajı Messages sabitine ekleyin:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

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

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

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

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

Yeniden başlatma mantığı. Tüm canlar kaybedildiğ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).

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

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

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

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 ilginç oyunlardan bazılarını keşfederek ne tür bir oyun yapabileceğinizi görün.

Ödev

Bir Örnek Oyun Yapın

Feragatname:
Bu belge, AI çeviri hizmeti Co-op Translator kullanılarak çevrilmiştir. Doğruluk için çaba göstersek de, otomatik çevirilerin hata veya yanlışlık 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ış anlamalar veya yanlış yorumlamalar için sorumluluk kabul etmiyoruz.

README.md Unescape Escape