Proje sonu - Mini oyun
Mini oyunu tamamlayıp sahne, hareket ve çarpışma akışını çalıştırırsın.
Hepsini birleştir
Son dersde oyunu tamamlıyoruz. Sahne, oyuncu, klavye hareketi ve çarpışma algılama hazır. Şimdi oyuna skor ekleyeceğiz. Oyuncu hedefe değince skor bir artar, hedef rastgele yeni bir konuma taşınır ve skor sayfada gösterilir.
Skoru ekranda göstermek için HTML'deki #score öğesini seçer ve textContent ile güncelleriz. Hedefin yeni konumu Math.random() ile canvas sınırları içinde rastgele seçilir.
Hedefi rastgele taşı
Çarpışma olduğunda hedefi canvas sınırları içinde rastgele bir noktaya taşırız. x için Math.random() * (canvas.width - target.width) ifadesini kullanırız: bu, 0 ile canvas genişliğinden hedef genişliğini çıkaran değer arasında bir sayı verir. Aynı şeyi y için de yaparız.
Böylece hedef her zaman canvas içinde kalır ve oyuncu onu tekrar yakalamak için hareket etmek zorundadır. Skor her çarpışmada score++ ile bir artar.
Uygulama Skoru ekle ve hedefi taşı
Dosyanın başında ctx tanımından sonra const scoreLabel = document.querySelector("#score"); satırını ekle. target tanımından sonra let score = 0; satırını ekle. Sonra update işlevinin sonuna, ok tuşu kodlarından sonra, bir if (hits(player, target)) bloğu ekle: içinde score++, scoreLabel.textContent = "Score: " + score, target.x = Math.random() * (canvas.width - target.width) ve target.y = Math.random() * (canvas.height - target.height) satırları olsun.
Örnek çözümü göster
const scoreLabel = document.querySelector("#score");
let score = 0;
// update işlevine ekle:
if (hits(player, target)) {
score++;
scoreLabel.textContent = "Score: " + score;
target.x = Math.random() * (canvas.width - target.width);
target.y = Math.random() * (canvas.height - target.height);
}Kendini test et
-
Oyun döngüsünde her karede önce ne yapılır?
- Sahne temizlenir ve çizim yeniden yapılır
- Skor sıfırlanır
- Tuşlar kaydedilir
- Hedef taşınır
Cevabı göster
Sahne temizlenir ve çizim yeniden yapılır — Doğru! Her kare clearRect ile başlar, sonra nesneler çizilir.
-
Skoru ekrana yaz
scoreLabel.textContent = ____;Cevabı göster
scoreLabel.textContent = "Score: " + score; -
Proje parçalarını eşleştir
- Sahne
- Çizim yüzeyi
- Hareket
- Tuşlarla konum
- Çarpışma
- Kutu kesişimi
- Oyun döngüsü
- Kare kare yenile