Proje: Canvas mini oyun
5 derslik canvas mini oyun projesine genel bakış: sahne, hareket, çarpışma ve oyun döngüsü.
Proje: Canvas mini oyun
Bu 5 derslik projede bir canvas mini oyun geliştireceğiz. Oyuncu mavi bir kareyi ok tuşlarıyla hareket ettirir; yeşil hedefe değince puan kazanır ve hedef yeni yere taşınır.
Adım adım kuracağımız yapı:
canvasve 2D çizim bağlamı- Sahne ve oyuncu çizimi
- Klavye ile hareket
- Çarpışma algılama
- Skor ve oyun döngüsü
Her ders önceki dersin çözümünün üzerine çıkar.
Oyun mimarisi
Mini oyun üç temel parçadan oluşur: durum (oyuncu ve hedefin konumu), girdi (klavye tuşları) ve çizim döngüsü. Çizim döngüsü her karede önce sahneyi temizler, sonra nesneleri çizer, son olarak girdiyi işleyerek konumu günceller.
Bu döngü requestAnimationFrame ile 60 kare/saniye hızında çalışır. Her kare çok hızlı olduğu için oyuncu akıcı bir hareket görür.
Uygulama Canvas ve 2D bağlamı kur
Sayfada <canvas id="gameCanvas"> öğesi hazır. canvas değişkenine bu öğeyi document.querySelector("#gameCanvas") ile seç. Sonra ctx değişkenine canvas.getContext("2d") ile 2D çizim bağlamını ata.
Örnek çözümü göster
const canvas = document.querySelector("#gameCanvas");
const ctx = canvas.getContext("2d");Kendini test et
-
Hangi yöntem canvas öğesinin 2D çizim bağlamını verir?
- getContext("2d")
- getCanvas("2d")
- fillRect("2d")
- drawImage("2d")
Cevabı göster
getContext("2d") — Doğru! getContext("2d") çağrısı 2D çizim bağlamını döndürür.
-
Canvas öğesini seç
const canvas = document.____;Cevabı göster
const canvas = document.querySelector("#gameCanvas"); -
Oyun terimlerini eşleştir
- Canvas
- 2B çizim yüzeyi
- Context
- Çizim bağlamı
- requestAnimationFrame
- Kare döngüsü
- fillRect
- Dikdörtgen doldur