7.3 KiB

Raw Permalink Blame History Unescape Escape

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

Ders Öncesi Test

Bu derste, bir oyuna puan eklemeyi ve can hesaplamayı öğreneceksiniz.

Ekrana metin çizmek

Ekranda bir oyun puanını gösterebilmek için, metni ekrana nasıl yerleştireceğinizi bilmeniz gerekir. Bunun cevabı, canvas nesnesi üzerinde fillText() metodunu kullanmaktır. Ayrıca hangi fontun kullanılacağı, metnin rengi ve hizalaması (sol, sağ, merkez) gibi diğer özellikleri de kontrol edebilirsiniz. Aşağıda ekrana metin çizen bir kod örneği bulunmaktadır.

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

✅ Canvas'a nasıl metin eklenir hakkında daha fazla bilgi edinin ve kendi tasarımınızı daha şık hale getirmekten çekinmeyin!

Oyun konsepti olarak can

Bir oyunda can sahibi olma konsepti sadece bir sayıdan ibarettir. Uzay oyunu bağlamında, geminiz hasar aldığında birer birer azalan belirli bir can seti atamak yaygındır. Bu, bir sayı yerine minigemi veya kalp gibi grafiksel bir temsil göstermek hoş bir dokunuş olabilir.

Ne yapılacak?

Oyununuzda aşağıdakileri ekleyelim:

Oyun puanı: Yok edilen her düşman gemisi için kahramana puan verilmelidir. Gemi başına 100 puan öneriyoruz. Oyun puanı ekranın sol alt köşesinde gösterilmelidir.
Can: Geminizin üç canı vardır. Her düşman gemisi sizinle çarpıştığında bir can kaybedersiniz. Can puanı ekranın sağ alt köşesinde gösterilmeli ve aşağıdaki grafikle oluşturulmalıdır: .

Önerilen adımlar

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

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

Projenizi your_work klasöründe başlatmak için şu komutu yazı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. Şu anda kahramanı ve tüm düşmanları görmelisiniz. Sol ve sağ ok tuşlarına bastığınızda kahraman hareket eder ve düşmanları vurabilir.

Kod ekleme

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

lifeImg'i varlıklar listesine ekleyin:

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

Değişkenler ekleyin. Toplam puanı (0) ve kalan canları (3) temsil eden kod ekleyin, bu puanları ekranda gösterin.

updateGameObjects() fonksiyonunu genişletin. Düşman çarpışmalarını işlemek için updateGameObjects() fonksiyonunu genişletin:

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

Can ve puan ekleyin.

Değişkenleri başlatın. Hero sınıfında this.cooldown = 0 altında can ve puan ayarlayın:
```
this.life = 3;
this.points = 0;
```

Değişkenleri ekrana çizin. Bu değerleri ekrana çizin:

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

Oyun döngüsüne metotlar ekleyin. Bu fonksiyonları updateGameObjects() altında window.onload fonksiyonuna eklediğinizden emin olun:
```
drawPoints();
drawLife();
```

Oyun kurallarını uygulayın. Aşağıdaki oyun kurallarını uygulayın:

Her kahraman ve düşman çarpışması için, bir can eksiltin.

Hero sınıfını bu eksiltmeyi yapmak için genişletin:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

Her lazer düşmana çarptığında, oyun puanını 100 puan artırın.

Kahraman sınıfını bu artırmayı yapmak için genişletin:

  incrementPoints() {
    this.points += 100;
  }

Bu fonksiyonları Çarpışma Olayı Emitters'a ekleyin:

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/Canvas kullanılarak oluşturulan diğer oyunları keşfetmek için biraz araştırma yapın. Ortak özellikleri nelerdir?

Bu çalışmanın sonunda, sağ alt köşede küçük 'can' gemilerini, sol alt köşede puanları görmelisiniz. Düşmanlarla çarpıştığınızda can sayınız azalmalı ve düşmanları vurduğunuzda puanlarınız artmalı. Tebrikler! Oyununuz neredeyse tamamlandı.

🚀 Meydan Okuma

Kodunuz neredeyse tamamlandı. Bir sonraki adımlarınızı hayal edebiliyor musunuz?

Ders Sonrası Test

Ders sonrası test

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

Oyun puanlarını ve canları artırmanın ve azaltmanın yollarını araştırın. PlayFab gibi ilginç oyun motorları var. Bunlardan birini kullanmak oyununuzu nasıl geliştirebilir?

Ö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 ç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.

7.3 KiB Raw Permalink Blame History Unescape Escape