JavaScript
Çarpışma algılama
İki dikdörtgenin çarpışıp çarpışmadığını bounding box ile kontrol edersin.
Sınır kutusu çarpışması
İki dikdörtgenin çakışıp çakışmadığını denetlemek için bounding box yöntemini kullanırız. Her dikdörtgen eksen hizalıdır (yani eğik değil); bu yüzden test AABB (axis-aligned bounding box) adıyla bilinir.
İki kutu ancak ve ancak her iki eksende de örtüşüyorsa çakışır. x ekseninde örtüşme: a.x < b.x + b.width ve a.x + a.width > b.x. y ekseninde de aynı koşul geçerlidir. Dört koşulun hepsi doğruysa kutular çakışıyor demektir.
Hedefi çiz ve çarpışmayı göster
Oyuna bir target nesnesi ekleriz; örneğin { x: 360, y: 80, width: 30, height: 30 }. draw işlevinde önce hedefi yeşil ("#16a34a") renkle çizeriz, sonra hits(player, target) çağrısının sonucuna göre oyuncunun rengini belirleriz. Çarpışma varsa kırmızı ("#dc2626"), yoksa mavi ("#2563eb") kullanırız.
Bu görsel geri bildirim, çarpışma algılamanın çalıştığını hemen gösterir.
Uygulama Hedef ekle ve çarpışmayı algıla
target nesnesini { x: 360, y: 80, width: 30, height: 30 } olarak tanımla. hits(a, b) işlevini ekle: dört koşulu && ile birleştirip döndürsün (a.x < b.x + b.width, a.x + a.width > b.x, a.y < b.y + b.height, a.y + a.height > b.y). Sonra draw içine, oyuncudan önce, hedefi yeşil "#16a34a" renkle çiz: ctx.fillStyle = "#16a34a" ve ctx.fillRect(target.x, target.y, target.width, target.height). Oyuncunun rengini hits(player, target) ? "#dc2626" : "#2563eb" ifadesiyle belirle.
Örnek çözümü göster
const target = { x: 360, y: 80, width: 30, height: 30 };
function hits(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
// draw işlevinin içine ekle:
ctx.fillStyle = "#16a34a";
ctx.fillRect(target.x, target.y, target.width, target.height);
ctx.fillStyle = hits(player, target) ? "#dc2626" : "#2563eb";
Kendini test et
-
Çarpışma koşulunu tamamla
function hits(a, b) { return a.x < b.x + b.width && a.x + a.width > b.x && ____; }
Cevabı göster
function hits(a, b) { return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y; }
-
Çarpışma terimlerini eşleştir
- bounding box
- Dikdörtgen sınır
- intersection
- Kesişim
- AABB
- Eksen hizalı kutu
- hits
- Çarpışma denetimi
-
İki eksen hizalı dikdörtgenin çakışma koşulu hangisidir?
- a.x > b.x
- a.width < b.width
- a.y === b.y
- a.x < b.x + b.width && a.x + a.width > b.x
Cevabı göster
a.x < b.x + b.width && a.x + a.width > b.x — Doğru! x ekseninde örtüşme için bu iki koşul gerekli.
Sıradaki ders: Proje sonu - Mini oyun
