Bölüm 1 · Sunum 6

Fare ve ilk oyunumuz: Daire Tıklama

Değişkenleri, koşulları ve fareyi birleştirip oynanabilir bir oyun yazacağız.

mouseX, mouseYtext ve hizalamadist ile isabetmousePressedAdım adım oyun

Oyun, oyuncunun ne yaptığını nereden bilir?

Şimdiye kadar sketch’lerimiz kendi kendine çalıştı. Bir oyunda ise kararlar oyuncuya bağlı: fare nerede, tıkladı mı?

p5.js fareyi bizim yerimize izler

Ad	Tür	Ne verir?	Örnek
`mouseX`	number	İmlecin x konumu (0 … width − 1)	500 genişlikte tuvalin ortasında ≈ 250
`mouseY`	number	İmlecin y konumu (0 … height − 1)	Üst kenarda 0
`mouseIsPressed`	boolean	Fare tuşu şu an basılı mı?	Basılıyken `true`
`mousePressed()`	fonksiyon	Tuşa basıldığı an çalışır	Her basışta bir kez
`mouseReleased()`	fonksiyon	Tuş bırakıldığı an çalışır	Her bırakışta bir kez

Olay fonksiyonumousePressed() ve mouseReleased(), tıpkı setup() ve draw() gibi özeldir: olay gerçekleşince p5.js bu addaki fonksiyonu kendisi çağırır.

Daire fareyi takip etsin

Fareyi tuvalde gezdirin, sonra tuşu basılı tutun. mouseX ve mouseY her frame güncellenir.

Ekrana yazı yazmak

Komut	Ne yapar?
`text(metin, x, y)`	(x, y) noktasını referans alarak metni yazar.
`textSize(boyut)`	Yazı boyutunu piksel olarak ayarlar.
`textAlign(hizaX, hizaY)`	(x, y) noktasının, metnin hangi köşesine ya da kenarına denk geleceğini seçer.

YatayLEFT sol kenar, CENTER orta, RIGHT sağ kenar.

DikeyTOP üst, CENTER orta, BOTTOM alt.

textAlign koordinatı değiştirmez; o noktanın metne nereden bağlanacağını değiştirir.

Aynı araçlar, iki farklı hizalama

Köşe yazıları için textAlign(LEFT, TOP); ekran ortası mesajı için textAlign(CENTER, CENTER) ve width / 2, height / 2.

Fare dairenin içinde mi? Bunu program nasıl anlar?

Elimizde dört sayı var: farenin x ve y’si, dairenin merkezi ve yarıçapı. Hangi soruyu sormalıyız?

Mesafe yarıçaptan küçükse içeridedir

Nokta dairenin içinde mi? Mesafe yarıçaptan küçük mü testi

dist(x1, y1, x2, y2)p5.js’in yerleşik fonksiyonu. İki nokta arasındaki düz mesafeyi (Öklid mesafesi) sayı olarak verir.

Matematikteki karşılığı: sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1)). sqrt de yerleşiktir; isterseniz kendiniz yazabilirsiniz.
İleride iki dairenin birbirine değip değmediğini de böyle anlayacağız: mesafe ile yarıçapların toplamını karşılaştırarak.

Fare daireye girince renk değişsin

Tıklayınca skor 1 artsın. Bunu `draw` içine yazarsak?

Bir kez tıkladınız. Skor kaç olur?

Tek tıklama, onlarca puan

Tuvale birkaç kez tıklayın. Sonra tuşu basılı tutun: hangi sayaç fırlıyor?

Basılı tutmak ile basma anı aynı şey değil

Yöntem	Ne zaman?	Skor için
`mouseIsPressed`	Tuş basılı tutulduğu her frame (saniyede ~60)	Tek tıklama birçok kez sayılır
`mousePressed()`	Tuşa basıldığı tek an	Skor bir kez artar

KuralBir kez sayılması gereken olaylar mousePressed() içine yazılır.

`mousePressed()` ile tek tıklamayı yakalamak

tiklandi bir bayrak: tıklama olunca true oluyor, draw ona bakıp yazıyı gösteriyor.

Daire Tıklama: kurallar

Ekranda rastgele bir konumda hedef daire görünür.
Oyuncu daireye tıklarsa skor 1 artar; daire yeni bir rastgele konuma taşınır.
Daireye isabet etmezse skor değişmez.
Skor 10’a ulaşınca oyun kazanılır.
Yeni tur için sketch yeniden çalıştırılır; ayrı bir menü yok.

Neye ihtiyacımız var?Yalnızca değişkenler ve if / else. Döngü ya da dizi gerekmiyor.

Tıklama anında kararlar

mousePressed() tetiklenir.
Oyun bittiyse hiçbir şey yapma; çık.
Fare ile hedef arasındaki mesafeyi hesapla.
Mesafe yarıçaptan küçük değilse: ıskaladı, skor değişmez.
Küçükse: skoru 1 artır.
Skor hedefe ulaştıysa oyunu bitir; ulaşmadıysa hedefi yeni bir konuma taşı.

Kutuları hazırla

Hepsi en üstte, setup ve draw’ın dışında: oyun boyunca yaşayacaklar.
hedefX ve hedefY henüz boş; değerlerini setup verecek.
HEDEF_SKOR değişmeyecek: const.
oyunBitti bir bayrak: başta false.

`setup()`: tuval ve ilk hedef

random(min, max)min ile max arasında rastgele, ondalıklı bir sayı verir; max dahil değildir. random(10, 50) yaklaşık 10 ile 50 arasında bir değer üretir.
Tek parametreli random(max) 0 ile max arasında, parametresiz random() 0 ile 1 arasında değer verir.

Neden `random(0, width)` yazmadık?

Daha basit görünüyor. Hedefin merkezi tam 0’a ya da tam width’e denk gelirse ne olur?

Daire tuvalden taşar

ellipse merkezden çizer. Merkez kenara çok yaklaşırsa dairenin bir kısmı dışarıda kalır; oyuncu yarım bir hedefe tıklamaya çalışır.

Çözüm: bir yarıçap içeride kalx için alt sınır hedefYaricap, üst sınır width - hedefYaricap. y için aynısı height ile.

`draw()`: çizim ve oyun durumu

!oyunBitti: “oyun bitmediyse”. Hedef daire yalnızca o zaman çizilir.
Oyun bittiyse dairenin yerine kazanma yazısı gelir.
Skor göstergesi if’in dışında: her durumda çizilir.
İki yazı için iki ayrı textAlign: ortada ve sol üstte.

`mousePressed()`: tıklama kontrolü

returnBulunulan fonksiyonun geri kalanını çalıştırmadan çıkmasını sağlar.

Oyun bittiyse tıklamalar yok sayılır.
İsabet varsa skor 1 artar.
Hedef skora ulaşıldıysa oyun biter; ulaşılmadıysa hedef yeni konuma taşınır.

Tam kod

let hedefX;
let hedefY;
let hedefYaricap = 40;
let skor = 0;
const HEDEF_SKOR = 10;
let oyunBitti = false;

function setup() {
  createCanvas(500, 400);
  hedefX = random(hedefYaricap, width - hedefYaricap);
  hedefY = random(hedefYaricap, height - hedefYaricap);
}

function draw() {
  background(25, 30, 50);

if (!oyunBitti) {
    fill(255, 180, 0);
    noStroke();
    ellipse(hedefX, hedefY, hedefYaricap * 2, hedefYaricap * 2);
  } else {
    fill(100, 255, 100);
    textSize(32);
    textAlign(CENTER, CENTER);
    text("Tebrikler! 10 puana ulaştınız.", width / 2, height / 2);
  }

fill(255);
  textSize(20);
  textAlign(LEFT, TOP);
  text("Skor: " + skor + " / " + HEDEF_SKOR, 15, 15);
}

function mousePressed() {
  if (oyunBitti) {
    return;
  }

let mesafe = dist(mouseX, mouseY, hedefX, hedefY);

if (mesafe < hedefYaricap) {
    skor = skor + 1;
    if (skor >= HEDEF_SKOR) {
      oyunBitti = true;
    } else {
      hedefX = random(hedefYaricap, width - hedefYaricap);
      hedefY = random(hedefYaricap, height - hedefYaricap);
    }
  }
}

Turuncu daireye tıklayın: 10 isabet

let hedefX;
let hedefY;
let hedefYaricap = 40;
let skor = 0;
const HEDEF_SKOR = 10;
let oyunBitti = false;

function setup() {
  createCanvas(500, 400);
  hedefX = random(hedefYaricap, width - hedefYaricap);
  hedefY = random(hedefYaricap, height - hedefYaricap);
}

function draw() {
  background(25, 30, 50);

fill(255);
  textSize(20);
  textAlign(LEFT, TOP);
  text("Skor: " + skor + " / " + HEDEF_SKOR, 15, 15);
}

function mousePressed() {
  if (oyunBitti) {
    return;
  }

let mesafe = dist(mouseX, mouseY, hedefX, hedefY);

Bu oyunda olmayanlar

KlavyekeyIsDown ve keyPressed() kullanmadık. Klavye girdisini ilerleyen bölümlerde ele alacağız.

Birden fazla hedefAynı anda birçok daire için dizilere ihtiyaç var. O da sonraki bölümlerin konusu.

Bu oyun, bir oyunun en temel döngüsünü gösteriyor: girdi → karar → geri bildirim.

Kendi cümlelerinizle açıklayın

Skorun bir basışta birden fazla artmaması için mousePressed ile draw içindeki mouseIsPressed arasındaki farkı anlatın. Yanlış tasarımda ne olurdu?
Hedef konumunda neden random(hedefYaricap, width) ya da random(0, width) yazmadık? Bu ikisinden birini kullansaydık görünüm ve tıklanabilirlik nasıl değişirdi? Editörde deneyip gözleyin.

Oyunu zorlaştırın

Dairenin dışına tıklanınca skor 3 puan azalsın.
Skor sıfırın altına düşerse oyun bitsin ve ekranda “Üzgünüm, oyunu kaybettiniz” yazsın.
Kazanma ve kaybetme mesajlarını skora bakarak ayırt edin.

İpucumousePressed içindeki mesafe < hedefYaricap dalına bir else ekleyin. draw içinde iki mesajı skor ile ayırın.

Zorlu görevler

Küçülen hedefHer isabette yarıçap 3 piksel küçülsün ama 15’in altına inmesin.

İsabet oranıHer tıklamayı sayın. Sol üstte “7 / 12” gibi isabet / deneme gösterin. Oyun bitince tıklamalar sayılmasın.

SüreOyuncunun 15 saniyesi olsun. Kalan süreyi ekrana yazın; süre bitince oyun bitsin. İpucu: frameCount / 60.

Yapay zekâyla: nokta elipsin içinde mi?

Yapay zekâdan, (mouseX, mouseY) noktasının bir dairenin içinde olup olmadığını denetleyen kısa bir kod ve formülün terim terim açıklamasını isteyin.
İlk yanıt çoğu zaman yüzeysel kalır. Soruyu ilerletin: “Aynısını dist kullanmadan sqrt ile yaz; Pisagor bağıntısıyla ilişkisini göster.”
Kendi fonksiyonunu tanımlarsa geri çevirin: henüz fonksiyon yazmayı görmedik.
Aldığınız kodu dist(mouseX, mouseY, hedefX, hedefY) < hedefYaricap ifadesiyle karşılaştırın.

Yapay zekâyla: dokunmatik ekran

Sorun: “p5.js sketch’imi dokunmatik ekranda kullanacağım. mousePressed / mouseX yerine dokunmayı nasıl algılarım?”
Yanıttaki adları (örneğin touches, touchStarted) p5.js referansından doğrulayın.
Sketch’inizi telefonda ya da tablette nasıl açacağınızı sorun ve önerilen yollardan birini deneyin.

`dist(0, 0, 3, 4)` kaç döndürür?

Pisagor: 3² + 4² = 25, karekökü 5. dist yatay ve dikey farkları toplamaz.

Oyuncu tam dairenin kenarına tıkladı: mesafe = 40, yarıçap = 40.

İsabet sayılır
Iska sayılır

40 < 40 yanlıştır. Kenarı da isabet saymak isteseydik <= yazardık. Hangisini istediğinize siz karar verirsiniz.

`mousePressed`’in başındaki `return`’lü `if`’i silersek?

Hiçbir şey değişmez.
Oyun hiç bitmez.
Oyun bittikten sonra da, eski hedefin olduğu yere tıklanınca skor artmaya devam eder.
Program hata verir.

Daire artık çizilmiyor ama hedefX ve hedefY hâlâ duruyor. İsabet testi çalışır; skor 11, 12… olur.

Bölüm 1’i bitirdik

mouseX, mouseY imlecin konumunu verir; her frame güncellenir.
mouseIsPressed basılı tutulduğu her frame doğrudur; mousePressed() basma anında bir kez çalışır.
text, textSize, textAlign ile ekrana yazı yazılır.
dist < yarıçap: nokta dairenin içinde.
random(min, max) ile hedef, kenardan bir yarıçap içeride seçilir.
return fonksiyondan erken çıkar; oyunBitti bayrağı oyunu durdurur.

Sıradaki bölüm

Bölüm 2: Döngüler ve fonksiyonlar

Aynı satırı yüz kez yazmadan yüz şekil çizmek.

Bölüm 2’ye geç →Tüm sunumlar