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