Bölüm 4 · Sunum 3

Kaç-Kaç Top: ilk tam oyunumuz

Menüsü, oynanışı ve bitiş ekranı olan bir oyun. Öğrendiklerimizin hepsi tek sketch’te.

KurallarDurum tasarımıKodu parça parça okumakGeçişleri sınamakHafıza kartları projesi

Önce oynayalım

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

Tuvale tıklayın, SPACE’e basın. Ok tuşları ya da WASD ile yeşil hedefleri toplayın; turuncu topa değmeyin. Bitince R.

Az önce oynadığınız oyunda kaç farklı ekran gördünüz?

Her ekranda hangi tuşlar işe yarıyordu? Hangi olay sizi bir ekrandan diğerine götürdü?

Kurallar ve üç durum

Menü: “SPACE — başla” yazısı.
Oyun: kare oyuncu WASD ya da oklarla hareket eder; top duvarlardan sekerek dolaşır.
Oyuncu yeşil hedefe değince skor 1 artar; hedef başka bir yere taşınır.
Top oyuncuya değerse bitiş ekranı gelir; skor gösterilir.
Bitişte R ile menüye dönülür.

MENÜ→ SPACE →OYUN→ çarpışma →BİTİŞ

BİTİŞ→ R →MENÜ

Küçük bir tasarım kararıSkor yalnızca hedefe dokununca artıyor. Köşede beklemek işe yaramaz; puan için topun yakınına gitmeyi göze almanız gerekir. Oyun tasarımında buna risk ve ödül dengesi denir.

Bu oyunda yeni hiçbir şey yok

Bölüm 2Fonksiyonlar: cizMenu, guncelleOyun, cizOyun…
Güncelle ve çiz ayrımı.

Bölüm 3deltaTime ile hız.
keyIsDown ile hareket, keyPressed ile tek basış.
constrain.

Bölüm 4Seken top.
dist ile temas testi.
oyunDurumu ve geçişler.

Yeni olan tek şey, bunların hepsini bir araya getirmek. Kodun tamamı 137 satır; parça parça okuyacağız.

Sabitler ve oyunun verisi

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Üç durum sabiti.
Boyutlar ve hızlar da sabit: oyunun “ayar düğmeleri”. Değiştirip dengeyi deneyebilirsiniz.
oyunDurumu: hangi ekrandayız?
Oyuncu, top, hedef ve skor: oyunun verisi. Durumdan bağımsız değişkenlerde duruyor.

`setup` ve yönlendirici `draw`

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Oyun menüde başlar. draw yalnızca duruma bakar ve işi dağıtır.

Okuma sırasıBir oyunun kodunu okurken hep draw’dan başlayın. Üç daldan yalnızca biri, oyunDurumu’nun o anki değerine göre çalışır.

Menü ekranı

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Arka plan, başlık, iki satır talimat. Burada hareket yok, çarpışma yok; yalnızca çizim.

`guncelleOyun` (1/2): oyuncu ve top

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

`guncelleOyun` (2/2): iki temas testi

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Oyuncu bir kare; merkezi (px, py). İki test de aynı kalıp: dist < yarıçapların toplamı. İlki skoru artırır, ikincisi durumu değiştirir.

Top oyuncuya değdi ve `oyunDurumu = DURUM_BITIS` atandı. Aynı frame’de ekrana ne çizilir?

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Oyun sahnesi, son bir kez

draw başladığında durum hâlâ DURUM_OYUN; ikinci dala girilir.
guncelleOyun() çarpışmayı bulur ve durumu DURUM_BITIS yapar.
Aynı dalın devamı çalışır: cizOyun() çarpışma anını çizer.
Bir sonraki draw çağrısında üçüncü dal çalışır: cizBitis().

Geçiş bir sonraki frame’de görünürif / else if zincirinde dal bir kez seçilir. Durumu dalın ortasında değiştirmek, o frame’de başka bir dala atlatmaz.

Oyun ekranını çizmek

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Sıra önemli: önce hedef, sonra oyuncu, en üstte top.
Skor sol üstte: küçük bir HUD.
Bu fonksiyon hiçbir şeyi değiştirmez; yalnızca değişkenlere bakıp ekrana aktarır.

Bitiş ekranını çizmek

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Farklı bir arka plan rengi: oyuncu ekranın değiştiğini hemen anlar.
Skor, oyun ekranındaki aynı skor değişkeninden okunuyor.
Son satır, oyuncuya bundan sonra ne yapabileceğini söylüyor. Her ekranda bir sonraki adım yazılı olmalı.

Yeni hedef tam oyuncunun üstünde doğarsa ne olur?

Hedef rastgele bir yere konuyor. Şans eseri oyuncunun durduğu yere denk gelirse?

`hedefYerlestir`: uzak bir yer bulana kadar dene

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Oyuncu hiçbir şey yapmadan puan alırdı. Bu yüzden hedef, oyuncuya UZAK_MESAFE’den yakınsa yeniden çekiliyor.

`while` ve güvenlik sınırı

while’ın doğal yeriKaç denemede uygun yer bulunacağı baştan belli değil. “Yeterince uzak bir yer bulana kadar dene.”

deneme < 50 neden var?UZAK_MESAFE tuvale göre çok büyük seçilirse uygun yer hiç bulunamaz. Sınır olmasa döngü hiç bitmez; draw o frame’i tamamlayamaz ve oyun donar.

Oyunlarda yaygın bir kalıpRastgele yerleştirme yapan her sistem (düşman doğurma, ödül koyma, harita üretme) bir deneme sınırı taşır. Yer bulunamazsa en son denenen konumla yetinilir.

Yeni tur: `oyunuSifirla`

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Oyuncu ortada başlar.
Top üstte, rastgele bir x konumunda ve rastgele bir hızla doğar: her tur biraz farklı.
Skor sıfırlanır, ilk hedef yerleştirilir.
Yalnızca menüden oyuna geçerken çağrılır.

Geçişler: `keyPressed`

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Menüde SPACE: önce sıfırla, sonra oyuna geç.
Bitişte R: menüye dön.
Geçişlerin ikisi de tek satırlık atama.
Başka durumlarda bu tuşlar hiçbir şey yapmaz.

Kodun tamamı geçiş tablosunun çevirisi

Mevcut durum	Olay	Yeni durum	Kodda nerede?
Menü	SPACE	Oyun	`keyPressed` · `oyunuSifirla()` ile birlikte
Oyun	Hedefe temas	Oyun (değişmez)	`guncelleOyun` · skor artar, `hedefYerlestir()`
Oyun	Topa temas	Bitiş	`guncelleOyun`
Bitiş	R	Menü	`keyPressed`

Geçişler iki yerde olurTuşla tetiklenenler keyPressed içinde; oyunun kendi kuralından doğanlar (çarpışma) guncelleOyun içinde.

Geçişleri sınayın

Oyunu açın ve tablodaki olmaması gereken şeyleri deneyin. Her biri için ne olduğunu yazın.

Menüdeyken ok tuşlarına basılı tutun, sonra SPACE’e basın. Oyuncu ortada mı başlıyor?
Menüdeyken R’ye basın.
Oyun sırasında SPACE’e basın. Skor sıfırlanıyor mu?
Bitiş ekranında SPACE’e basın. Bitişte ok tuşlarına basın.
Kodda UZAK_MESAFE’yi 600 yapın. Oyun donuyor mu? Neden donmuyor?

Oyunu geliştirin

Her 5 puanda topun hızı %15 artsın.
En yüksek skoru tutun ve bitiş ekranında gösterin. İpucu: oyunuSifirla onu sıfırlamamalı.
Oyuna DURUM_DURAKLAT ekleyin: P ile duraklat, P ile devam.
Bitiş ekranından R ile menüye, SPACE ile doğrudan yeni oyuna geçilebilsin.
Zorlu: ikinci bir top ekleyin. Topların konum ve hızlarını paralel dizilerde tutun; her 10 puanda yeni bir top gelsin.

Yapay zekâyla: bir oyundan durum makinesi çıkarmak

Önce siz: bildiğiniz bir oyun seçin (satranç, Tetris, hafıza kartları…). En az üç durum bulun. Her biri için: ekranda ne görünür, hangi girdi işe yarar?
Sorun: “Şu oyunu durum makinesi gözüyle anlat: 3–5 durum, her durumda görünenler ve anlamlı girdiler, en az 5 satırlık geçiş tablosu. Durum makinesi olmasa hangi hatalar kolay çıkardı? Kod yazma.”
Denetleyin: yanlış ya da gereksiz bir durum var mı? Yapay zekâ bazen olmayan kurallar ya da fazladan durumlar ekler.
Kendi mini oyununuz için yanıtlayın: hangi üç durum şart, her biri ne işe yarar, neden bu üçü yeterli?

Yapay zekâyla: Mermaid diyagramı çizdirmek

Kaç-Kaç Top ya da kendi oyununuz için geçiş tablosunu yazın: en az dört satır ve bir olmayan geçiş (örneğin menüde R).
Tabloyu verip stateDiagram-v2 metnine çevirtin. Başlangıç için [*] --> … kullansın.
Metni mermaid.live adresinde açın. Çizilmezse ya da ok eksikse düzelttirin.
Makyaj: kutuları renklendirtin; oyun --> bitis okunu belirginleştirtin. Her değişikliği yeniden deneyin.
İsteğe bağlı: “Bu diyagramdaki her ok p5.js’te nereye yazılır: draw içine mi, keyPressed içine mi?”

DikkatYapay zekâ bazen durum diyagramı yerine akış şeması (flowchart) üretir ya da olmayan bir duruma ok çizer. Önce doğru geçişler, sonra makyaj.

Sıradaki hedef: Hafıza kartları

Üstteki “Durum” yazısını izleyin: İlk kart → İkinci kart → Eşleşme kontrolü → yeniden İlk kart. Kontrol sırasında tıklamalar yok sayılıyor.

Hafıza kartları (1/2): plan ve kod

Mekaniği anlayın. Bu oyuna İngilizcede Memory, Concentration ya da Matching pairs denir. Çevrimiçi bir örneğini birkaç dakika oynayın.
Önce diyagram. Geçiş tablonuzu yazın, Mermaid ile çizin. İsterseniz başa bir Menü, sona bir Bitti ekleyin. Diyagram netleşmeden koda geçmeyin.
Kodu siz yazın. Küçük bir ızgara: 4 × 3, yani 6 çift. Önce 2 × 2 bile yeter.
- Durum sabitleri ve oyunDurumu.
- Kart değerleri ve açık / kapalı bilgisi için paralel diziler. Class yok.
- draw(): duruma göre çiz. Kapalı kart gri, açık kartta sayı ya da renk.
- mousePressed(): yalnızca uygun durumda tıklanan kartı aç.
- Eşleşmezse kısa bekleme (millis ya da bir sayaç), sonra kartları kapat.

Hafıza kartları (2/2): takılınca ve kontrol

Yapay zekâdan onarım ve açıklama isteyin“Şu sorun var: [ikinci kart açılmıyor]. Önce öğretmen gibi anlat: hata hangi durum geçişinde olabilir? Sonra yalnızca gerekli satırları düzelt; oyunu baştan yazma. En sonda neyi neden değiştirdiğini madde madde açıkla.”

Yazamadığınız tek bir parça için“Class kullanmadan yalnızca kartlariKaristir() fonksiyonunu yaz: 6 çift (0–5, her biri iki kez) üretip karıştırsın.”

Kontrol listesi

Eşleşme kontrolü sırasında yeni kart tıklanabiliyor mu? Tıklama yok sayılmalı.
Menüdeyken kart tıklanınca oyun bozuluyor mu?
İkinci kart açılmadan “eşleşti mi?” soruluyor mu?
Durum adları sabit mi, yoksa "ilk" ile "İlk kart" karışıyor mu?
Yapay zekâ neyi gereksiz uzattı?

Oyunun tamamını yapay zekâya baştan yazdırmayın. Kaç-Kaç Top’taki oyunDurumu + draw dallanması + oyunuSifirla kalıbını yeniden kullanın.

Yapay zekâyla: eksik geçiş

Menüden oyuna geçişi olan ama bitişten menüye dönüşü “unutulmuş” bir iskelet yazın ya da yazdırın.
Yapay zekâya hatayı buldurun. Teşhisi sizinkiyle aynı mı?
Düzeltmeyi kendi sketch’inizde uygulayın; üç ekranı da gezerek doğrulayın.

`oyunuSifirla()` çağrısını `keyPressed`’den silersek ilk oyunda ne olur?

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 guncelleOyun() {
  let dt = deltaTime / 1000;

oyuncuX = constrain(oyuncuX, 0, width - BOYUT);
  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);

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

Hiçbir şey değişmez.
Oyuncu, top ve hedef çizilemez: konumlarına hiç değer verilmedi.
Oyun menüde kalır.

Bu değişkenler en üstte yalnızca tanımlandı; değerlerini oyunuSifirla veriyor. Çağrılmazsa hepsi undefined kalır.

Hedef testini ve top testini yer değiştirsek, aynı frame’de ikisine birden değen oyuncuya ne olur?

Oyun biter, puan alamaz.
İki sırada da hem puan alır hem oyun biter.
Puan alır, oyun bitmez.

İki test bağımsız iki if; arada return ya da else yok. Sıra değişse de ikisi de çalışır. “Ölürken puan almasın” isteseydik top testini öne alıp return eklerdik.

Oyuncu karesinin sol üst köşesi (100, 100), BOYUT 36. Merkezi nerede?

(100, 100)
(136, 136)
(118, 118)
(82, 82)

rect köşeden çizer; dist ise merkez ister. Bu yüzden kodda px = oyuncuX + BOYUT / 2.

Merak edenler için kaynaklar

WikipediaConcentration (card game)Hafıza kartları oyununun kuralları ve çeşitlemeleri.en.wikipedia.org/wiki/Concentration_(card_game) MermaidMermaid Live EditorDurum diyagramınızı metinle çizin.mermaid.live

Robert NystromGame Programming Patterns: StateDurumlar çoğaldığında kodu nasıl düzenli tutarız?gameprogrammingpatterns.com/state.html Patt ViraCollisions Without a Physics Library!Zorlu görevdeki çoklu toplar için.pattvira.com/coding-tutorials/v/collisions-without-a-physics-library

Bugün ne öğrendik?

Menü, oyun, bitiş: üç durum ve dört geçişle tam bir oyun akışı.
draw yönlendiricidir; her durumun işi kendi fonksiyonunda.
Tuşla gelen geçişler keyPressed içinde, oyun kuralından doğanlar guncelleOyun içinde.
Durum değişikliği bir sonraki frame’de ekrana yansır.
oyunuSifirla her turu temiz bir başlangıçla kurar.
while ile deneme yaparken bir güvenlik sınırı koymak oyunu donmaktan korur.

Sıradaki ders

XOX

İki oyunculu, sıra tabanlı bir oyun; tahtası iki boyutlu bir dizi.

Sonraki sunum →← Önceki

Kaç-Kaç Top: ilk tam oyunumuz

Önce oynayalım

Az önce oynadığınız oyunda kaç farklı ekran gördünüz?

Kurallar ve üç durum

Bu oyunda yeni hiçbir şey yok

Sabitler ve oyunun verisi

setup ve yönlendirici draw

Menü ekranı

guncelleOyun (1/2): oyuncu ve top

guncelleOyun (2/2): iki temas testi

Top oyuncuya değdi ve oyunDurumu = DURUM_BITIS atandı. Aynı frame’de ekrana ne çizilir?

Oyun sahnesi, son bir kez

Oyun ekranını çizmek

Bitiş ekranını çizmek

Yeni hedef tam oyuncunun üstünde doğarsa ne olur?

hedefYerlestir: uzak bir yer bulana kadar dene

while ve güvenlik sınırı

Yeni tur: oyunuSifirla

Geçişler: keyPressed

Kodun tamamı geçiş tablosunun çevirisi

Geçişleri sınayın

Oyunu geliştirin

Yapay zekâyla: bir oyundan durum makinesi çıkarmak

Yapay zekâyla: Mermaid diyagramı çizdirmek

Sıradaki hedef: Hafıza kartları

Hafıza kartları (1/2): plan ve kod

Hafıza kartları (2/2): takılınca ve kontrol

Yapay zekâyla: eksik geçiş

oyunuSifirla() çağrısını keyPressed’den silersek ilk oyunda ne olur?

Hedef testini ve top testini yer değiştirsek, aynı frame’de ikisine birden değen oyuncuya ne olur?

Oyuncu karesinin sol üst köşesi (100, 100), BOYUT 36. Merkezi nerede?

Merak edenler için kaynaklar

Bugün ne öğrendik?

XOX

`setup` ve yönlendirici `draw`

`guncelleOyun` (1/2): oyuncu ve top

`guncelleOyun` (2/2): iki temas testi

Top oyuncuya değdi ve `oyunDurumu = DURUM_BITIS` atandı. Aynı frame’de ekrana ne çizilir?

`hedefYerlestir`: uzak bir yer bulana kadar dene

`while` ve güvenlik sınırı

Yeni tur: `oyunuSifirla`

Geçişler: `keyPressed`

`oyunuSifirla()` çağrısını `keyPressed`’den silersek ilk oyunda ne olur?