Bölüm 4 · Sunum 1

Değdi mi? Çarpışma ve sekme

Ekranda gezen şekilleri oyuna çeviren soru: iki şey birbirine değdi mi?

Tuval sınırıDikdörtgenler: AABBDaireler: distSekme

Top rakete değdi mi? Bilgisayar bunu nereden bilecek?

Ekranda yalnızca renkli pikseller var. Program “top” ve “raket” diye bir şey görmüyor; elinde birkaç sayı var.

Çarpışma algılama

Çarpışma algılamaİki ya da daha fazla oyun nesnesinin (ya da bir nesne ile sınırın) geometrik olarak kesişip kesişmediğini her frame kontrol etme işlemidir.

Görsel değil, mantıksal bir testtir: koşul true olunca kodumuz tepki verir. Tuvalde kendiliğinden bir efekt oluşmaz.

Adım	İş	Örnek
1	Girdiyi oku	`keyIsDown`
2	Konumu güncelle	`topX += hizX * dt`
3	Çarpışmayı kontrol et	Kenar, başka blok
4	Tepki uygula	Sekme, skor, oyun bitişi
5	Çiz	`rect`, `ellipse`

Her şey bununla başladı: Pong, 1972

Pong oyununun ekran görüntüsü — Kaynak: Wikimedia Commons, Pong.png (kamu malı)

İki raket, bir top, iki kural:

Top rakete değerse yön değiştirir.
Top kenardan çıkarsa karşı taraf sayı alır.

Elli yıldır aynı iskeletHareket et → değdi mi? → tepki ver. Bugünün mobil oyunlarında da döngü aynı.

Mini Pong: fareyle raketi oynatın

let bx, by, vx = 300, vy = 190, py = 150, cy = 150, s1 = 0, s2 = 0;
const R = 10, PH = 80, PW = 12;
function setup() { createCanvas(760, 380); noStroke(); bx = 380; by = 190; textAlign(CENTER, TOP); }
function draw() {
  background(12); let dt = min(deltaTime, 40) / 1000;
  py = constrain(mouseY - PH / 2, 0, height - PH);
  cy = constrain(cy + constrain(by - PH / 2 - cy, -200 * dt, 200 * dt), 0, height - PH);
  bx += vx * dt; by += vy * dt;
  if (by - R < 0) { by = R; vy = -vy; }
  if (by + R > height) { by = height - R; vy = -vy; }
  if (vx < 0 && bx - R < 30 + PW && bx + R > 30 && by > py && by < py + PH) { bx = 30 + PW + R; vx = -vx * 1.04; }
  if (vx > 0 && bx + R > width - 30 - PW && bx - R < width - 30 && by > cy && by < cy + PH) { bx = width - 30 - PW - R; vx = -vx * 1.04; }
  if (bx < -20) { s2++; bx = 380; by = 190; vx = 300; }
  if (bx > width + 20) { s1++; bx = 380; by = 190; vx = -300; }
  fill(60); for (let y = 6; y < height; y += 24) rect(width / 2 - 2, y, 4, 12);
  fill(255); rect(30, py, PW, PH); rect(width - 30 - PW, cy, PW, PH); rect(bx - R, by - R, R * 2, R * 2);
  textSize(40); text(s1, width / 2 - 70, 14); text(s2, width / 2 + 70, 14);
}

Bu oyunun tamamı bugün göreceğimiz iki testten ibaret: tuval kenarı ve dikdörtgen örtüşmesi.

Çarpışma olunca ne olur? (1/2)

PongRaket topa değer: yön değişir. Kenar: sekme ya da sayı.

Breakout / ArkanoidTop tuğlaya değer: tuğla kaybolur, skor artar.

Pac-ManHayalete değince can gider; duvara değince yol kesilir.

Super Mario Bros.Zemine inmek, düşmana üstten ya da yandan değmek, altın almak.

Çarpışma olmasa çoğu oyun “boşlukta süzülen şekiller”e iner: raket topa değmez, mermi hedefi delip geçer, karakter duvardan yürür.

Çarpışma olunca ne olur? (2/2)

Flappy BirdBoruya bir kez değmek: oyun biter.

Space Invaders / GalagaMermi uzaylıya değer: düşman yok olur.

Angry BirdsKuş, blok ve domuz kesişince yıkım ve skor. Arkada bir fizik motoru çalışır.

Pinball / bilardoTop engele ya da kenara değer: sekme.

Skor artışı, can kaybı, sekme, kapı açma, ölme… Bu kuralların çoğu, tam da çarpışma testi true olduğu anda uygulanır.

Kuşun kanadı boruya değdi mi? Gagası? Tüyleri?

Karakterin çizimi çok detaylı olabilir. Oyun gerçekten her pikseli tek tek mi kontrol ediyor?

Hitbox: görünmeyen sade şekil

Hitbox (çarpışma kutusu)Çizim ne kadar süslü olursa olsun, “değdi mi?” sorusu çoğu zaman görünmeyen sade bir kutuya ya da daireye sorulur.

Ticari oyunlarda soru iki adımda sorulur

1 · Kaba testUcuzdur. Her nesnenin etrafındaki büyük kutuya bakılır. Kutular uzaksa “değmedi” denir ve iş biter.

2 · İnce testPahalıdır. Yalnızca kutular örtüşünce devreye girer: çoklu hitbox, üçgen-üçgen ya da piksel düzeyinde kontrol.

Amaç, birbirinden uzak çiftler için boşuna ağır hesap yapmamak. Bugün öğreneceğimiz yöntemler (sınır, AABB, dist) bu kaba testlerdir ve Pong’dan Flappy Bird’e oyun hissinin omurgasını oluşturur.

Algılama, fizik simülasyonu değildirGerçekçi sekme, sürtünme, dönme ileri konulardır. Burada yönü tersine çevirmek (hizX = -hizX) yeterli bir tepkidir.

İlk test: tuval sınırı

Sınır (boundary) çarpışmasıHareketli nesnenin tuval kenarına (x = 0, x = width, y = 0, y = height) ya da tanımlı bir oyun alanı sınırına değip değmediğinin kontrolüdür.

Şekil	Sol kenar	Sağ kenar	Üst kenar	Alt kenar
Dikdörtgen `(x, y, w, h)`	`x`	`x + w`	`y`	`y + h`
Daire, merkez `(cx, cy)`, yarıçap `r`	`cx - r`	`cx + r`	`cy - r`	`cy + r`

Hatırlatma: rect sol üst köşeden, ellipse merkezden konumlanır. Kenarların formülü bu yüzden farklı.

Kare tuvalden çıkmasın

Tuvale tıklayıp sağ oka basılı tutun. Karenin sağ kenarı kareX + BOYUT; tuvali aşarsa kareyi geri çekiyoruz.

`constrain` ile aynı iş, ama…

constrain(x, 0, width - BOYUT)Geçen bölümde aynı sınırı tek satırda uygulamıştık. Pratik bir kısayol.

Açık if bloklarıSınırın ne zaman devreye girdiğini gösterir. O anda başka bir şey yapma şansı verir.

Sekme için constrain yetmezTop duvara çarpınca yön de değişmeli. Bunun için konumu düzelten if ile hızı tersine çeviren satır birlikte yazılır.

Daire için test merkez ve yarıçapla yapılır: topX - r < 0 sol duvara, topX + r > width sağ duvara değmedir.

İki dikdörtgen tam olarak ne zaman “çarpışmış” sayılır?

Birazdan B kutusunu fareyle gezdireceksiniz. Kenarlardaki renkli çubuklara dikkat edin: kutuların eksenlerdeki gölgeleri.

İki eksende birden örtüşme gerekir

B’yi A’nın tam yanına, sonra tam altına götürün: tek eksende örtüşme yetmiyor. Bir eksende boşluk varsa çarpışma yoktur.

AABB ve dört koşul

AABB (Axis-Aligned Bounding Box)Eksen hizalı sınır kutusu: kenarları tuvalin x ve y eksenlerine paralel dikdörtgen. rect() ile çizilen kutular AABB’dir.

Kutu rotate ile döndürülürse kenarlar eksene paralel kalmaz; bu dört koşul tek başına yetmez.

Koşul	Anlamı
`ax < bx + bw`	A’nın solu, B’nin sağından solda
`ax + aw > bx`	A’nın sağı, B’nin solundan sağda
`ay < by + bh`	A’nın üstü, B’nin altından yukarıda
`ay + ah > by`	A’nın altı, B’nin üstünden aşağıda

Dördü birden true ise çarpışma var. İlk ikisi x ekseni, son ikisi y ekseni içindir.

Testi bir fonksiyona koymak

function dikdortgenlerCarpisiyor(ax, ay, aw, ah, bx, by, bw, bh) {
  return ax < bx + bw &&
         ax + aw > bx &&
         ay < by + bh &&
         ay + ah > by;
}

let oyuncuX = 50;
let oyuncuY = 120;
const OYUNCU_BOYUT = 36;
let engelX = 200;
let engelY = 100;
const ENGEL_W = 80;
const ENGEL_H = 60;

function setup() {
  createCanvas(480, 280);
  noStroke();
}

function draw() {
  background(28, 32, 48);
  let dt = deltaTime / 1000;

if (keyIsDown(RIGHT_ARROW)) {
    oyuncuX = oyuncuX + 160 * dt;
  }
  if (keyIsDown(LEFT_ARROW)) {
    oyuncuX = oyuncuX - 160 * dt;
  }

let carpisti = dikdortgenlerCarpisiyor(
    oyuncuX, oyuncuY, OYUNCU_BOYUT, OYUNCU_BOYUT,
    engelX, engelY, ENGEL_W, ENGEL_H
  );

fill(100, 200, 255);
  rect(oyuncuX, oyuncuY, OYUNCU_BOYUT, OYUNCU_BOYUT);

// carpisti true/false → engel rengi (önceki bölümler: if / else)
  if (carpisti) {
    fill(255, 90, 90);   // çarpışma var: kırmızımsı
  } else {
    fill(120, 120, 130); // çarpışma yok: gri
  }
  rect(engelX, engelY, ENGEL_W, ENGEL_H);

fill(255);
  textSize(14);
  textAlign(LEFT, TOP);
  text("Ok: hareket  |  Çarpışma: " + carpisti, 12, 12);
}

SimetriktirHangisine A, hangisine B dediğiniz fark etmez: (A, B) ile (B, A) aynı sonucu verir.

Analitik geometri burada işe yarıyorKoordinatlar, eşitsizlikler, iki nokta arası uzaklık… Formül ezberlemek değil; “gördüğüm şekil hangi geometrik soruya denk geliyor?” diye sormak yeter.

Oyuncu engele değince engel kızarsın