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