Bölüm 4 — Amaç ve Kapsam

Genel Amaç

Bu bölümün temel amacı, tuval sınırı ve şekil çarpışması temellerini durum makinesi deseniyle birleştirerek menü–oyun–bitiş akışlı, iki oyunculu bir XOX oyununu bağımsız sketch olarak tamamlamak ve Temel Kavramlar kitabındaki becerileri bütünleşik bir ürünle pekiştirmektir. Bölüm boyunca her ana başlık kendi içinde amaç, öğrenme çıktıları, örnek kod ve değerlendirme sorularıyla tamamlanır; böylece bir sonraki bölüme geçmeden önce ölçülebilir kazanımlar elde edilir.

Kapsam

Bu bölüm şu ana başlıklar altında ele alınmaktadır:

Ana Başlık 1: Çarpışma Temelleri ve Sekme

Ana Başlık 2: Durum Makinesi Kavramı ve Geçişler

Ana Başlık 3: Menü–Oyun–Bitiş Akışı ve Kaç-Kaç

Ana Başlık 4: Adım Adım: XOX (Tic-Tac-Toe)

Ana Başlık 1. Çarpışma Temelleri ve Sekme

Amaç: Tuval sınırı, AABB, daire çarpışması ve sekme tepkisini öğreterek mini oyunlarda temel çarpışma testleri kurmak.

Öğrenme Çıktıları:

• Tuval sınırında konum ve hız tepkisini uygular.
• AABB ve dist tabanlı çarpışma testlerini ayırt eder.
• Sekme için hız bileşenini tersine çevirir.
• Basit fizik tepkisini hareketli nesneye bağlar.

Anahtar Sözcükler: çarpışma, AABB, dist, sekme, tuval sınırı

Giriş

Hareketli bir sketch’te nesne ekranda gezer; oyuna dönüşmesi için “değdi mi?” sorusu gerekir. Çarpışma algılama, iki şeklin kesişip kesişmediğini sınayan testlerdir. En basit hali tuval kenarıdır; ardından dikdörtgen (AABB) ve daire (dist) testleri gelir. Sekme, ilgili hız bileşenini tersine çevirerek fizik hissi verir.

Bu ana başlık temel testleri ve sekme tepkisini kurar. Hitbox ayrımı ile çoklu nesnede maliyet, İleri Teknikler kitabında ayrı bir ana başlıkta ele alınır; burada kurulan dil, durum makinesi ve XOX için yeterlidir. Bundan sonra gelen alt başlıklarda önce veri modeli, sonra hamle kuralı, en sonda çizim ve etkileşim kurulur. Her yeni fonksiyon mümkün olduğunca küçük bir örnekte çalıştırılır; böylece hatanın kaynağı daha kolay bulunur. Anlatımda önce ilgili yapının ne işe yaradığı açıklanır, ardından kod satır satır okunur. Terimler ilk geçtikleri yerde kısa bir tanımla verilir; gerekirse tablo veya görsel ile desteklenir. Örnek sketch’ler tek bir mekaniğe odaklanır; böylece yan konular okumayı dağıtmaz. Parametreleri değiştirip yeniden çalıştırmak, kuralın sınırını görmenin en hızlı yoludur. Bu ana başlığın çıktısı, sonraki oyunda yeniden kullanılabilecek bir iskelet oluşturur.

1.1. Çarpışma Algılama Nedir?

Oyun döngüsünde tipik sıra:

Tablo 1.

Çarpışma görsel değil, mantıksal bir testtir: koşul true döndüğünde kod tepki verir; tuvalde otomatik bir efekt oluşmaz. Basit oyunlarda test genelde if ile yazılır. Aynı kontrolün (ör. AABB veya dist) birkaç yerde tekrarlanması gerekiyorsa, daha önce tanıtılan yardımcı fonksiyon yaklaşımıyla bu kontrol tek bir yere toplanabilir — fonksiyon true/false döndürür, draw içinde yalnızca if (dikdortgenlerCarpisiyor(...)) sorusu sorulur.

Oyunlarda neden bu kadar önemli?

Çarpışma olmadan ç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. Skor artışı, can kaybı, sekme, kapı açma veya ölme gibi kurallar çoğu zaman tam da bu test true olduğunda uygulanır. İlk bilgisayar oyunlarından (Pong, 1972) bugünün mobil hit’lerine kadar aynı iskelet tekrar eder: hareket et → değdi mi? → tepki ver.

Tablo 2.

Bu tablodaki oyunların çoğunda ekranda süslü bir çizim (sprite) görülür; çarpışma ise çoğu zaman görünmez sade bir kutu veya daire ile yapılır. Bu görünmez bölgeye oyun dilinde hitbox (çarpışma kutusu / çarpışma bölgesi) denir — çizim ne kadar detaylı olursa olsun, “değdi mi?” sorusu genelde bu sade şekle sorulur.

Ticari oyunlarda bu soru çoğu zaman iki adımda sorulur. Kaba test ucuzdur: örneğin her nesnenin etrafındaki büyük AABB’ye bakılır; kutular birbirinden uzaksa “değmedi” denir ve iş biter. İnce test daha pahalıdır: yalnızca kutular örtüşünce devreye girer; çoklu hitbox, üçgen–üçgen veya piksel gibi daha sıkı bir kontrol yapılır. Amaç, uzak çiftlerde boşuna ağır hesap yapmamaktır. Bu ana başlıkta sınır, AABB ve dist gibi temel (çoğu zaman kaba) yöntemleri kuruyoruz; bunlar Pong’tan Flappy Bird’e kadar oyun hissinin omurgasıdır.

1.2. Tuval Sınırları

p5.js'te rect(x, y, w, h) sol üst köşe (x, y) ve genişlik/yükseklik kullanır. Daire için ellipse(x, y, d, d) merkez (x, y) ve çap kullanır; yarıçap r = d / 2 alınır.

Tablo 3.

Kod bloğu: Dikdörtgen kare — tuval dışına çıkmadan durdurma (Bölüm 3 Ana Başlık 4'teki constrain() alternatifi).

let kareX = 100;let kareY = 80;const BOYUT = 40;const HIZ = 150; function setup() {  createCanvas(400, 300);  noStroke();} function draw() {  background(35, 40, 55);  let dt = deltaTime / 1000;   if (keyIsDown(RIGHT_ARROW)) {    kareX = kareX + HIZ * dt;  }   // Sağ kenar: sol üst x + genişlik tuvali aşmasın  if (kareX + BOYUT > width) {    kareX = width - BOYUT;  }  if (kareX < 0) {    kareX = 0;  }   fill(100, 200, 255);  rect(kareX, kareY, BOYUT, BOYUT);}

Daire için kenar testi merkez ve yarıçap üzerinden yapılır: topX - r < 0 sol duvara değme; topX + r > width sağ duvara değme.

1.3. Dikdörtgen Çarpışması

İki dikdörtgen yalnızca hem X hem Y ekseninde aynı anda örtüşüyorsa çarpışır. Bir eksende aralarında boşluk varsa çarpışma yoktur.

Görsel 1 dört durumu gösterir: (1) hem X hem Y örtüşür → çarpışma; (2) yalnızca Y örtüşür → çarpışma yok; (3) hiçbir eksende örtüşme yok → çarpışma yok; (4) B, A’nın içinde (yine her iki eksende örtüşme) → çarpışma. A ve B’nin sekiz köşesi ayrı renklerle işaretlenir; hangi rengin hangi köşeye ait olduğu, panellerin altındaki renk anahtarında (gösterge) yazılır. Siyah düz çizgi örtüşme aralığını gösterir. Alttaki not, A ile B etiketlerinin yer değiştirmesinin sonucu değiştirmediğini (simetri) hatırlatır.

Dikdörtgen A: (ax, ay, aw, ah) — sol üst (ax, ay), genişlik aw, yükseklik ah.
Dikdörtgen B: (bx, by, bw, bh).

Tablo 4.

Dört koşul da true ise çarpışma vardır.

Kod bloğu: İki dikdörtgen çarpışma testi — yardımcı fonksiyon (önceki bölümler, fonksiyonlar).

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);}

carpisti ve if — ne oluyor?

1. dikdortgenlerCarpisiyor(...) dört örtüşme koşulunu hesaplar ve sonuç boolean döner: true (örtüşme var) veya false (yok). Bu değer carpisti değişkeninde saklanır.
2. Her draw() turunda if (carpisti) sorusu sorulur — önceki bölümlerdeki koşullu ifadeyle aynı mantık: koşul doğruysa if gövdesi, değilse else gövdesi çalışır. Burada tepki yalnızca görseldir: engel kırmızıya veya griye boyanır; skor veya sekme yoktur.
3. Ekrandaki Carpisma: true/false metni de aynı boolean’ı yazdırır; böylece hem renk hem yazı testi doğrular.

Kısa yazım (isteğe bağlı): if/else ile fill seçmek yerine tek satırda koşullu (üçlü) operatör kullanılabilir — anlam aynıdır:

fill(carpisti ? color(255, 90, 90) : color(120, 120, 130));

koşul ? doğruysaDeğer : değilseDeğer okunuşu: “carpisti true ise kırmızı color, false ise gri color.” Yeni başlarken üstteki açık if/else daha okunaklıdır.

Algılama ≠ çözümleme: Bu örnekte oyuncu engelin içine girebilir; kod yalnızca “değdi mi?” diye sorar (algılama). Oyuncuyu dışarı itmek, hızı ters çevirmek veya hareketi iptal etmek (çözümleme / resolution) ayrı adımdır — §1.5’teki sekmede konum + hız düzeltilir. Önce algılamayı doğru yazmak, sonra tepki eklemek daha güvenlidir.

1.4. Daire Çarpışması

Görsel 2 merkezler arası mesafe d, yarıçaplar r1 ve r2 ile çarpışma koşulunu gösterir.

İki nokta (x1, y1) ve (x2, y2) arası Öklid mesafesi (kodda yazıldığı gibi; kare alma, ifadenin kendisiyle çarpılmasıdır):

d = sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))

Bu formül Pisagor teoremine dayanır: yatay fark dx = x2 - x1, dikey fark dy = y2 - y1; dik üçgende hipotenüs d = sqrt(dx * dx + dy * dy).

Tablo 5.

Çarpışma koşulu: d < r1 + r2 (tam dışarı değme için <= de kullanılabilir; oyunlarda < veya <= tercihi tutarlı olmalıdır).

Önceki bölümlerde tanıtılan dist(x1, y1, x2, y2) p5.js fonksiyonu bu mesafeyi hesaplar; karekök ve kare işlemini elle yazmaya gerek kalmaz.

Kod bloğu: İki daire — çarpışma testi. Yeşil daire sabittir; sarı/kırmızı daire ok tuşlarıyla (sol/sağ/yukarı/aşağı) yaklaştırılır — değince renk değişir.

let daire1X = 120;let daire1Y = 150;const R1 = 35;let daire2X = 280;let daire2Y = 140;const R2 = 28; function setup() {  createCanvas(440, 260);  noStroke();} function draw() {  background(25, 30, 45);   let adim = 120 * deltaTime / 1000;  if (keyIsDown(LEFT_ARROW)) {    daire2X = daire2X - adim;  }  if (keyIsDown(RIGHT_ARROW)) {    daire2X = daire2X + adim;  }  if (keyIsDown(UP_ARROW)) {    daire2Y = daire2Y - adim;  }  if (keyIsDown(DOWN_ARROW)) {    daire2Y = daire2Y + adim;  }   let mesafe = dist(daire1X, daire1Y, daire2X, daire2Y);  let carpisti = mesafe < R1 + R2; // boolean: dikdörtgen testindeki if ile aynı   fill(100, 200, 120);  ellipse(daire1X, daire1Y, R1 * 2, R1 * 2);   if (carpisti) {    fill(255, 100, 100);  } else {    fill(255, 220, 80);  }  ellipse(daire2X, daire2Y, R2 * 2, R2 * 2);   fill(255);  textSize(14);  textAlign(LEFT, TOP);  text("mesafe: " + nf(mesafe, 0, 1) + "  eşik: " + (R1 + R2), 12, 12);  text("Çarpışma: " + carpisti, 12, 32);  text("Ok tuşlarıyla sarı daireyi hareket ettirin", 12, 52);}

Daire Tıklama oyununda dist(mouseX, mouseY, hedefX, hedefY) < hedefYaricap kullanılmıştı; fare konumu sabit yarıçaplı bir “nokta gibi” daire, hedef ise oyun dairesiydi. İki eşit statüdeki daire için koşul mesafe < r1 + r2 biçiminde genellenir — bu da analitik geometrideki “iki nokta arası uzaklık ≤ yarıçaplar toplamı” sorusunun ta kendisidir.

1.5. Sekme ve Basit Fizik Tepkisi

Tuval sınırına çarpan dairesel top için tipik tepki: konumu sınırın içine düzeltmek ve hız bileşeninin işaretini ters çevirmek (sekme).

Tablo 6.

Önce konum sınırın dışına taşmış olabilir; sekmeden önce içeri itmek (clamp), topun duvarın içine gömülmesini azaltır.

Oyun kuralları (duvarlara çarpan top):

• Top sürekli hareket eder; hız deltaTime ile uygulanır.
• Dört tuval kenarına çarpınca ilgili hız bileşeni tersine döner.
• Ekranda anlık hizX ve hizY gösterilir.

let topX;let topY;let hizX;let hizY;const YARICAP = 22;const HIZ = 220; function setup() {  createCanvas(560, 360);  noStroke();  topX = width / 2;  topY = height / 2;  hizX = HIZ * 0.7;  hizY = HIZ * 0.5;} function draw() {  background(22, 28, 42);  let dt = deltaTime / 1000;   topX = topX + hizX * dt;  topY = topY + hizY * dt;   if (topX - YARICAP < 0) {    topX = YARICAP;    hizX = -hizX;  }  if (topX + YARICAP > width) {    topX = width - YARICAP;    hizX = -hizX;  }  if (topY - YARICAP < 0) {    topY = YARICAP;    hizY = -hizY;  }  if (topY + YARICAP > height) {    topY = height - YARICAP;    hizY = -hizY;  }   fill(255, 190, 70);  ellipse(topX, topY, YARICAP * 2, YARICAP * 2);   fill(220);  textSize(14);  textAlign(LEFT, TOP);  text("Duvarlara çarpan top", 12, 12);  text("hizX: " + nf(hizX, 0, 1) + "  hizY: " + nf(hizY, 0, 1), 12, 32);}

Bu örnek klavye girdisi içermez; top kendi hızıyla hareket eder. Klavye kontrolü ve engel dikdörtgenleri sonraki projelerde birleştirilebilir.

Bu başlıkta görülen çiftler → hangi test?

Çarpışma temelde bir çift üzerinden düşünülür: “A ile B değdi mi?” Bu ana başlıkta işlenen çiftler ve uygun testler:

Tablo 7.

Bu ana başlıkta “uzay gemisi / mermi” gibi yeni varlıklar tanımlanmamıştır; test seçimi önce bu tablodaki çiftler üzerinde pekiştirilir. İleride yeni bir nesne eklendiğinde aynı soru sorulur: şekil ne → sınır / AABB / dist?

Özet

Tuval sınırı, AABB ve daire–daire (dist < r1 + r2) testleri mini oyunların omurgasıdır. Sekme çoğu zaman vx = -vx veya vy = -vy ile yapılır. Bu araçlar tek veya az sayıda nesne için yeterlidir.

Durum makinesi ve XOX, bu temel çarpışma dilinin üzerine kontrol akışı ekler. Görsel ile çarpışma kutusunu ayırma ve nesne sayısı artınca maliyet, sonraki kitapta hitbox ve çoklu nesne başlığında derinleşir.

Üç nokta bu ana başlığın sınırlarını çizer. Birincisi, algılama ile çözümlemenin ayrı adımlar olmasıdır: test yalnızca «değdi mi?» sorusunu yanıtlar, konumu düzeltmek veya hızı çevirmek ayrıca yazılır. İkincisi, testin şekle göre seçilmesidir; dikdörtgen için aralık örtüşmesi, daire için merkezler arası uzaklık kullanılır ve iki modeli karıştırmak yanlış sonuç üretir. Üçüncüsü, hızlı nesnelerde tek frame'lik sıçramanın engelin içinden geçmeye yol açabilmesidir; küçük adımlar veya daha büyük hitbox bu durumu azaltır.

Testin kendisi birkaç satırlık bir koşuldan ibarettir; asıl tasarım kararı, çarpışma gerçekleştiğinde oyunun ne yapacağıdır. Sekme, durma, can azaltma veya seviye geçişi aynı testin üzerine kurulur ve oyunun türünü belirleyen de bu tepkidir.

Neler Öğrendik?

Soru 1 AABB neyi test eder?

Soru 2 İki daire çarpışmasında uygun koşul hangisidir?

Soru 3 Duvardan sekmede tipik tepki nedir?

Soru 4 Tuval sınırı testinin pedagojik yararı nedir?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: A

• Çözüm: AABB eksen hizalı kutu örtüşmesidir.
• İlgili Konu: 1.3. Dikdörtgen Çarpışması

Soru 2: Doğru Cevap: A

• Çözüm: Merkez mesafesi yarıçaplar toplamıyla kıyaslanır.
• İlgili Konu: 1.4. Daire Çarpışması

Soru 3: Doğru Cevap: A

• Çözüm: vx veya vy negatife döner.
• İlgili Konu: 1.5. Sekme

Soru 4: Doğru Cevap: A

• Çözüm: Kenar teması çarpışmaya giriş kapısıdır.
• İlgili Konu: 1.2. Tuval Sınırları

Yararlanılan Kaynaklar

Bu içerik aşağıdaki kaynaklardan derlenerek hazırlanmıştır:

• McCarthy, L., Reas, C., & Fry, B. (2015). Make: Getting Started with p5.js. Maker Media.
• Moren, B. (n.d.). p5.collide2D. https://github.com/bmoren/p5.collide2D
• Nystrom, R. (2014). Game Programming Patterns. Genever Benning. https://gameprogrammingpatterns.com/
• p5.js Foundation. (n.d.). createGraphics(). https://p5js.org/reference/p5/createGraphics/
• p5.js Foundation. (n.d.). dist(). p5.js Reference. https://p5js.org/reference/p5/dist/
• p5play. (n.d.). p5.play. https://p5play.org/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js
• Thompson, J. (n.d.). Collision Detection. https://www.jeffreythompson.org/collision-detection/ (bölümler .php uzantılıdır; ör. rect-rect, circle-circle, circle-rect, line-line, içindekiler)
• Wikipedia contributors. (n.d.). Collision detection. Wikipedia. https://en.wikipedia.org/wiki/Collision_detection (hitbox tanımı ve çoklu/parça hitbox fikri)

Ana Başlık 2. Durum Makinesi Kavramı ve Geçişler

Amaç: Oyun durumunu saklama, duruma göre çizim/girdi ve geçiş kurallarıyla durum makinesi modelini kurmak.

Öğrenme Çıktıları:

• Durum makinesi kavramını oyun akışına bağlar.
• Durumu değişkende saklar.
• Duruma göre çizim ve girdi yollarını ayırır.
• Geçiş kurallarını açıkça tanımlar.

Anahtar Sözcükler: durum makinesi, state, geçiş, menü, oyunDurumu

Giriş

Çarpışma ve hareket “oyun içi” davranışı kurar; ama bir ürün menü, oynanış ve bitiş ekranı arasında geçiş de ister. Bunları if yığınıyla dağınık yazmak yerine durum makinesi (state machine) modeli kullanılır: sistem her anda tek bir durumda bulunur; olaylar belirli geçişleri tetikler.

Durum bir değişkende saklanır ("menu", "oyun", "bitti"). draw ve girdi işleyicileri duruma göre dallanır. Geçiş kuralları “hangi olay hangi yeni duruma götürür?” sorusunu tablolaştırır. Bu ana başlık modeli ve kuralları kurar; menü–oyun–bitiş’in tam akışlı mini oyunu bir sonraki ana başlıkta tamamlanır. Bundan sonra gelen alt başlıklarda önce veri modeli, sonra hamle kuralı, en sonda çizim ve etkileşim kurulur. Her yeni fonksiyon mümkün olduğunca küçük bir örnekte çalıştırılır; böylece hatanın kaynağı daha kolay bulunur. Anlatımda önce ilgili yapının ne işe yaradığı açıklanır, ardından kod satır satır okunur. Terimler ilk geçtikleri yerde kısa bir tanımla verilir; gerekirse tablo veya görsel ile desteklenir. Örnek sketch’ler tek bir mekaniğe odaklanır; böylece yan konular okumayı dağıtmaz. Parametreleri değiştirip yeniden çalıştırmak, kuralın sınırını görmenin en hızlı yoludur.

2.1. Durum Makinesi Kavramı

Bu ana başlığın omurgası üç durumludur — menü, oyun, bitiş:

Tablo 1.

Durum = oyunun aşaması. Geçiş (transition) = bir olay gerçekleşince durum değişkeninin güncellenmesi (oyunDurumu = DURUM_BITIS gibi).

Görsel 1, üç durumun birbirine nasıl bağlandığını özetler: menüden SPACE ile oyuna, çarpışma ile bitişe, R ile tekrar menüye. Menüde WASD veya bitişte SPACE yok sayılır — olay yalnızca o durum için tanımlıysa geçiş olur.

Ayrı boolean'ların riski küçük bir örnekle netleşir: menuAcik = true ve oyunAcik = true aynı anda olursa draw() aynı frame'de hem menüyü hem sahneyi çizebilir; girdi hangi bloğa gideceği belirsizleşir. Tek oyunDurumu değişkeninde ise her an yalnızca bir değer vardır; geçiş tek atama satırıdır.

Önceki bölümlerdeki oyunBitti boolean'ı aslında iki durumlu mini bir makinedir: oynuyor / bitti. Üç veya daha fazla aşama için string veya sabit kullanmak okunabilirliği artırır:

Tablo 2.

Günlük hayattan basit örnekler

Durum makinesi kavramı oyun programlamasına özgü değildir; aşağıdaki üç örnek de üç durumlu iskelet gösterir — tıpkı menü/oyun/bitiş gibi. Trafik ışığında kırmızıdan yeşile doğrudan geçilmez; önce sarı, sonra yeşil, ardından yine sarı, yeniden kırmızı gelir. Turnikede kart okutulunca önce doğrulama beklenir; kart geçersizse veya kimse geçmeden 5 sn dolarsa sistem Kilitli'ye döner. Medya oynatıcıda play ile Çalıyor, pause ile Duraklatıldı'ya geçilir; stop veya şarkı bitince Durduruldu'ya dönülür. Ortak nokta: sistem bir anda tek durumdadır ve yalnızca somut bir olay olunca başka duruma geçer.

Bu üç örneğin diyagramları biraz aşağıda, Mermaid anlatıldıktan hemen sonra gelir.

Durum diyagramını kendiniz çizmek

Diyagramda kutular = durumlar, oklar = geçişler, ok yazısı = olay (SPACE, çarpışma, R…). Kâğıt yeterlidir; dijital için de ücretsiz araçlar vardır.

Mermaid, diyagramı düz metin satırlarıyla tanımlamanızı sağlayan bir notasyondur. Metni Mermaid Live Editor adresine yapıştırdığınızda şekil otomatik oluşur; kaynak metin dosyada saklanabildiği için Git gibi sürüm kontrolüne de uygundur. Yapay zekâya geçiş tablonuzu verip “bunu stateDiagram-v2 olarak yaz” demek yaygındır; çıkan metni mutlaka Live Editor’da açıp okları kontrol edin (YZ bazen hatalı sözdizimi üretir). Ok veya kutu renkleri gibi görünüm isteklerini de YZ’ye sorabilirsiniz — bunun için aşağıdaki Mermaid YZ etkinliğindeki makyaj adımına bakın.

Kod bloğu: Basit durum diyagramı (Mermaid) — menü / oyun / bitiş.

stateDiagram-v2  [*] --> menu  menu --> oyun : SPACE  oyun --> bitis : carpisma  bitis --> menu : R

Satır satır mantık:

Tablo 3.

A --> B : olay kalıbında sol durum, sağ durum, iki nokta sonrası ok etiketidir. Bu metin, p5.js’teki oyunDurumu = DURUM_OYUN atamalarının görsel özetidir; diyagram kod yazmaz, yalnızca geçiş kurallarını resmeder.

Görsel 2 solda aynı Mermaid kodunu, sağda canlı editörde oluşacak çıktıya benzer bir diyagramı gösterir. Resmi sözdizimi: State diagrams — Mermaid.

Diğer çevrimiçi araçlar (sürükle-bırak):

Tablo 4.

Yukarıdaki günlük hayat örneklerinin Mermaid karşılıkları (her birinde önce kod, sonra diyagram):

Kod bloğu: Trafik ışığı (Mermaid).

stateDiagram-v2  direction LR  [*] --> kirmizi  kirmizi: Kırmızı  sari: Sarı  yesil: Yeşil  kirmizi --> sari : 20 sn bekle  sari --> yesil : 3 sn bekle  yesil --> sari : 25 sn bekle  sari --> kirmizi : 3 sn bekle

Görsel 3, üç renkli döngüdür: Kırmızı → Sarı → Yeşil → Sarı → Kırmızı. Kırmızıdan yeşile doğrudan ok yok; sarı hem yeşile hazırlık hem kırmızıya uyarı rolündedir. Geçişler süre dolmasıyla olur (ör. 20 / 3 / 25 / 3 sn).

Kod bloğu: Turnike / geçiş kapısı (Mermaid).

stateDiagram-v2  direction LR  [*] --> kilitli  kilitli: Kilitli  dogrulaniyor: Doğrulanıyor  acik: Açık  kilitli --> dogrulaniyor : kart okutuldu  dogrulaniyor --> acik : kart geçerli  dogrulaniyor --> kilitli : kart geçersiz  acik --> kilitli : geçildi  acik --> kilitli : 5 sn içinde geçilmedi

Görsel 4, turnike örneğidir: kart okutuldu → doğrulanıyor → geçerliyse Açık; geçersizse veya süre dolarsa doğrudan Kilitli'ye döner. Turnikeye itmek başlı başına bir olay değildir — Kilitli iken hiçbir geçiş tanımlı olmadığı için sistem olduğu yerde kalır; menüde WASD'ın hiçbir şey yapmamasıyla aynı mantık.

Kod bloğu: Medya oynatıcı (Mermaid).

stateDiagram-v2  direction LR  [*] --> durduruldu  durduruldu: Durduruldu  calisiyor: Çalıyor  duraklatildi: Duraklatıldı  durduruldu --> calisiyor : play tıklandı  calisiyor --> duraklatildi : pause tıklandı  duraklatildi --> calisiyor : play tıklandı  calisiyor --> durduruldu : stop / şarkı bitti  duraklatildi --> durduruldu : stop tıklandı

Görsel 5, üç durumludur: Durduruldu ↔ Çalıyor ↔ Duraklatıldı. Menü / oyun / bitiş iskeletine doğrudan oturur; DURUM_DURAKLAT eklemek istediğinizde de aynı kalıp kullanılır — yeni sabit, yeni geçiş satırları.

Başka oyunlardan örnekler

Aynı omurga başka türlerde de görülür. Geçiş sütununda durum adları aynen kullanılır: “Şu durum iken şu olursa → bu durum”.

Tablo 5.

XOX’ta X/O sırası kavramsal olarak ayrı durumdur; bir sonraki ana başlıkta bunlar tek DURUM_OYUN içinde sira = "X" / "O" değişkeniyle tutulur — menü/oyun/bitiş omurgası aynı kalır, sıra ise oyun içi alt bilgidir. Aşağıda ilk dört örneğin Mermaid diyagramları vardır.

Kod bloğu: Satranç (Mermaid).

stateDiagram-v2  direction LR  [*] --> beyaz  beyaz: Beyazın sırası  siyah: Siyahın sırası  bitti: Oyun bitti  beyaz --> siyah : hamle (oyun sürüyor)  siyah --> beyaz : hamle (oyun sürüyor)  beyaz --> bitti : hamle mat veya pat  siyah --> bitti : hamle mat veya pat

Kod bloğu: Hafıza kartları (Mermaid).

stateDiagram-v2  direction LR  [*] --> ilk  ilk: İlk kart  ikinci: İkinci kart  kontrol: Eşleşme kontrolü  bitti: Bitti  ilk --> ikinci : kart açıldı  ikinci --> kontrol : kart açıldı  kontrol --> ilk : eşleşmedi  kontrol --> ilk : eşleşti (çift kaldı)  kontrol --> bitti : tüm çiftler bulundu

Kod bloğu: Bilgi yarışması (Mermaid).

stateDiagram-v2  direction LR  [*] --> soru  soru: Soru  kontrol: Cevap kontrolü  sonuc: Sonuç  soru --> kontrol : şık seçildi / süre doldu  kontrol --> soru : sonraki soru  kontrol --> sonuc : sorular bitti

Kod bloğu: Tetris (Mermaid).

stateDiagram-v2  direction LR  [*] --> dusuyor  dusuyor: Parça düşüyor  temizle: Satır temizleme  bitti: Oyun bitti  dusuyor --> temizle : yere oturdu (satır dolu)  temizle --> dusuyor : animasyon bitti  dusuyor --> dusuyor : yere oturdu (satır yok)  dusuyor --> bitti : tepe doldu

Oyun döngüsünde (draw()) tipik akış:

1. Mevcut durumu oku (oyunDurumu).
2. Duruma göre güncelle (yalnızca "oyun" iken hareket, çarpışma).
3. Duruma göre çiz (menü metni veya oyun sahnesi).
4. Olay fonksiyonlarında (keyPressed) duruma göre geçiş uygula.

2.2. Oyun Durumunu Saklama

Durum değerleri genelde metin (string) olarak tutulur; yazım hatasını azaltmak için const sabitleri tanımlanır (önceki bölümlerde const HEDEF_SKOR örfü).

const DURUM_MENU = "menu";const DURUM_OYUN = "oyun";const DURUM_BITIS = "bitis"; let oyunDurumu = DURUM_MENU;

Tablo 6.

oyunDurumu değişkeni sketch boyunca güncellenir; setup() içinde başlangıç değeri atanır. Karşılaştırmalarda === kullanılır:

if (oyunDurumu === DURUM_OYUN) {  // yalnızca oyun aşamasında çalışır}

Bu tür bir yazım hatası, çalışma zamanında görünür bir hata mesajı üretmez; JavaScript, tanımsız bir string'i sessizce kabul eder ve karşılaştırma yalnızca false döner. Sonuç, oyunun beklenen durumdan çıkmaması ve nedeni belirsiz bir "hiçbir şey olmuyor" davranışıdır — örneğin SPACE tuşuna basıldığında oyun başlamaz, çünkü oyunDurumu === DURUM_MENU koşulu, DURUM_MENU sabiti yanlış yazıldığı için hiçbir zaman doğru olmaz. Sabit kullanmanın asıl kazancı budur: yazım hatası yapıldığında JavaScript, tanımsız bir değişken adı için (sabit tanımlanmamışsa) hata verir; bu da sorunu doğrudan işaret eder ve serbest metin string'lerinde olduğu gibi sessiz kalmaz.

Oyun verileri (skor, oyuncu konumu, top hızı) durumdan bağımsız değişkenlerde tutulabilir; yalnızca hangi kodun çalışacağı duruma bağlanır. Oyun başlarken konumları sıfırlamak için yardımcı fonksiyon kullanılabilir (önceki bölümler, fonksiyonlar):

function oyunuSifirla() {  skor = 0;  oyuncuX = width / 2;  oyuncuY = height / 2;  topX = random(50, width - 50);  topY = 40;  hizX = random(-120, 120);  hizY = 80;}

random() önceki bölümlerde tanıtılmıştır; başlangıç top konumu ve hızı her turda farklı olabilir.

2.3. Duruma Göre Çizim ve Girdi

draw() içinde durum dallanması yaygın örüntüdür: her durum için ayrı çizim bloğu veya yardımcı fonksiyon.

Kod bloğu: Duruma göre draw() — iskelet.

function draw() {  if (oyunDurumu === DURUM_MENU) {    cizMenu();  } else if (oyunDurumu === DURUM_OYUN) {    guncelleOyun();    cizOyun();  } else if (oyunDurumu === DURUM_BITIS) {    cizBitis();  }}

Tablo 7.

Duruma göre hangi fonksiyonların çalıştığı özet tablo:

Tablo 8.

Görsel 10, draw() içindeki if / else if zincirinin her durumda farklı çizim ve güncelleme fonksiyonlarına yönlendiğini gösterir.

Girdi de duruma bağlı olmalıdır. Örneğin WASD yalnızca DURUM_OYUN iken oyuncuyu hareket ettirmeli; menüde aynı tuşlar farklı iş yapabilir veya yok sayılabilir.

Kod bloğu: keyPressed() — duruma göre geçiş.

function keyPressed() {  if (oyunDurumu === DURUM_MENU && key === " ") {    oyunuSifirla();    oyunDurumu = DURUM_OYUN;  }  if (oyunDurumu === DURUM_BITIS && (key === "r" || key === "R")) {    oyunDurumu = DURUM_MENU;  }}

keyPressed() tek seferlik olaydır; menüde SPACE ve bitişte R için uygundur (Bölüm 3 Ana Başlık 4). Oyun içi sürekli hareket keyIsDown() ile guncelleOyun() içinde kalır.

2.4. Geçiş Kuralları

Geçiş kuralları tablo halinde yazıldığında tasarım netleşir; kod bu tabloya karşılık gelir.

Mini oyun (Kaç-Kaç top) geçiş tablosu:

Tablo 9.

İkinci satır, her olayın durum değiştirmediğini gösterir: hedef toplamak skoru artırır ama oyun DURUM_OYUN içinde kalır. Durum değişikliği yalnızca tabloda yeni durum yazan satırlarda olur.

Her iki temas da önceki ana başlıktaki daire testiyle bulunur: oyuncu merkezi (oyuncuX + BOYUT/2, oyuncuY + BOYUT/2) ile top veya hedef merkezi arası dist(); toplam yarıçaptan küçükse temas vardır.

Geçersiz geçişler bilinçli olarak yok sayılır: menüdeyken WASD oyuncuyu hareket ettirmemeli (guncelleOyun() yalnızca oyun durumunda çağrılır). Bu, durum makinesinin “her aşamada ne mümkün?” sorusuna yanıt vermesidir.

Geçiş tablosunun kâğıt üzerinde önce yazılması, kodlamadan önce bir tasarım adımı olarak değerli bir alışkanlıktır. Tablo doldurulurken her satır için "bu olay gerçekleştiğinde oyuncu ekranda ne görmeli, hangi tuşlar anlamlı olmalı?" sorusu sorulur. Bu sorular yanıtlanmadan doğrudan kod yazılırsa, genellikle unutulan bir geçiş (örneğin bitiş ekranında yanlışlıkla SPACE'in de menüye dönmesi) ortaya çıkar ve hata ayıklaması, kodun her yerine dağılmış if koşulları arasında zaman alır. Tablo hazır olduğunda ise draw() ve keyPressed() gövdeleri, tablodaki satırların doğrudan çevirisinden ibaret hâle gelir.

XOX için aynı oyunDurumu menü/oyun/bitiş akışına ek olarak tahta verisi (tahta dizisi), sıra ("X" / "O") ayrı değişkenlerde tutulacak; oyun aşaması ile tahta mantığı birbirinden ayrılacaktır.

Özet

Durum makinesi, sistemin her an yalnızca bir durumda bulunduğu ve tuş, tıklama, süre veya çarpışma gibi belirli olaylarla başka duruma geçtiği bir modeldir; oyun bağlamında omurga çoğunlukla menü, oyun ve bitiş üçlüsüdür. Aşamaları ayrı boolean değişkenlerle izlemek risklidir, çünkü iki bayrağın aynı anda doğru olması hem çizimi hem girdinin hangi bloğa gideceğini belirsizleştirir. Tek bir oyunDurumu değişkeninde ise her an tek bir değer bulunur ve geçiş tek satırlık bir atamaya iner. Durum değerleri metin olarak tutulur; const sabitleri tanımlamak sessizce başarısız olan yazım hatalarını önler, karşılaştırmalar ise === ile yapılır.

draw gövdesi duruma göre dallanır: menüde yalnızca menü çizimi, oyun aşamasında güncelleme ile sahne çizimi, bitişte sonuç ekranı çalışır. Girdi de aynı biçimde bölünür; menüde SPACE oyunu başlatırken sürekli hareket tuşları yalnızca oyun aşamasında okunur, bitiş ekranında R menüye döndürür. Böylece aynı tuş farklı aşamalarda farklı iş yapabilir veya bilinçli olarak yok sayılır.

Geçişler rastgele değil kurala bağlıdır ve mevcut durum, olay, yeni durum sütunlarıyla tabloya dökülebilir; her olay durumu değiştirmez, örneğin hedefe temas skoru artırır ama oyun aşamasında kalınır. Diyagram veya tablo, koddan önce tasarımı netleştirir; menü–oyun–bitiş akışının tam sketch’i bir sonraki ana başlıkta tamamlanır.

Neler Öğrendik?

Soru 1 Durum makinesinde sistem aynı anda kaç durumda olmalıdır?

Soru 2 oyunDurumu değişkeninin rolü nedir?

Soru 3 Duruma göre girdi ayırmanın gerekçesi nedir?

Soru 4 Geçiş kuralı neyi tanımlar?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: Tek aktif durum modeli sadedir.
• İlgili Konu: 2.1. Durum Makinesi Kavramı

Soru 2: Doğru Cevap: A

• Çözüm: Durum değişkeni aşamayı tutar.
• İlgili Konu: 2.2. Oyun Durumunu Saklama

Soru 3: Doğru Cevap: A

• Çözüm: Girdi yolları duruma göre ayrılır.
• İlgili Konu: 2.3. Duruma Göre Çizim ve Girdi

Soru 4: Doğru Cevap: A

• Çözüm: Olay → yeni durum eşlemesi.
• İlgili Konu: 2.4. Geçiş Kuralları

Yararlanılan Kaynaklar

Bu içerik aşağıdaki kaynaklardan derlenerek hazırlanmıştır:

• Excalidraw. (n.d.). https://excalidraw.com
• McCarthy, L., Reas, C., & Fry, B. (2015). Make: Getting Started with p5.js. Maker Media.
• Mermaid Live Editor. (n.d.). https://mermaid.live
• Mermaid. (n.d.). State diagrams. https://mermaid.js.org/syntax/stateDiagram.html
• Nystrom, R. (2014). Game Programming Patterns — State. https://gameprogrammingpatterns.com/state.html
• p5.js Foundation. (n.d.). keyPressed. p5.js Reference. https://p5js.org/reference/p5/keyPressed/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js

Ana Başlık 3. Menü–Oyun–Bitiş Akışı ve Kaç-Kaç

Amaç: Durum makinesini menü–oyun–bitiş akışında uygulayarak kaç-kaç benzeri mini oyunu tamamlamak.

Öğrenme Çıktıları:

• Menü, oyun ve bitiş ekranlarını ayrı durumlar olarak çizer.
• Start / yeniden dene geçişlerini kodlar.
• Oyun durumunda hareket ve basit kural uygular.
• Bütünleşik mini oyunu çalışır sketch olarak sunar.

Anahtar Sözcükler: menü, bitiş, geçiş, kaç-kaç, oyun döngüsü, durum

Giriş

Durum, girdi ve geçiş kuralları bilindikten sonra sıra bunları tek sketch’te birleştirmeye gelir. Menü ekranı yönerge ve Start bekler; oyun durumu hareket, çarpışma veya kaçış kuralını çalıştırır; bitiş ekranı skor veya sonucu gösterip yeniden başlatma sunar.

Kaç-kaç benzeri örnek, önceki ana başlıkların (hareket, girdi, çarpışma fikri) durum makinesiyle örülmesidir. Amaç AAA üretim değil; okunabilir oyunDurumu dallarıyla bütünleşik bir akış bitirmektir. Bu alışkanlık, sonraki XOX projesinde menü ve tur yönetimini de kolaylaştırır. Bundan sonra gelen alt başlıklarda önce veri modeli, sonra hamle kuralı, en sonda çizim ve etkileşim kurulur. Her yeni fonksiyon mümkün olduğunca küçük bir örnekte çalıştırılır; böylece hatanın kaynağı daha kolay bulunur. Anlatımda önce ilgili yapının ne işe yaradığı açıklanır, ardından kod satır satır okunur. Terimler ilk geçtikleri yerde kısa bir tanımla verilir; gerekirse tablo veya görsel ile desteklenir. Örnek sketch’ler tek bir mekaniğe odaklanır; böylece yan konular okumayı dağıtmaz. Parametreleri değiştirip yeniden çalıştırmak, kuralın sınırını görmenin en hızlı yoludur. Bu ana başlığın çıktısı, sonraki oyunda yeniden kullanılabilecek bir iskelet oluşturur.

3.1. Kaç-Kaç Top: Kurallar ve Durum Tasarımı

Aşağıdaki Kaç-Kaç Top mini oyunu üç durumu birleştirir: menüde SPACE ile başlama, oyun içinde WASD ile hedef toplama, topa değince bitiş, R ile menüye dönüş. Skor yalnızca hedefe dokununca artar; bu yüzden köşede beklemek işe yaramaz, oyuncu topun yakınına gitmeyi göze almak zorundadır.

Oyun kuralları:

• Menü: “SPACE — başla” metni.
• Oyun: Kare oyuncu WASD/ok ile hareket eder; top duvarlardan sekerek hareket eder (deltaTime, Bölüm 2 Ana Başlık 4–3).
• Ekranda bir hedef (küçük yeşil daire) durur; oyuncu ona değince skor 1 artar ve hedef başka bir yere taşınır.
• Top oyuncuya değerse bitiş ekranı; skor gösterilir.
• Bitiş: R ile menüye dönülür.

3.2. Tam Sketch ve Akışın Okunması

const DURUM_MENU = "menu";const DURUM_OYUN = "oyun";const DURUM_BITIS = "bitis"; const BOYUT = 36;const TOP_YARICAP = 20;const HEDEF_YARICAP = 12;const HIZ_OYUNCU = 200;const UZAK_MESAFE = 90; // hedef oyuncuya bu kadar uzakta doğar let oyunDurumu;let oyuncuX, oyuncuY;let topX, topY, hizX, hizY;let hedefX, hedefY;let skor; function setup() {  createCanvas(520, 360);  noStroke();  oyunDurumu = DURUM_MENU;} function draw() {  if (oyunDurumu === DURUM_MENU) {    cizMenu();  } else if (oyunDurumu === DURUM_OYUN) {    guncelleOyun();    cizOyun();  } else if (oyunDurumu === DURUM_BITIS) {    cizBitis();  }} function cizMenu() {  background(28, 32, 48);  fill(255);  textSize(28);  textAlign(CENTER, CENTER);  text("Kac-Kac Top", width / 2, height / 2 - 40);  textSize(16);  text("Topa degmeden hedefleri topla", width / 2, height / 2);  text("SPACE — başla", width / 2, height / 2 + 50);} function guncelleOyun() {  let dt = deltaTime / 1000;   if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) oyuncuX -= HIZ_OYUNCU * dt;  if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) oyuncuX += HIZ_OYUNCU * dt;  if (keyIsDown(UP_ARROW) || keyIsDown(87)) oyuncuY -= HIZ_OYUNCU * dt;  if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) oyuncuY += HIZ_OYUNCU * dt;   oyuncuX = constrain(oyuncuX, 0, width - BOYUT);  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);   topX += hizX * dt;  topY += hizY * dt;  if (topX - TOP_YARICAP < 0) { topX = TOP_YARICAP; hizX = -hizX; }  if (topX + TOP_YARICAP > width) { topX = width - TOP_YARICAP; hizX = -hizX; }  if (topY - TOP_YARICAP < 0) { topY = TOP_YARICAP; hizY = -hizY; }  if (topY + TOP_YARICAP > height) { topY = height - TOP_YARICAP; hizY = -hizY; }   let px = oyuncuX + BOYUT / 2;  let py = oyuncuY + BOYUT / 2;   if (dist(px, py, hedefX, hedefY) < HEDEF_YARICAP + BOYUT / 2) {    skor += 1;    hedefYerlestir();  }   if (dist(px, py, topX, topY) < TOP_YARICAP + BOYUT / 2) {    oyunDurumu = DURUM_BITIS;  }} function cizOyun() {  background(22, 28, 42);  fill(120, 230, 140);  ellipse(hedefX, hedefY, HEDEF_YARICAP * 2, HEDEF_YARICAP * 2);  fill(100, 200, 255);  rect(oyuncuX, oyuncuY, BOYUT, BOYUT);  fill(255, 190, 70);  ellipse(topX, topY, TOP_YARICAP * 2, TOP_YARICAP * 2);  fill(255);  textSize(16);  textAlign(LEFT, TOP);  text("Skor: " + skor, 12, 12);} function cizBitis() {  background(35, 25, 30);  fill(255);  textSize(26);  textAlign(CENTER, CENTER);  text("Oyun bitti", width / 2, height / 2 - 50);  textSize(18);  text("Skor: " + skor, width / 2, height / 2);  textSize(14);  text("R — menüye dön", width / 2, height / 2 + 50);} function hedefYerlestir() {  let px = oyuncuX + BOYUT / 2;  let py = oyuncuY + BOYUT / 2;  let kenar = HEDEF_YARICAP + 10;  hedefX = random(kenar, width - kenar);  hedefY = random(kenar, height - kenar);  let deneme = 0;  // Güvenlik sınırı: UZAK_MESAFE tuvale göre çok büyük seçilirse uygun konum  // bulunamaz ve draw() içindeki bu döngü sketch'i dondurur.  while (dist(px, py, hedefX, hedefY) < UZAK_MESAFE && deneme < 50) {    hedefX = random(kenar, width - kenar);    hedefY = random(kenar, height - kenar);    deneme = deneme + 1;  }} function oyunuSifirla() {  oyuncuX = width / 2 - BOYUT / 2;  oyuncuY = height / 2 - BOYUT / 2;  topX = random(60, width - 60);  topY = 50;  hizX = random(-100, 100);  hizY = random(80, 140);  skor = 0;  hedefYerlestir();} function keyPressed() {  if (oyunDurumu === DURUM_MENU && key === " ") {    oyunuSifirla();    oyunDurumu = DURUM_OYUN;  }  if (oyunDurumu === DURUM_BITIS && (key === "r" || key === "R")) {    oyunDurumu = DURUM_MENU;  }}

Bu sketch, önceki ana başlıklardaki deltaTime, klavye, constrain, çarpışma (dist) ve önceki bölümlerdeki fonksiyon modülerliğini tek akışta toplar. Sonraki ana başlıkta DURUM_OYUN içinde 3×3 tahta çizimi ve tıklama ile hamle eklenecektir; menü ve bitiş aynı oyunDurumu değişkeniyle yönetilmeye devam edecektir.

draw() her zaman başlangıç noktasıdır: üç if / else if dalından yalnızca biri, oyunDurumu'nun o anki değerine göre çalışır. Oyun aşamasına girildiğinde guncelleOyun() önce klavye durumunu okuyup oyuncu konumunu günceller, ardından topu duvarlardan sekmeli biçimde hareket ettirir, sonra dist() ile önce hedefe değilip değilmediğine (skor + yeni hedef), en son da topa çarpılıp çarpılmadığına bakar. Çarpışma tespit edildiği an fonksiyon içinde oyunDurumu = DURUM_BITIS atanır; bu atamadan sonra aynı frame'de cizOyun() yine çağrılır (son sahneyi göstermek için), fakat bir sonraki draw() çağrısında artık else if (oyunDurumu === DURUM_BITIS) dalı çalışacak ve cizBitis() devreye girecektir. oyunuSifirla() fonksiyonu, yalnızca menüden oyuna geçişte çağrılarak her yeni turun rastgele ama tutarlı bir başlangıç konumuyla başlamasını sağlar; bu, önceki bölümlerde tanıtılan random() fonksiyonunun durum makinesiyle birleştirilmiş hâlidir.

3.3. Geçişlerin Doğrulanması ve Uygulama Etkinlikleri

Aşağıdaki Yapay Zekâ Etkileşimi etkinlikleri kavramdan diyagrama ve koda doğru sıralanır. İlk ikisi kısadır (kavram çıkarımı ve Mermaid diyagramı); ardından gelen Hafıza kartları mini oyun projesi bu zamana kadar öğrenilenleri bir araya getirir. Son etkinlik ise unutulan geçişleri yakalamaya odaklanan kısa bir hata ayıklama alıştırmasıdır. İstenen etkinlik seçilebilir; hepsini yapmak pekiştirir.

Özet

Menü–oyun–bitiş akışı, durum makinesinin tek bir sketch içinde bütünleşik olarak uygulandığı en yaygın biçimdir. Kaç-Kaç Top örneğinde menü ekranı yönergeyi gösterip SPACE bekler; oyun aşamasında kare biçimindeki oyuncu WASD veya ok tuşlarıyla deltaTime’a bağlı hızda hareket eder, top duvarlardan sekerek dolaşır, hedefe temas skoru bir artırıp hedefi yeniden yerleştirir, topa temas ise bitiş ekranına götürür ve orada R tuşu menüye döndürür. Skor yalnızca hedefe dokununca arttığı için köşede beklemek işe yaramaz; kural, topun yakınına gitmeyi göze almayı gerektirir.

Kodun okunma sırası her zaman draw ile başlar: üç dallı if / else if zincirinden yalnızca oyunDurumu’nun o anki değerine karşılık gelen dal çalışır. Oyun dalında önce klavye okunup oyuncu konumu güncellenir ve constrain ile tuval içinde tutulur, ardından top hareket ettirilip kenarlarda hızı ters çevrilir, en sonda dist ile önce hedef, sonra top teması denetlenir. Çarpışma anında atanan yeni durum, aynı frame’de değil bir sonraki draw çağrısında bitiş ekranını devreye sokar. oyunuSifirla yalnızca menüden oyuna geçişte çağrıldığı için her tur rastgele ama tutarlı bir başlangıçla kurulur. Aynı oyunDurumu omurgası, sonraki ana başlıktaki XOX projesinde tur tabanlı tahta verisiyle birleştirilir.

Neler Öğrendik?

Soru 1 Start tuşu tipik olarak hangi geçişi yapar?

Soru 2 Bitiş ekranında hareket kodu neden genelde çalışmaz?

Soru 3 Kaç-kaç örneğinin pedagojik amacı nedir?

Soru 4 Yeniden dene akışı çoğu zaman nereye döner?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: A

• Çözüm: Start oyunu başlatır.
• İlgili Konu: 3.1. Basit Menü–Oyun–Bitiş Akışı

Soru 2: Doğru Cevap: A

• Çözüm: Durum dışı güncelleme istemeyiz.
• İlgili Konu: 3.1. Basit Menü–Oyun–Bitiş Akışı

Soru 3: Doğru Cevap: A

• Çözüm: Bütünleşik mini örnektir.
• İlgili Konu: 3.1. Basit Menü–Oyun–Bitiş Akışı

Soru 4: Doğru Cevap: A

• Çözüm: Yeniden başlatma menü/oyun başıdır.
• İlgili Konu: 3.1. Basit Menü–Oyun–Bitiş Akışı

Yararlanılan Kaynaklar

Bu içerik aşağıdaki kaynaklardan derlenerek hazırlanmıştır:

• Excalidraw. (n.d.). https://excalidraw.com
• McCarthy, L., Reas, C., & Fry, B. (2015). Make: Getting Started with p5.js. Maker Media.
• Mermaid Live Editor. (n.d.). https://mermaid.live
• Mermaid. (n.d.). State diagrams. https://mermaid.js.org/syntax/stateDiagram.html
• Nystrom, R. (2014). Game Programming Patterns — State. https://gameprogrammingpatterns.com/state.html
• p5.js Foundation. (n.d.). keyPressed. p5.js Reference. https://p5js.org/reference/p5/keyPressed/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js

Ana Başlık 4. Adım Adım: XOX (Tic-Tac-Toe)

Amaç: İki boyutlu dizi, fare tıklaması ve durum makinesini birleştirerek tam bir XOX oyunu kodlamak; Önceki bölümlerde öğrenilen girdi, modüler çizim ve oyun aşamalarını tek projede toplamak.

Öğrenme Çıktıları:

• 3×3 tahtayı iki boyutlu dizi ile modeller.
• Izgara tabanlı tanıdık oyunlarda iki (ve gerektiğinde çok) boyutlu dizinin neden işe yaradığını örneklerle açıklar.
• Modüler fonksiyonlarla tahta çizgileri ve X/O taşlarını çizer.
• mousePressed() ile tıklanan hücreye geçerli hamle yerleştirir.
• Sıra ve geçersiz hamle kurallarını uygular.
• Kazanan ve beraberlik koşullarını kontrol eder; durum makinesi ile menü–oyun–bitiş akışını tamamlar.

Anahtar Sözcükler: XOX, tic-tac-toe, iki boyutlu dizi, ızgara, matris, hamle, kazanma koşulu, beraberlik, durum makinesi

Giriş

Önceki ana başlıkta durum makinesi ile menü, oyun ve bitiş aşamaları oyunDurumu değişkeniyle yönetilmişti; Kaç-Kaç Top örneğinde SPACE ile başlama, çarpışma ile bitiş ve R ile menüye dönüş kodlanmıştı. XOX (Tic-Tac-Toe) oyunu aynı üç aşamalı iskeleti kullanır; fark, DURUM_OYUN içinde 3×3 ızgara tahtası ve sırayla X/O yerleştirme mantığının çalışmasıdır.

Önceki bölümlerde tek boyutlu diziler, iç içe for döngüleriyle ızgara çizimi ve modüler tahtaCiz / hucreCiz fonksiyonları tanıtılmıştı. Önceki bölümlerde fare tıklaması (mousePressed), klavye (keyPressed) ve durum makinesi eklendi. Bu ana başlıkta tahta verisi iki boyutlu dizi (tahta[satir][sutun]) ile saklanır; her frame'de (her draw() çağrısında) tahta çizilir, hamle yalnızca fare tıklandığında işlenir. Böylece sürekli animasyon ile olay tabanlı girdi aynı sketch'te birleşir; çizim her frame yenilenirken kurallar tıklama anında uygulanır.

4.1. Oyun Kuralları ve Veri Yapısı

Temel kurallar:

Tablo 1.

Klasik XOX kurallarını denemek için kaynaklardaki çevrim içi tahta bağlantısına bakılabilir.

Tahta durumu iki boyutlu dizi ile modellenir. Önceki bölümlerdeki tek boyutlu dizi[0], dizi[1] yapısının satır–sütun karşılığı tahta[satir][sutun] erişimidir:

let tahta = [  ["", "", ""],  ["", "", ""],  ["", "", ""]];

Tablo 2.

Görsel 1, tahta[satir][sutun] erişiminde satırın önce, sütunun sonra geldiğini ve her hücrenin boş string veya "X" / "O" tuttuğunu gösterir.

Oyun durumu için önceki ana başlıktaki sabitler korunur; tahta mantığına ek değişkenler eklenir:

const DURUM_MENU = "menu";const DURUM_OYUN = "oyun";const DURUM_BITIS = "bitis";const HUCRE = 100; let oyunDurumu;let tahta;let sira;      // "X" veya "O" — şu an kim oynuyorlet sonuc;     // kazanan ("X"/"O") veya "beraberlik"

Tablo 3.

Tuval boyutu tahta ile uyumludur: createCanvas(300, 300) ve HUCRE = 100 → 3×3 kare tam tuvali kaplar. oyunuSifirla() yeni turda tahtayı boşaltır ve sırayı X'e verir:

function oyunuSifirla() {  tahta = [    ["", "", ""],    ["", "", ""],    ["", "", ""]  ];  sira = "X";  sonuc = "";}

Neden oyun programlamada iki boyutlu dizi? Birçok oyun dünyası satır–sütun ızgarasıdır: her hücre “burada ne var?” sorusuna tek bir yanıt tutar (boş, taş, duvar, mayın, yem…). tahta[satir][sutun] bu soruyu doğrudan sorar. Komşu hücreler (satir ± 1, sutun ± 1), kazanma çizgileri veya “bu sütunda aşağı düş” gibi kurallar da aynı indeks diline oturur. Aynı veriyi tek boyutlu 9 (veya 64) elemanlı dizide tutmak mümkündür; fakat “2. satır, 3. sütun” her seferinde elle formülle çevrilir — ızgara büyüdükçe hata ve okuma maliyeti artar.

Tanıdık oyunlarda tipik kullanım (hücrede ne tutulduğunun özeti):

Tablo 4.

Bu örneklerin hepsi “önce tahtayı diziyle modelle, sonra çiz ve kuralları uygula” sırasını paylaşır; XOX o sıranın en küçük tam projesidir. İleri Teknikler kitabında aynı fikir büyür: Yılan ve Connect Four’da daha büyük matris, Mayın Tarlası’nda hücre durumu zenginleşir.

Çok boyutlu dizi (kısa bakış): Üç veya daha fazla indeks bazen işe yarar — örneğin katman[z][y][x] ile Minecraft tarzı blok dünyası, veya kare[satir][sutun][ozellik] ile aynı hücrede birkaç sayı. Bu kitapta önce iki boyutlu tahta yeterlidir; çok boyutlu yapı, ızgara fikrinin doğal uzantısıdır, ayrı bir sihir değildir. Pratikte çoğu 2B oyun tek matris + birkaç yardımcı dizi ile ilerler.

4.2. Tahta ve Taş Çizimi

Tahta çizimi modüler fonksiyonlara ayrılır (Bölüm 2'in 3. ana başlığı): çizgiler, taşlar ve oyun ekranı birleşimi ayrı bloklardadır. draw() içinde DURUM_OYUN iken yalnızca oyun ekranı çizilir; menü ve bitiş Ana Başlık 2'deki gibi ayrı fonksiyonlardır.

Kod bloğu: Tahta çizgileri — line() ile ızgara.

function cizTahtaCizgileri() {  background(245, 242, 235);  stroke(40);  strokeWeight(4);  line(HUCRE, 0, HUCRE, height);  line(HUCRE * 2, 0, HUCRE * 2, height);  line(0, HUCRE, width, HUCRE);  line(0, HUCRE * 2, width, HUCRE * 2);  noStroke();}

Dört line() çağrısı dikey iki, yatay iki çizgi çizer; hücre sınırları oluşur. Arka plan rengi background() ile her frame'de yenilenir.

Taşlar, tahtadaki dolu hücreler üzerinden iç içe döngüyle çizilir:

function taslariCiz() {  for (let satir = 0; satir < 3; satir = satir + 1) {    for (let sutun = 0; sutun < 3; sutun = sutun + 1) {      let deger = tahta[satir][sutun];      if (deger !== "") {        tasCiz(sutun * HUCRE, satir * HUCRE, HUCRE, deger);      }    }  }}

Tablo 5.

Kod bloğu: Tek taş çizimi — text() ile X/O.

function tasCiz(x, y, boyut, deger) {  textAlign(CENTER, CENTER);  textSize(boyut * 0.55);  if (deger === "X") {    fill(200, 50, 50);  } else {    fill(50, 80, 200);  }  text(deger, x + boyut / 2, y + boyut / 2);}

Piksel konumu sutun * HUCRE, satir * HUCRE ile hesaplanır: sütun soldan sağa, satır yukarıdan aşağı artar. Metin hücre merkezine textAlign(CENTER, CENTER) ile yerleştirilir. Oyun ekranında sıra bilgisi sol üstte gösterilir:

function cizOyunEkrani() {  cizTahtaCizgileri();  taslariCiz();  fill(30);  textSize(14);  textAlign(LEFT, TOP);  noStroke();  text("Sıra: " + sira, 8, 8);}

4.3. Tıklama ile Hamle

Hamle, p5.js olay fonksiyonu mousePressed() ile işlenir (önceki bölümler). Fare koordinatları mouseX, mouseY piksel cinsindendir; hücre indeksine dönüştürmek için floor() kullanılır (önceki bölümler, diziler ana başlığı):

let sutun = floor(mouseX / HUCRE);let satir = floor(mouseY / HUCRE);

Örneğin HUCRE = 100 iken mouseX = 150 → sutun = 1 (orta sütun); mouseY = 220 → satir = 2 (alt satır).

Hamle işleme sırası:

Tablo 6.

Görsel 2, piksel koordinatının floor(mouseX / HUCRE) ile hangi kareye denk geldiğini özetler.

Kod bloğu: mousePressed() — hamle ve durum kontrolü.

function mousePressed() {  if (oyunDurumu === DURUM_MENU) {    oyunuSifirla();    oyunDurumu = DURUM_OYUN;    return;  }  if (oyunDurumu !== DURUM_OYUN) {    return;  }   let sutun = floor(mouseX / HUCRE);  let satir = floor(mouseY / HUCRE);  if (satir < 0 || satir > 2 || sutun < 0 || sutun > 2) {    return;  }  if (tahta[satir][sutun] !== "") {    return;  }   tahta[satir][sutun] = sira;   let kazanan = kazananKontrol();  if (kazanan !== "") {    sonuc = kazanan;    oyunDurumu = DURUM_BITIS;    return;  }  if (tahtaDoluMu()) {    sonuc = "beraberlik";    oyunDurumu = DURUM_BITIS;    return;  }   if (sira === "X") {    sira = "O";  } else {    sira = "X";  }}

Sıra değişimi üçlü operatör (ternary) yerine if/else ile yazılmıştır; okunabilirlik ve önceki bölümlerdeki dallanma alışkanlığı korunur. Bitiş ekranındayken tıklama erken return ile yok sayılır — Ana Başlık 2'deki “duruma göre girdi” kuralının uygulamasıdır.

Menüden oyuna geçiş hem SPACE (keyPressed) hem tıklama ile mümkündür; ikisi de oyunuSifirla() çağırır.

4.4. Kazanan ve Beraberlik

Kazanma koşulu: üç hücrede aynı işaret ve hücrelerin boş olmaması. 3×3 tahtada toplam 8 kazanma hattı vardır:

Tablo 7.

Görsel 3, sekiz hattın tahta üzerindeki konumunu ve beraberlik koşulunu özetler.

Kod bloğu: kazananKontrol() — satır, sütun ve çapraz tarama.

function kazananKontrol() {  for (let i = 0; i < 3; i = i + 1) {    if (tahta[i][0] !== "" && tahta[i][0] === tahta[i][1] && tahta[i][1] === tahta[i][2]) {      return tahta[i][0];    }  }  for (let j = 0; j < 3; j = j + 1) {    if (tahta[0][j] !== "" && tahta[0][j] === tahta[1][j] && tahta[1][j] === tahta[2][j]) {      return tahta[0][j];    }  }  if (tahta[0][0] !== "" && tahta[0][0] === tahta[1][1] && tahta[1][1] === tahta[2][2]) {    return tahta[0][0];  }  if (tahta[0][2] !== "" && tahta[0][2] === tahta[1][1] && tahta[1][1] === tahta[2][0]) {    return tahta[0][2];  }  return "";}

Fonksiyon kazanan işareti ("X" veya "O") veya kazanan yoksa "" döndürür. İlk for üç yatay satırı, ikinci for üç dikey sütunu tarar; çaprazlar ayrı if bloklarındadır.

Beraberlik: Tüm hücreler dolu ve kazananKontrol() boş string döndürürse oyun berabere biter. Yardımcı fonksiyon:

function tahtaDoluMu() {  for (let satir = 0; satir < 3; satir = satir + 1) {    for (let sutun = 0; sutun < 3; sutun = sutun + 1) {      if (tahta[satir][sutun] === "") {        return false;      }    }  }  return true;}

Her hamle sonrası sıra önce kazanma, sonra beraberlik kontrol edilir; kazanan bulunursa sıra değiştirilmez (oyun zaten biter). Bitiş ekranı sonuc değişkenine göre mesaj gösterir:

function cizBitisEkrani() {  background(35, 30, 40);  fill(255);  textAlign(CENTER, CENTER);  textSize(22);  if (sonuc === "beraberlik") {    text("Beraberlik!", width / 2, height / 2 - 20);  } else {    text("Kazanan: " + sonuc, width / 2, height / 2 - 20);  }  textSize(14);  text("R — menüye dön", width / 2, height / 2 + 30);}

4.5. Tam Kod ve Genişletme

Aşağıdaki sketch menü–oyun–bitiş durum makinesi, iki boyutlu tahta, tıklama ile hamle ve kazanma/beraberlik kontrolünü birleştirir; p5.js Web Editor'e yapıştırarak doğrudan çalıştırabilirsiniz.

XOX geçiş tablosu:

Tablo 8.

Oyun kuralları:

• Menü: “SPACE veya tıkla — başla”.
• Oyun: Boş kareye tıklayarak X/O koy; sıra sırayla değişir.
• Kazanan veya beraberlik: Bitiş ekranı.
• Bitiş: R ile menüye dön.

setup içinde yeni bir satır vardır: textFont("sans-serif"). Bu, tuvale yazılacak metnin yazı tipini seçer. "sans-serif" sistemdeki varsayılan sans-serif (tırnaksız) yazı tipini kullanır; menü ve bitiş yazıları daha okunaklı görünür. textSize boyutu, textAlign hizayı ayarlarken textFont aileyi (font) belirler. İlerideki oyunlarda (Mayın Tarlası vb.) aynı satır tekrarlanabilir.

const DURUM_MENU = "menu";const DURUM_OYUN = "oyun";const DURUM_BITIS = "bitis";const HUCRE = 100; let oyunDurumu;let tahta;let sira;let sonuc; function setup() {  createCanvas(300, 300);  textFont("sans-serif");  oyunDurumu = DURUM_MENU;} function draw() {  if (oyunDurumu === DURUM_MENU) {    cizMenu();  } else if (oyunDurumu === DURUM_OYUN) {    cizOyunEkrani();  } else if (oyunDurumu === DURUM_BITIS) {    cizBitisEkrani();  }} function cizMenu() {  background(28, 32, 48);  fill(255);  textAlign(CENTER, CENTER);  textSize(32);  text("XOX", width / 2, height / 2 - 30);  textSize(14);  text("SPACE veya tıkla — başla", width / 2, height / 2 + 20);} function cizOyunEkrani() {  cizTahtaCizgileri();  taslariCiz();  fill(30);  textSize(14);  textAlign(LEFT, TOP);  noStroke();  text("Sıra: " + sira, 8, 8);} function cizBitisEkrani() {  background(35, 30, 40);  fill(255);  textAlign(CENTER, CENTER);  textSize(22);  if (sonuc === "beraberlik") {    text("Beraberlik!", width / 2, height / 2 - 20);  } else {    text("Kazanan: " + sonuc, width / 2, height / 2 - 20);  }  textSize(14);  text("R — menüye dön", width / 2, height / 2 + 30);} function cizTahtaCizgileri() {  background(245, 242, 235);  stroke(40);  strokeWeight(4);  line(HUCRE, 0, HUCRE, height);  line(HUCRE * 2, 0, HUCRE * 2, height);  line(0, HUCRE, width, HUCRE);  line(0, HUCRE * 2, width, HUCRE * 2);  noStroke();} function taslariCiz() {  for (let satir = 0; satir < 3; satir = satir + 1) {    for (let sutun = 0; sutun < 3; sutun = sutun + 1) {      let deger = tahta[satir][sutun];      if (deger !== "") {        tasCiz(sutun * HUCRE, satir * HUCRE, HUCRE, deger);      }    }  }} function tasCiz(x, y, boyut, deger) {  textAlign(CENTER, CENTER);  textSize(boyut * 0.55);  if (deger === "X") {    fill(200, 50, 50);  } else {    fill(50, 80, 200);  }  text(deger, x + boyut / 2, y + boyut / 2);} function mousePressed() {  if (oyunDurumu === DURUM_MENU) {    oyunuSifirla();    oyunDurumu = DURUM_OYUN;    return;  }  if (oyunDurumu !== DURUM_OYUN) {    return;  }   let sutun = floor(mouseX / HUCRE);  let satir = floor(mouseY / HUCRE);  if (satir < 0 || satir > 2 || sutun < 0 || sutun > 2) {    return;  }  if (tahta[satir][sutun] !== "") {    return;  }   tahta[satir][sutun] = sira;   let kazanan = kazananKontrol();  if (kazanan !== "") {    sonuc = kazanan;    oyunDurumu = DURUM_BITIS;    return;  }  if (tahtaDoluMu()) {    sonuc = "beraberlik";    oyunDurumu = DURUM_BITIS;    return;  }   if (sira === "X") {    sira = "O";  } else {    sira = "X";  }} function kazananKontrol() {  for (let i = 0; i < 3; i = i + 1) {    if (tahta[i][0] !== "" && tahta[i][0] === tahta[i][1] && tahta[i][1] === tahta[i][2]) {      return tahta[i][0];    }  }  for (let j = 0; j < 3; j = j + 1) {    if (tahta[0][j] !== "" && tahta[0][j] === tahta[1][j] && tahta[1][j] === tahta[2][j]) {      return tahta[0][j];    }  }  if (tahta[0][0] !== "" && tahta[0][0] === tahta[1][1] && tahta[1][1] === tahta[2][2]) {    return tahta[0][0];  }  if (tahta[0][2] !== "" && tahta[0][2] === tahta[1][1] && tahta[1][1] === tahta[2][0]) {    return tahta[0][2];  }  return "";} function tahtaDoluMu() {  for (let satir = 0; satir < 3; satir = satir + 1) {    for (let sutun = 0; sutun < 3; sutun = sutun + 1) {      if (tahta[satir][sutun] === "") {        return false;      }    }  }  return true;} function oyunuSifirla() {  tahta = [    ["", "", ""],    ["", "", ""],    ["", "", ""]  ];  sira = "X";  sonuc = "";} function keyPressed() {  if (oyunDurumu === DURUM_MENU && key === " ") {    oyunuSifirla();    oyunDurumu = DURUM_OYUN;  }  if (oyunDurumu === DURUM_BITIS && (key === "r" || key === "R")) {    oyunDurumu = DURUM_MENU;  }}

Bu proje önceki bölümlerin kapanış örneğidir: Bölüm 2 Ana Başlık 4'teki frame döngüsü, Bölüm 3 Ana Başlık 4'teki klavye, Ana Başlık 1'deki koordinat mantığı, Ana Başlık 2'deki durum makinesi ve önceki bölümlerdeki diziler ile modüler fonksiyonlar tek XOX oyununda birleşir.

Genişletme fikirleri (İleri Teknikler kitabı): Bilgisayar rakibi (Minimax), Connect Four benzeri tahta — aynı tahta[satir][sutun] iskeleti üzerine. Aşağıdaki etkinlikte ise bu düzeyde kodlanabilir XOX varyantları vardır.

Aşağıdaki Yapay Zekâ Etkileşimi etkinlikleri önce ızgara / dizi fikrini tanıdık oyunlarla pekiştirir; sonra Ana Başlık 2'deki Hafıza projesine benzer biçimde XOX varyantı kodlamanızı ister. Takılınca YZ’den öğretmen / onarım yardımı alın — tüm oyunu baştan yazdırmayın.

Özet

XOX oyunu 3×3 tahtayı iki boyutlu dizi (tahta[satir][sutun]) ile modeller; boş hücre "", dolu hücre "X" veya "O" tutar. Aynı satır–sütun fikri satranç, Mayın Tarlası, Tetris, Connect Four, Pac-Man labirenti gibi ızgara oyunlarının da omurgasıdır; hücrede tutulan veri oyuna göre değişir. Önceki bölümlerdeki tek boyutlu dizi alışkanlığı satır–sütun erişimine genişler: tahta[1][2] orta satırın sağ hücresidir. Tahta çizgileri ve taşlar modüler fonksiyonlarla her frame'de çizilir; hamle mousePressed() ile piksel koordinatından floor(mouseX / HUCRE) ve floor(mouseY / HUCRE) ile kare indeksine dönüştürülerek yapılır. Sınır dışı veya dolu hücreye tıklama erken return ile yok sayılır; geçerli hamlede mevcut sıra işareti yazılır, ardından sıra if/else ile X ve O arasında değişir. İndeks hesabı yanlışsa taş yanlış hücreye düşer. Sekiz kazanma hattı (üç satır, üç sütun, iki çapraz) kazananKontrol() ile taranır; aynı işaretle üç hücre doluysa kazanan döner. Tahta dolu ve kazanan yoksa tahtaDoluMu() ile beraberlik ilan edilir. Menü, oyun ve bitiş Ana Başlık 2'deki oyunDurumu deseniyle yönetilir; SPACE veya tıklama ile başlama, R ile menüye dönüş tamamlanır. Bitiş ekranındayken fare tıklaması hamle üretmez — girdi yalnızca geçerli durumda işlenir. draw() içinde durum dallanması menü metnini, oyun tahtasını ve bitiş sonucunu ayırır; tahta verisi ile çizim fonksiyonları birbirinden bağımsız kaldığı için bilgisayar rakibi veya skor tablosu gibi genişletmeler aynı iskelete eklenebilir. Menüye dönüşte tahta boşaltılır ve sıra yeniden X'e alınır.

Neler Öğrendik?

Soru 1 3×3 XOX tahtasında tahta[1][2] hangi hücreyi ifade eder?

Soru 2 Dolu bir kareye tıklandığında mousePressed() içinde ne olması beklenir?

Soru 3 [Kod okuma] kazananKontrol() boş string ("") döndürdüğünde ve tahtaDoluMu() true ise sonuç nedir?

Soru 4 Bitiş ekranındayken fare tıklamasının hamle oluşturmaması hangi ilkeye dayanır?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: İndeks 0'dan başlar; [1][2] ikinci satır (orta), üçüncü sütun (sağ) hücredir.
• İlgili Konu: 4.1. Oyun Kuralları ve Veri Yapısı

Soru 2: Doğru Cevap: C

• Çözüm: tahta[satir][sutun] !== "" kontrolü başarısız olunca fonksiyon erken çıkar; geçersiz hamle işlenmez.
• İlgili Konu: 4.3. Tıklama ile Hamle

Soru 3: Doğru Cevap: B

• Çözüm: Kazanan yok, tahta dolu → beraberlik koşulu; sonuc = "beraberlik" ve DURUM_BITIS.
• İlgili Konu: 4.4. Kazanan ve Beraberlik

Soru 4: Doğru Cevap: B

• Çözüm: oyunDurumu !== DURUM_OYUN iken mousePressed() erken return eder; duruma göre girdi (Ana Başlık 2).
• İlgili Konu: 4.3. Tıklama ile Hamle

Yararlanılan Kaynaklar

Bu içerik aşağıdaki kaynaklardan derlenerek hazırlanmıştır:

• MathsIsFun. (n.d.). Tic-Tac-Toe [Çevrim içi oyun]. https://www.mathsisfun.com/games/tic-tac-toe.html
• McCarthy, L., Reas, C., & Fry, B. (2015). Make: Getting Started with p5.js. Maker Media.
• Nystrom, R. (2014). Game Programming Patterns — State. https://gameprogrammingpatterns.com/state.html
• p5.js Foundation. (n.d.). floor. p5.js Reference. https://p5js.org/reference/p5/floor/
• p5.js Foundation. (n.d.). mousePressed. p5.js Reference. https://p5js.org/reference/p5/mousePressed/
• p5.js Foundation. (n.d.). textFont. p5.js Reference. https://p5js.org/reference/p5/textFont/
• PlayTicTacToe. (n.d.). Tic Tac Toe [Çevrim içi oyun]. https://playtictactoe.org/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js

Bölüm 4 — Ek Sorular

Her ana başlık için 10 çoktan seçmeli değerlendirme sorusu. Bölüm sonu sınav veya pekiştirme amaçlıdır.

Ana Başlık 1 için 10 Soru

SORU 1: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 2: İki daire çarpışmasında uygun koşul hangisidir?

Doğru cevap: A

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 1.2

SORU 3: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 4: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 5: «Çarpışma Temelleri ve Sekme» bağlamında hangisi daha iyi bir sonraki adım geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme mevcut öğrenilen API ile kural ekler. İlgili Konu: 1.uygulama

SORU 6: Aşağıdaki hangi seçenek tipik bir çeldirici bug senaryosudur?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer — görünür bug. İlgili Konu: 1.uygulama

SORU 7: Kod okuma: if (x > width) { x = 0; } ne yapar?

Doğru cevap: B

Genel açıklama: Yatay sarma (wrap) kalıbı. İlgili Konu: 1.uygulama

SORU 8: Bu ana başlıkta (Çarpışma Temelleri ve Sekme) hangi uygulama en uygundur?

Doğru cevap: B

Genel açıklama: Seçenek konu başlığıyla örtüşür; diğerleri alandan kopuk. İlgili Konu: 1.uygulama

SORU 9: console.log ayıklamada asıl faydası nedir?

Doğru cevap: B

Genel açıklama: Gözlemlenebilir ara durum. İlgili Konu: 1.uygulama

SORU 10: Bir fonksiyonu parametreli yazmanın faydası?

Doğru cevap: B

Genel açıklama: Modülerlik ve yeniden kullanım. İlgili Konu: 1.uygulama

Ana Başlık 2 için 10 Soru

SORU 1: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 2: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 3: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 4: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 5: «Durum Makinesi Kavramı ve Geçişler» bağlamında hangisi daha iyi bir sonraki adım geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme mevcut öğrenilen API ile kural ekler. İlgili Konu: 2.uygulama

SORU 6: Aşağıdaki hangi seçenek tipik bir çeldirici bug senaryosudur?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer — görünür bug. İlgili Konu: 2.uygulama

SORU 7: Kod okuma: if (x > width) { x = 0; } ne yapar?

Doğru cevap: B

Genel açıklama: Yatay sarma (wrap) kalıbı. İlgili Konu: 2.uygulama

SORU 8: Bu ana başlıkta (Durum Makinesi Kavramı ve Geçişler) hangi uygulama en uygundur?

Doğru cevap: B

Genel açıklama: Seçenek konu başlığıyla örtüşür; diğerleri alandan kopuk. İlgili Konu: 2.uygulama

SORU 9: console.log ayıklamada asıl faydası nedir?

Doğru cevap: B

Genel açıklama: Gözlemlenebilir ara durum. İlgili Konu: 2.uygulama

SORU 10: Bir fonksiyonu parametreli yazmanın faydası?

Doğru cevap: B

Genel açıklama: Modülerlik ve yeniden kullanım. İlgili Konu: 2.uygulama

Ana Başlık 3 için 10 Soru

SORU 1: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 2: Bitiş ekranında hareket kodu neden genelde çalışmaz?

Doğru cevap: A

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 3.2

SORU 3: Kaç-kaç örneğinin pedagojik amacı nedir?

Doğru cevap: A

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 3.3

SORU 4: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 5: «Menü–Oyun–Bitiş Akışı ve Kaç-Kaç» bağlamında hangisi daha iyi bir sonraki adım geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme mevcut öğrenilen API ile kural ekler. İlgili Konu: 3.uygulama

SORU 6: Aşağıdaki hangi seçenek tipik bir çeldirici bug senaryosudur?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer — görünür bug. İlgili Konu: 3.uygulama

SORU 7: Kod okuma: if (x > width) { x = 0; } ne yapar?

Doğru cevap: B

Genel açıklama: Yatay sarma (wrap) kalıbı. İlgili Konu: 3.uygulama

SORU 8: Bu ana başlıkta (Menü–Oyun–Bitiş Akışı ve Kaç-Kaç) hangi uygulama en uygundur?

Doğru cevap: B

Genel açıklama: Seçenek konu başlığıyla örtüşür; diğerleri alandan kopuk. İlgili Konu: 3.uygulama

SORU 9: console.log ayıklamada asıl faydası nedir?

Doğru cevap: B

Genel açıklama: Gözlemlenebilir ara durum. İlgili Konu: 3.uygulama

SORU 10: Bir fonksiyonu parametreli yazmanın faydası?

Doğru cevap: B

Genel açıklama: Modülerlik ve yeniden kullanım. İlgili Konu: 3.uygulama

Ana Başlık 4 için 10 Soru

SORU 1: tahta[1][2] ifadesi neyi ifade eder?

Doğru cevap: B

Genel açıklama: İlk indeks satır, ikinci indeks sütundur. İlgili Konu: 5.1

SORU 2: Boş XOX hücresi tipik olarak nasıl temsil edilir?

Doğru cevap: C

Genel açıklama: Boş hücre boş string; dolu hücre "X" veya "O". İlgili Konu: 5.1

SORU 3: Dolu hücreye tıklandığında tipik davranış nedir?

Doğru cevap: B

Genel açıklama: Geçersiz hamle erken çıkışla yok sayılır. İlgili Konu: 5.3

SORU 4: [Kod okuma] HUCRE = 100, mouseX = 250, mouseY = 120 iken floor(mouseX / HUCRE) ve floor(mouseY / HUCRE) değerleri sırasıyla nedir?

Doğru cevap: A

Genel açıklama: floor(250/100)=2, floor(120/100)=1 → sütun 2, satır 1. İlgili Konu: 5.3

SORU 5: 3×3 XOX tahtasında kaç kazanma hattı vardır?

Doğru cevap: C

Genel açıklama: 3 yatay + 3 dikey + 2 çapraz = 8 hat. İlgili Konu: 5.4

SORU 6: Beraberlik koşulu aşağıdakilerden hangisidir?

Doğru cevap: B

Genel açıklama: 9 hücre dolu, kazanan yoksa beraberlik. İlgili Konu: 5.4

SORU 7: [Kod okuma] Aşağıdaki tahtada kazananKontrol() ne döndürür? Kod 1.

let tahta = [  ["X", "X", "X"],  ["O", "", "O"],  ["", "O", ""]];

Doğru cevap: B

Genel açıklama: Üst satır X-X-X — yatay kazanma hattı. İlgili Konu: 5.4

SORU 8: XOX'ta hamle işleme neden yalnızca DURUM_OYUN iken yapılmalıdır?

Doğru cevap: B

Genel açıklama: Durum makinesi her aşamada farklı girdi anlamı taşır. İlgili Konu: 5.3 ve 5.5

SORU 9: I. oyunuSifirla() tahtayı ve sırayı yeniler.
II. Her geçerli hamle sonrası önce kazanma, sonra beraberlik kontrol edilir.
III. tahta bir boyutlu dizidir.

Hangileri doğrudur?

Doğru cevap: B

Genel açıklama: I ve II doğru. III yanlış; tahta iki boyutlu dizidir. İlgili Konu: 5.1–5.4

SORU 10: XOX sketch'inde menüden oyuna geçiş için hangi girdiler desteklenir?

Doğru cevap: B

Genel açıklama: Menüde SPACE veya tıklama oyunuSifirla() ve DURUM_OYUN atar. İlgili Konu: 5.5

Açık Uçlu Pekiştirme Soruları

Bu bölüm sınav formatı dışındadır; tartışma, ödev, sınıf içi etkinlik veya ana başlıklardaki Yapay Zekâ Etkileşimi öğesiyle birlikte kullanılır.

Ana Başlık 1 — Açık Uçlu

A1. «Çarpışma Temelleri ve Sekme» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «Çarpışma Temelleri ve Sekme» için küçük bir varyasyon tasarlayın (yeni kural, sınır durumu veya görsel geri bildirim). Hangi fonksiyonlar değişir? Madde madde yazın.

A3. Bu ana başlıkta sık yapılan bir yanlış varsayımı (yanlış indeks, sıra, durum veya veri modeli) seçin; neden hatalı olduğunu ve doğru yaklaşımı iki–üç cümleyle yazın.

Ana Başlık 2 — Açık Uçlu

A1. «Durum Makinesi Kavramı ve Geçişler» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «Durum Makinesi Kavramı ve Geçişler» için küçük bir varyasyon tasarlayın (yeni kural, sınır durumu veya görsel geri bildirim). Hangi fonksiyonlar değişir? Madde madde yazın.

A3. Bu ana başlıkta sık yapılan bir yanlış varsayımı (yanlış indeks, sıra, durum veya veri modeli) seçin; neden hatalı olduğunu ve doğru yaklaşımı iki–üç cümleyle yazın.

Ana Başlık 3 — Açık Uçlu

A1. «Menü–Oyun–Bitiş Akışı ve Kaç-Kaç» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «Menü–Oyun–Bitiş Akışı ve Kaç-Kaç» için küçük bir varyasyon tasarlayın (yeni kural, sınır durumu veya görsel geri bildirim). Hangi fonksiyonlar değişir? Madde madde yazın.

A3. Bu ana başlıkta sık yapılan bir yanlış varsayımı (yanlış indeks, sıra, durum veya veri modeli) seçin; neden hatalı olduğunu ve doğru yaklaşımı iki–üç cümleyle yazın.

Ana Başlık 4 — Açık Uçlu

A1. kazananKontrol() için üç test tahtası tasarlayın: X kazanır, O kazanır, beraberlik öncesi (henüz kazanan yok, tahta dolu değil).

Örnek yanıt unsurları: 3×3 dizi; beklenen dönüş "X", "O", "".
Değerlendirme: Her senaryo ayırt edilebilir mi?

A2. İki boyutlu dizi ile önceki bölümlerdeki tek boyutlu dizi arasındaki farkı XOX örneğiyle açıklayın.

Örnek yanıt unsurları: tahta[satir][sutun] vs skorlar[i].
Değerlendirme: Satır–sütun erişimi doğru mu?

A3. XOX sketch'ine bilgisayar rakibi eklemeden önce hangi fonksiyonlara dokunmadan yalnızca yeni mantık eklenebilir? Modülerlik açısından tartışın.

Örnek yanıt unsurları: mousePressed yerine sıra O iken rastgeleHamle(); çizim fonksiyonları aynı kalabilir.
Değerlendirme: Veri/çizim/girdi ayrımı düşünülmüş mü?