Bölüm 4 · Sunum 2
Durum makinesi: oyun şu an hangi ekranda?
Menü, oyun ve bitiş ekranlarını birbirine karıştırmadan yönetmek.
Bir oyunu açtınız. Karakter hemen koşmaya mı başlıyor?
Önce ne görüyorsunuz? Oyun bitince ne görüyorsunuz? Bu ekranların her birinde aynı tuşlar aynı işi mi yapıyor?
Durum makinesi
| Durum | Ekranda ne görünür? | Girdi ne işe yarar? |
|---|---|---|
| Menü | Başlık, “Başla” talimatı | SPACE → oyunu başlat |
| Oyun | Oyuncu, hedef, top, skor | WASD hareket; çarpışma → bitiş |
| Bitiş | Skor, “Tekrar dene” | R → menüye dön |
Durum oyunun aşamasıdır. Geçiş (transition), bir olay olunca durum değişkeninin güncellenmesidir.
Üç durum, üç geçiş
Olay düğmelerine tıklayın
Menüdeyken WASD’ye ya da R’ye basın: hiçbir şey olmaz. Bir olay, yalnızca o durum için tanımlıysa geçiş yaptırır.
Bunu iki boolean ile yazsak olmaz mı?
Bir hata sonucu ikisi de true olursa ekranda ne görürsünüz?
Tek değişken, her an tek değer
true olursa draw aynı frame’de hem menüyü hem sahneyi çizer. Girdinin hangi bloğa gideceği belirsizleşir.oyunDurumuHer an yalnızca bir değer taşır. Geçiş tek bir atama satırıdır.| Yaklaşım | Örnek | Ne zaman yeterli? |
|---|---|---|
| Tek boolean | oyunBitti | Yalnızca devam / bitti |
| Metin durum | "menu", "oyun", "bitis" | Birkaç aşamalı akış |
| Ayrı boolean’lar | menuAcik, oyunAcik | Önerilmez: çakışma riski |
Daire Tıklama’daki oyunBitti aslında iki durumlu küçük bir makineydi: oynuyor / bitti.
Trafik ışığı: geçişi süre tetikler
Kırmızı → Sarı → Yeşil → Sarı → Kırmızı. Burada olay bir tuş değil; sürenin dolması.
Turnike: geçersiz olay yok sayılır
Kilitliyken turnikeyi itmek bir olay değildir; sistem olduğu yerde kalır. Menüde WASD’nin hiçbir şey yapmamasıyla aynı mantık.
Medya oynatıcı: düğmelere tıklayın
Durduruldu ↔ Çalıyor ↔ Duraklatıldı. Oyuna “duraklat” eklemek istediğinizde de kalıp aynıdır: yeni bir durum, birkaç yeni geçiş.
Pac-Man’in hayaletleri de birer durum makinesi
Aynı hayalet, durumuna göre bambaşka davranıyor: kovalarken size doğru, korkmuşken sizden uzağa. Geçişi bir olay (güç hapı) ve bir süre tetikliyor.
Durum makinesi yalnızca menü için değil
Ortak nokta: nesne bir anda tek durumdadır ve neye izin verildiği o duruma bağlıdır.
Bilgisayar biliminde yeri
if / else if zinciri uzar. İleride her durumu ayrı bir sınıf yapacağız; her biri kendi guncelle() ve ciz() metodunu taşıyacak. Buna State deseni denir.Bu derste otomat teorisinin matematiğine girmiyoruz. Metin sabitli basit sürüm hem yeterli hem okunması kolay.
Diyagramı kendiniz çizin
Kâğıt yeterlidir. Dijital için ücretsiz araçlar da var:
| Araç | Adres | Not |
|---|---|---|
| Mermaid Live | mermaid.live | Metinden otomatik şekil |
| diagrams.net | app.diagrams.net | Sürükle bırak |
| Excalidraw | excalidraw.com | El çizimi hissi, hızlı taslak |
keyPressed() ve draw() dallarının kontrol listesi olur.Mermaid: diyagramı metinle yazmak
| Satır | Anlamı |
|---|---|
stateDiagram-v2 | Bu bir durum diyagramıdır |
[*] --> menu | Siyah nokta başlangıç; ilk durum menu |
menu --> oyun : SPACE | menu iken SPACE → oyun |
oyun --> bitis : carpisma | oyun iken çarpışma → bitis |
bitis --> menu : R | bitis iken R → menu |
Kalıp: A --> B : olay. Metni mermaid.live adresine yapıştırınca şekil kendiliğinden oluşur. Metin olduğu için Git’te saklamak da kolaydır.
Kaynak metin ve oluşan diyagram
Satranç: sıra bir durumdur
Hamle oyunu bitirmiyorsa sıra karşıya geçer; mat ya da pat üretiyorsa “Oyun bitti”.
Hafıza kartları: kaçıncı kartı açıyoruz?
Bilgi yarışması: 10 soru da olsa 50 soru da olsa üç durum
Soru sayısı durum sayısını artırmaz. Kaçıncı soruda olduğumuz ayrı bir değişkende tutulur.
Tetris: kontrol ne zaman kapalı?
Bir ok kendi kutusuna dönüyor: parça yere oturdu, dolu satır yok, yeni parça geliyor. Durum aynı kalır.
Sıradaki oyunumuz XOX’ta da aynı omurga var
- Menü: kurallar. SPACE ile başla.
- X’in sırası: yalnızca X, boş bir hücreye konur.
- O’nun sırası: yalnızca O konur.
- Bitiş: üçlü ya da berabere. R ile menüye dön.
DURUM_OYUN içinde, sira = "X" / "O" değişkeniyle tutulacak. Menü / oyun / bitiş omurgası aynı kalacak.Oyun döngüsünde durum
- Mevcut durumu oku:
oyunDurumu. - Duruma göre güncelle: hareket ve çarpışma yalnızca oyun durumundayken.
- Duruma göre çiz: menü metni ya da oyun sahnesi.
- Olay fonksiyonlarında (
keyPressed) duruma göre geçiş uygula.
Durumu saklamak: sabitler ve tek değişken
| Sabit | Anlamı |
|---|---|
DURUM_MENU | Başlangıç, ana menü |
DURUM_OYUN | Aktif oyun |
DURUM_BITIS | Oyun bitti ekranı |
Durum değerleri metin olarak tutulur. Karşılaştırmalarda === kullanılır.
SPACE’e basıyorsunuz, oyun başlamıyor. Hata mesajı da yok.
"menü" ile "menu" farklı metinlerdir
false döner. Sonuç: nedeni belirsiz bir “hiçbir şey olmuyor”.DURUM_MENU yerine DURUM_MENÜ yazarsanız JavaScript tanımsız ad için hata verir ve sorunu doğrudan gösterir.Yeni tur: her şeyi başa al
Skor, oyuncunun konumu, topun hızı gibi oyun verileri durumdan bağımsız değişkenlerde tutulur. Durum yalnızca hangi kodun çalışacağını belirler.
random sayesinde her tur biraz farklı başlar.Duruma göre draw()
| Fonksiyon | Görevi |
|---|---|
cizMenu() | Arka plan, başlık, talimat |
guncelleOyun() | Hareket, çarpışma, skor; yalnızca oyun aşamasında |
cizOyun() | Oyuncu, top, arayüz |
cizBitis() | Son skor, yeniden başlatma talimatı |
draw artık bir yönlendirici: duruma bakıyor ve işi ilgili fonksiyonlara bırakıyor.
Her durumda başka bir ekran
Hangi durumda ne çalışır?
| Durum | draw() içinde | keyPressed() | Sürekli girdi (keyIsDown) |
|---|---|---|---|
DURUM_MENU | cizMenu() | SPACE → oyuna geç | Yok sayılır |
DURUM_OYUN | guncelleOyun() + cizOyun() | — | WASD / ok tuşları |
DURUM_BITIS | cizBitis() | R → menüye dön | Yok sayılır |
Girdi de duruma bağlıdır. Aynı tuş farklı aşamalarda farklı iş yapabilir ya da bilinçli olarak yok sayılır.
Geçişler keyPressed() içinde
- Her
ifiki şeye birden bakıyor: hangi durumdayız ve hangi tuş. - SPACE ve R tek seferlik olaylar: yerleri
keyPressed. - Oyun içi sürekli hareket
keyIsDownileguncelleOyun()içinde kalır.
mousePressed() içinde de duruma bakın. Yoksa bitiş ekranındaki bir tıklama oyun mantığını tetikleyebilir.Geçiş tablosu: önce kâğıtta
| Mevcut durum | Olay / koşul | Yeni durum | Ek işlem |
|---|---|---|---|
DURUM_MENU | SPACE basıldı | DURUM_OYUN | oyunuSifirla() |
DURUM_OYUN | Oyuncu hedefe değdi | DURUM_OYUN (değişmez) | Skor artar, hedefYerlestir() |
DURUM_OYUN | Oyuncu topa çarptı | DURUM_BITIS | — |
DURUM_BITIS | R basıldı | DURUM_MENU | — |
draw() ve keyPressed(), tablodaki satırların doğrudan çevirisine dönüşür. Tablosuz yazınca genellikle bir geçiş unutulur.Yapay zekâyla: durum diyagramı
- Üç durumu ve en az dört geçişi kâğıda çizin.
- Yapay zekâdan aynı diyagramı Mermaid metni olarak isteyin.
mermaid.liveadresinde açın. Eksik ya da hatalı bir geçiş var mı? - “Duraklat” eklemek isterseniz hangi yeni durum ve geçişler gerekir? Sorun, sonra kendi diyagramınıza ekleyin.
Kod zamanı
- İskelet: üç durumlu bir sketch yazın. Her durumda farklı arka plan rengi ve ortada durumun adı. SPACE ile oyuna, R ile menüye. Oyundan bitişe geçiş için şimdilik B tuşu.
- Oyun durumundayken bir kare ok tuşlarıyla hareket etsin; menüde ve bitişte hareket etmesin.
DURUM_DURAKLATekleyin: oyundayken P ile duraklat, yeniden P ile devam.- Trafik ışığını durum makinesiyle yazın; süreyi
deltaTimeile sayın. - Zorlu: fareyi kovalayan bir hayalet. Tıklayınca 4 saniye korksun ve kaçsın.
Oyun bitiş ekranında. Oyuncu SPACE’e bastı. Ne olur?
- Oyun yeniden başlar
- Menüye dönülür
- Hiçbir şey olmaz
- Hata verir
İlk if menü durumunu, ikincisi R tuşunu istiyor. İkisi de tutmuyor. Bitişte SPACE tanımlı bir olay değil.
Hangisi bir geçiş değildir?
- Menüde SPACE’e basınca oyunun başlaması
- Oyun sırasında hedef toplayıp skorun 1 artması
- Oyuncunun topa çarpıp bitiş ekranına düşmesi
- Bitişte R’ye basınca menüye dönülmesi
Skor arttı ama durum hâlâ “oyun”. Geçiş, durum değişkeninin değer değiştirmesidir.
Menüde W’ye basılı tutunca oyuncu hareket ediyor. Hata en çok nerede aranır?
keyPressed()içindedraw()içinde:guncelleOyun()durum kontrolünün dışında çağrılıyorsetup()içinde- Sabitlerin yazımında
Sürekli hareket guncelleOyun() içindedir. O fonksiyon yalnızca DURUM_OYUN iken çağrılmalı.
Merak edenler için kaynaklar
Bugün ne öğrendik?
- Durum makinesi: sistem her an tek bir durumdadır; olaylar geçişleri tetikler.
- Ayrı boolean’lar yerine tek bir
oyunDurumudeğişkeni. - Durum adları için
constsabitleri: yazım hatası sessiz kalmaz. drawduruma göre dallanır; girdi de duruma göre işlenir ya da yok sayılır.- Her olay durum değiştirmez; geçiş, durum değişkenine yapılan atamadır.
- Önce diyagram ve geçiş tablosu, sonra kod.
Sıradaki ders
Kaç-Kaç Top
Menüsü, oyunu ve bitiş ekranı olan ilk tam oyunumuz.