9.2 KiB

Raw Blame History Unescape Escape

Uzay Oyunu Yapımı Bölüm 5: Puanlama ve Canlar

Ders Öncesi Test

Uzay oyununuzu gerçek bir oyun gibi hissettirmeye hazır mısınız? Puanlama ve can yönetimi ekleyelim - Space Invaders gibi erken dönem arcade oyunlarını basit bir gösterimden bağımlılık yaratan eğlenceye dönüştüren temel mekanikler. İşte oyununuzun gerçekten oynanabilir hale geldiği yer.

Ekranda Metin Çizmek - Oyununuzun Sesi

Puanınızı göstermek için, tuval üzerinde metin nasıl çizileceğini öğrenmemiz gerekiyor. fillText() yöntemi, bunun için ana aracınızdır - klasik arcade oyunlarında puanları ve durum bilgilerini göstermek için kullanılan aynı tekniktir.

Metin görünümünü tamamen kontrol edebilirsiniz:

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Tuval üzerine metin ekleme hakkında daha fazla bilgi edinin - yazı tipleri ve stil ile ne kadar yaratıcı olabileceğinize şaşırabilirsiniz!

Canlar - Sadece Bir Sayıdan Fazlası

Oyun tasarımında, bir "can" oyuncunun hata yapma payını temsil eder. Bu kavram, birden fazla top ile oynayabileceğiniz pinball makinelerine kadar uzanır. Asteroids gibi erken dönem video oyunlarında, canlar oyunculara risk alma ve hatalardan öğrenme izni verdi.

Görsel temsil büyük önem taşır - sadece "Canlar: 3" yerine gemi simgeleri göstermek, dil engellerini aşmak için erken arcade kabinlerinin ikonografi kullandığı gibi, anında görsel tanıma sağlar.

Oyununuzun Ödül Sistemini İnşa Etmek

Şimdi oyuncuları meşgul tutan temel geri bildirim sistemlerini uygulayacağız:

Puanlama sistemi: Her yok edilen düşman gemisi 100 puan kazandırır (yuvarlak sayılar oyuncuların zihinsel olarak hesaplamasını kolaylaştırır). Puan, sol alt köşede gösterilir.
Can sayacı: Kahramanınız üç canla başlar - erken dönem arcade oyunlarının zorluk ve oynanabilirlik dengesini sağlamak için belirlediği bir standart. Her düşmanla çarpışma bir cana mal olur. Kalan canlar sağ alt köşede gemi simgeleriyle gösterilir .

Hadi Başlayalım!

Öncelikle çalışma alanınızı ayarlayın. your-work alt klasöründeki dosyalara gidin. Bu dosyaları görmelisiniz:

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

Oyununuzu test etmek için, your_work klasöründen geliştirme sunucusunu başlatın:

cd your-work
npm start

Bu, http://localhost:5000 adresinde yerel bir sunucu çalıştırır. Bu adresi tarayıcınızda açarak oyununuzu görebilirsiniz. Kontrolleri ok tuşlarıyla test edin ve her şeyin çalıştığını doğrulamak için düşmanları vurmaya çalışın.

Kodlama Zamanı!

Gerekli görsel varlıkları alın. solution/assets/ klasöründen life.png varlığını kopyalayarak your-work klasörüne ekleyin. Ardından lifeImg'i window.onload fonksiyonunuza ekleyin:
```
lifeImg = await loadTexture("assets/life.png");
```

lifeImg'i varlık listenize eklemeyi unutmayın:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Oyun değişkenlerinizi ayarlayın. Toplam puanınızı (0'dan başlayarak) ve kalan canlarınızı (3'ten başlayarak) takip etmek için biraz kod ekleyin. Bunları ekranda göstereceğiz, böylece oyuncular her zaman durumlarını bilecek.

Çarpışma algılama uygulayın. updateGameObjects() fonksiyonunuzu düşmanların kahramanınızla çarpıştığını algılayacak şekilde genişletin:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Kahramanınıza can ve puan takibi ekleyin.

Sayaçları başlatın. Hero sınıfınızdaki this.cooldown = 0 altında, can ve puan ayarlarını yapın:
```
this.life = 3;
this.points = 0;
```

Bu değerleri oyuncuya gösterin. Bu değerleri ekranda çizmek için fonksiyonlar oluşturun:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Her şeyi oyun döngünüze bağlayın. Bu fonksiyonları updateGameObjects()'tan hemen sonra window.onload fonksiyonunuza ekleyin:
```
drawPoints();
drawLife();
```

Oyun sonuçları ve ödüller uygulayın. Şimdi oyuncu eylemlerini anlamlı kılan geri bildirim sistemlerini ekleyeceğiz:
1. Çarpışmalar can kaybettirir. Kahramanınız her düşmanla çarpıştığında bir can kaybetmelisiniz.
  
  Hero sınıfınıza bu yöntemi ekleyin:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Düşmanları vurmak puan kazandırır. Her başarılı vuruş 100 puan kazandırır, doğru atışlar için anında olumlu geri bildirim sağlar.
  
  Kahraman sınıfınızı bu artırma yöntemiyle genişletin:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Şimdi bu fonksiyonları çarpışma olaylarınıza bağlayın:
```
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});
```

✅ JavaScript ve Canvas ile yapılmış diğer oyunlar hakkında meraklı mısınız? Biraz araştırma yapın - mümkün olan şeylere şaşırabilirsiniz!

Bu özellikleri uyguladıktan sonra, oyununuzu test ederek tam geri bildirim sistemini çalışırken görün. Sağ alt köşede can simgelerini, sol alt köşede puanınızı görmelisiniz ve çarpışmaların canları azalttığını, başarılı atışların ise puanınızı artırdığını izleyin.

Oyununuz artık erken dönem arcade oyunlarını bu kadar etkileyici yapan temel mekaniklere sahip - net hedefler, anında geri bildirim ve oyuncu eylemleri için anlamlı sonuçlar.

GitHub Copilot Agent Challenge 🚀

Agent modunu kullanarak aşağıdaki meydan okumayı tamamlayın:

Açıklama: Uzay oyununun puanlama sistemini, kalıcı depolama ve bonus puanlama mekanikleri ile geliştirin.

İstek: Oyuncunun en iyi puanını localStorage'a kaydeden bir yüksek puan sistemi oluşturun. Ardışık düşman öldürmeleri için bonus puanlar (kombinasyon sistemi) ekleyin ve farklı düşman türleri için farklı puan değerleri uygulayın. Oyuncu yeni bir yüksek puan elde ettiğinde görsel bir gösterge ekleyin ve oyun ekranında mevcut yüksek puanı gösterin.

🚀 Meydan Okuma

Artık puanlama ve canlara sahip işlevsel bir oyununuz var. Oyuncu deneyimini geliştirebilecek ek özellikler neler olabilir?

Ders Sonrası Test

Ders sonrası test

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

Daha fazla keşfetmek ister misiniz? Oyun puanlama ve can sistemlerine farklı yaklaşımları araştırın. PlayFab gibi puanlama, liderlik tabloları ve oyuncu ilerlemesini yöneten büyüleyici oyun motorları var. Böyle bir şeyi entegre etmek oyununuzu bir sonraki seviyeye nasıl taşıyabilir?

Ödev

Puanlama Oyunu Yap

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

9.2 KiB Raw Blame History Unescape Escape