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.

Yalnızca fareyle oynanan oyunlar

Fruit Ninja 2010Parmağın ekranda bıraktığı iz meyveye değiyor mu? Oyun her frame parmağın konumunu okur.

osu! 2007Müzikle beliren dairelere doğru anda tıklanır. Bugün yazacağımız oyunun ritimli akrabası.

Nişan antrenmanıE-spor oyuncuları maçtan önce ısınır: beliren hedefe en hızlı tıklayan kazanır.

Üçünün de sorduğu iki soruİmleç şu an nerede? Tıklama, hedefin içine mi düştü? Bu derste ikisini de yanıtlayacağız.

Daire fareyi takip etsin

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

`mouseX` ve `mouseY` ile: gözler sineği izler

Fareyi tuvalde gezdirin. Dört yaratık da aynı iki sayıyı okuyor: mouseX ve mouseY. Göz bebeğinin hesabını şimdi anlamanız gerekmiyor.

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

const CX = 230, CY = 170, R = 110;
function setup() { createCanvas(760, 340); textFont("monospace"); }
function draw() {
  background(250, 246, 235);
  let ic = mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height;
  let u = 60 + 90 * (1 + sin(frameCount * 0.017));
  let mx = ic ? mouseX : CX + u * cos(frameCount * 0.02), my = ic ? mouseY : CY + u * 0.7 * sin(frameCount * 0.02);
  let m = dist(mx, my, CX, CY), iceride = m < R;
  let renk = iceride ? color(30, 160, 80) : color(215, 60, 50);
  stroke(30); strokeWeight(3); fill(iceride ? color(200, 238, 210) : color(255)); ellipse(CX, CY, R * 2, R * 2);
  stroke(36, 86, 245); strokeWeight(4); line(CX, CY, CX, CY + R);
  stroke(renk); strokeWeight(4); line(CX, CY, mx, my);
  noStroke(); fill(30); ellipse(CX, CY, 12, 12); fill(renk); ellipse(mx, my, 18, 18);
  textAlign(LEFT, CENTER); textSize(22);
  fill(renk); text("mesafe  = " + round(m), 470, 70);
  fill(36, 86, 245); text("yarıçap = " + R, 470, 110);
  fill(30); text("mesafe < yarıçap", 470, 180);
  fill(renk); textSize(34); text(iceride, 470, 228);
  textSize(18); text(iceride ? "fare dairenin içinde" : "fare dairenin dışında", 470, 276);
}

Fareyi dairenin içine ve dışına götürün. Renkli çizgi merkezle fare arasındaki mesafe, mavi çizgi yarıçaptır; soru yalnızca hangisinin daha uzun olduğudur.

`dist()`: iki nokta arasındaki mesafe

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

Aynı test, başka oyun: el feneri

Bir nesne yalnızca dist(fare, nesne) < 110 ise çiziliyor. Korku oyunlarındaki el feneri, strateji oyunlarındaki “savaş sisi” aynı sorunun cevabına bakar.

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?

Dünyanın en cömert oyunu

🤑Bir tık, kırk puanFare düğmesi bir saniyenin üçte ikisi kadar basılı kaldı.

Neden?draw saniyede 60 kez çalışır. Parmağınız düğmedeyken her frame “basılı mı?” sorusunun cevabı evettir.

Gerçek oyunlarda da görülür: bir düğmeye bir kez bastığınızda menüde üç satır birden atlanıyorsa sebep büyük ihtimalle budur.

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.

İkisi bir arada: boya programı

Çizmek süren bir iş: basılı olduğu her frame çizgi uzar. Renk seçmek tek seferlik bir olay: tıklama anında bir kez olur. Bu sketch’te background yalnızca setup’ta ve “Temizle”de çağrılıyor; çizgiler o yüzden kalıyor.

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.

Bir adım ötesi: süre, küçülen hedef, ıska

let hx, hy, hr = 40, skor = 0, iska = 0, basla = 0, bitis = 0, dogma = 0, durum = "bekle";
const SURE = 20;
function yeni() { hx = random(60, 700); hy = random(100, 290); dogma = millis(); }
function setup() { createCanvas(760, 340); textFont("monospace"); yeni(); noCursor(); }
function draw() {
  background(18, 22, 40);
  textAlign(CENTER, CENTER); noStroke(); fill(255);
  if (durum === "bekle") { textSize(28); text("20 saniyede kaç hedef?", width / 2, 140); textSize(17); fill(255, 201, 41); text("Başlamak için tıklayın", width / 2, 190); }
  else if (durum === "bitti") {
    textSize(28); text("Süre doldu! Skor: " + skor, width / 2, 130);
    textSize(17); fill(160, 190, 230); text("İsabet oranı: %" + (skor + iska > 0 ? round(100 * skor / (skor + iska)) : 0), width / 2, 176);
    fill(255, 201, 41); text("Yeniden oynamak için tıklayın", width / 2, 216);
  } else {
    let kalan = SURE - (millis() - basla) / 1000;
    if (kalan <= 0) { durum = "bitti"; bitis = millis(); }
    if (millis() - dogma > 2200) yeni();
    hr = max(14, 40 - (millis() - dogma) / 1000 * 14);
    fill(242, 84, 45); ellipse(hx, hy, hr * 2, hr * 2); fill(255); ellipse(hx, hy, hr * 1.3, hr * 1.3); fill(242, 84, 45); ellipse(hx, hy, hr * 0.6, hr * 0.6);
    fill(60, 66, 90); rect(20, 20, 720, 14, 7); fill(255, 201, 41); rect(20, 20, 720 * max(0, kalan) / SURE, 14, 7);
    fill(255); textSize(17); textAlign(LEFT, CENTER); text("Skor: " + skor + "   Iska: " + iska, 20, 56);
  }
  stroke(255); strokeWeight(2); line(mouseX - 14, mouseY, mouseX + 14, mouseY); line(mouseX, mouseY - 14, mouseX, mouseY + 14);
}
function mousePressed() {
  if (durum === "bekle" || (durum === "bitti" && millis() - bitis > 900)) { skor = 0; iska = 0; basla = millis(); durum = "oyna"; yeni(); return; }
  if (durum !== "oyna") return;
  if (dist(mouseX, mouseY, hx, hy) < hr) { skor++; yeni(); } else iska++;
}

Çekirdek aynı: dist ile isabet testi ve mousePressed. Üstüne üç küçük fikir eklendi. Bunları “Oyunu zorlaştırın” etkinliğinde kendiniz yazmayı deneyeceksiniz.

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.

Merak edenler için kaynaklar

Jeffrey ThompsonCollision Detection: Point / Circle“Nokta dairenin içinde mi?” testinin çizimli, etkileşimli anlatımı.jeffreythompson.org › collision-detection › point-circle The Coding TrainVariables: mouseX, mouseYFare konumunu okumak ve çizime bağlamak.thecodingtrain.com › 2-variables › 1-mouse

The Coding Trainrandom()Hedefi rastgele bir yere koymak için.thecodingtrain.com › 2-variables › 4-random Happy CodingInputFare ve klavye olayları üzerine yazılı anlatım (İngilizce).happycoding.io › tutorials › p5js › input

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