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ı:

canvas ve 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

Sıradaki ders: Sahne ve oyuncu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler