Ana Başlık 4. Fare Girdisi ve Daire Tıklama Oyunu

Amaç: Fare konumu, tıklama ve dist ile etkileşim kurarak Daire Tıklama mini oyununu adım adım kodlamak.

Öğrenme Çıktıları:

• mouseX, mouseY ve mouseIsPressed ile fare durumunu okur.
• dist ile iki nokta mesafesini hesaplar.
• mousePressed olayında tek tıklama mantığı kurar.
• Daire Tıklama oyununu modüler adımlarla tamamlar.

Anahtar Sözcükler: mouseX, mouseY, mousePressed, dist, etkileşim, mini oyun

Giriş

Önceki ana başlıkta değişkenler ve if/else ile programın karar verme iskeleti kuruldu. Gerçek bir mini oyunda bu kararlar çoğunlukla oyuncu girdisine bağlanır: fare hedefe yakın mı, tıklama hedefi vurdu mu, skor artmalı mı?

p5.js fare konumunu mouseX / mouseY ile, basılı olup olmadığını mouseIsPressed veya mousePressed() olayı ile verir. İki nokta arası uzaklık dist ile ölçülür; böylece “daireye tıklandı mı?” sorusu geometrik bir koşula dönüşür. Tek tıklamada skorun birden fazla artmaması için olay fonksiyonu ile sürekli basılı tutma ayrımı kritiktir.

Bu ana başlık fare, metin ve mesafe araçlarını birleştirir; ardından Daire Tıklama oyununu adım adım tamamlar. Çoklu hedefler ve diziler sonraki bölümlerde gelecektir. Bundan sonra gelen alt başlıklarda önce veri modeli, sonra hamle kuralı, en sonda çizim ve etkileşim kurulur. Her yeni fonksiyon mümkün olduğunca küçük bir örnekte çalıştırılır; böylece hatanın kaynağı daha kolay bulunur. Anlatımda önce ilgili yapının ne işe yaradığı açıklanır, ardından kod satır satır okunur. Terimler ilk geçtikleri yerde kısa bir tanımla verilir; gerekirse tablo veya görsel ile desteklenir.

4.1. Fare Girdisi, Metin, Mesafe ve Etkileşim

Bu bölümde sırayla: fare konumu, ekrana yazı, iki nokta arası mesafe ve bunların if/else ile birleştirilmesi ele alınır. Her alt adımda yalnızca o ana kadar tanıtılmış kavramlar kullanılır.

Fare konumu ve tuş durumu

p5.js, fare girdisini yerleşik değişkenler ve fonksiyonlarla sunar. width ve height tuval boyutları tuval ve koordinat sistemi alt başlığında tanıtılmıştır; fare konumu bu aralıkta piksel cinsinden okunur.

Tablo 1.

mousePressed() ve mouseReleased(), setup() ve draw() gibi p5.js olay fonksiyonlarıdır: p5.js, fare olayı gerçekleştiğinde bu isimdeki fonksiyonu otomatik çağırır. Genel fonksiyon tanımı 4. ana başlıkta ayrıntılı işlenecektir.

Ekrana metin yazma

Skor veya mesaj göstermek için p5.js metin komutları kullanılır. text() Ana Başlık 1'deki çizim tablosunda ve 3.1’deki string örneğinde geçmiştir; burada textSize ve textAlign ile birlikte özetlenir:

Tablo 2.

textAlign, (x, y) koordinatlarını silmez; o noktanın metne göre bağlantı yerini değiştirir. Yatayda LEFT sol kenarı, CENTER ortayı, RIGHT sağ kenarı (x, y) üzerine oturtur. Dikeyde TOP üstü, CENTER ortayı, BOTTOM altı bağlar. Varsayılan genelde sola ve alta yakındır; skor gibi köşe yazıları için textAlign(LEFT, TOP) ile (15, 15) sol-üst köşeye oturur. Ekran ortası mesajında textAlign(CENTER, CENTER) ve text(..., width / 2, height / 2) kullanılır — aynı (x, y) verilse bile hizalama değişince yazı kaymış gibi görünür.

Kod bloğu: Metin çizimi örneği.

function draw() {  background(240);  fill(0);  textSize(24);  textAlign(LEFT, TOP); // (15, 15) = metnin sol-üst köşesi  text("Skor: 0", 15, 15);}

İki nokta arası mesafe (dist)

Daire içinde tıklama algılamak için merkez ile fare konumu arası mesafe hesaplanır; mesafe yarıçaptan küçükse nokta daire içindedir.

Görsel 1 noktanın daire içinde olup olmadığını özetler: merkezden nokta uzaklığı (dist) yarıçaptan küçükse içeride, aksi halde dışarıdadır.

Fare yakınlığına göre renk (birleşik örnek)

Aşağıdaki örnek, 3.3’teki if/else yapısına mouseX, mouseY ve dist() eklenmiş halidir; bu üç kavram artık tanıtılmıştır.

Kod bloğu: Fare daireye yaklaştıkça renk değişen çizim.

function draw() {  background(240);   let merkezX = 200;  let merkezY = 200;  let yaricap = 50;   let mesafe = dist(mouseX, mouseY, merkezX, merkezY);   if (mesafe < yaricap) {    fill(50, 200, 80);   // Yeşil — fare dairenin içinde (tam kenar hariç)  } else {    fill(200, 50, 50);   // Kırmızı — fare uzakta  }   noStroke();  ellipse(merkezX, merkezY, yaricap * 2, yaricap * 2);}

mousePressed() ile tek tıklama

mouseIsPressed draw() içinde sürekli kontrol edildiğinde tuş basılı tutulduğu sürece true döner. Skor gibi tek seferlik sayılması gereken olaylarda mousePressed() genellikle daha uygundur.

Tablo 3.

Kod bloğu: mousePressed() ile tek tıklama yakalama.

let tiklandi = false; function mousePressed() {  tiklandi = true;} function draw() {  background(220);  if (tiklandi) {    fill(0, 180, 0);    textSize(20);    textAlign(LEFT, TOP);    text("Tiklandi!", 150, 200);  }}

Daire Tıklama oyununda klavye girdisi (keyIsDown, keyPressed()) kullanılmaz; klavye girdisi ilerleyen bölümlerde sistematik ele alınacaktır.

4.2. Adım Adım: Daire Tıklama Oyunu

Daire Tıklama (Circle Clicker), ekranda beliren hedef daireye tıklayarak skor toplamayı amaçlayan basit bir refleks oyunudur. Bu oyun yalnızca değişken ve if/else bilgisiyle kodlanabilir; döngü veya dizi gerektirmez.

Oyun kuralları:

• Ekranda rastgele konumda bir hedef daire görünür.
• Oyuncu daireye tıkladığında skor 1 artar; daire yeni rastgele konuma taşınır.
• Belirli skora (örneğin 10) ulaşıldığında oyun kazanılır.
• Daireye tıklanmazsa skor değişmez.
• Oyun bitince yeni tur için sayfa yenilenir veya sketch yeniden çalıştırılır (bu örnekte ayrı menü yoktur).

Bu mini oyun öğretim amaçlıdır; benzer «hedefe tıkla / isabet al» mekaniğini denemek için kaynaklardaki çevrim içi örneklerden yararlanılabilir.

Aşağıdaki sıra, mousePressed() içindeki karar adımlarını özetler:

1. mousePressed() tetiklenir.
2. oyunBitti true ise → işlem yapılmaz (return).
3. Fare ile hedef arası mesafe hesaplanır (dist).
4. Mesafe yarıçaptan küçük değilse → skor değişmez.
5. Mesafe yarıçaptan küçükse → skor 1 artar.
6. Skor hedefe ulaştıysa → oyunBitti = true; aksi halde hedefe yeni rastgele konum atanır.

Adım 1: Değişkenleri tanımla

let hedefX;       // Hedef dairenin X konumulet hedefY;       // Hedef dairenin Y konumulet hedefYaricap = 40;let skor = 0;const HEDEF_SKOR = 10;let oyunBitti = false;

Adım 2: setup() — tuval ve ilk hedef konumu

Bu adımda p5.js’in iki parametreli random kullanımı ilk kez sistematik tanıtılır (önceki ana başlıklarda konum atamak için kullanılmamıştı).

function setup() {  createCanvas(500, 400);  // İlk hedef konumu — random(min, max) bu adımda tanıtıldı  hedefX = random(hedefYaricap, width - hedefYaricap);  hedefY = random(hedefYaricap, height - hedefYaricap);}

Hedef ellipse(hedefX, hedefY, hedefYaricap * 2, …) ile merkezden çizilir. Merkez sol kenara (0) veya sağ kenara (width) çok yaklaşırsa şeklin bir kısmı tuval dışına taşar; oyuncu eksik görünen bir hedefe tıklamaya çalışır. Bu yüzden X için alt sınır hedefYaricap, üst sınır width - hedefYaricap seçilir (Y için height ile aynı mantık): merkez her zaman kenardan en az bir yarıçap içeride kalır ve elips bütünüyle görünür.

Adım 3: draw() — çizim ve oyun durumu

function draw() {  background(25, 30, 50); // Koyu arka plan   if (!oyunBitti) {    // Hedef daire    fill(255, 180, 0);    noStroke();    ellipse(hedefX, hedefY, hedefYaricap * 2, hedefYaricap * 2);  } else {    // Kazanma ekranı    fill(255);    textSize(32);    textAlign(CENTER, CENTER);    text("Kazandınız!", width / 2, height / 2);  }   // Skor göstergesi (her durumda)  fill(255);  textSize(20);  textAlign(LEFT, TOP);  text("Skor: " + skor, 15, 15);}

!oyunBitti ifadesi "oyun bitmediyse" anlamına gelir. ! operatörü boolean değeri tersine çevirir. textSize() ve textAlign() bu alt bölümde (2.4) özetlenmiştir; text() daha önce tanıtılmıştır.

Adım 4: mousePressed() — tıklama kontrolü

function mousePressed() {  if (oyunBitti) {    return; // Oyun bittiyse aşağıdaki satırlar çalışmaz  }   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);    }  }}

Hedef vurulduğunda skor bir artar; hedef skora ulaşılmadıysa random() ile yeni konum atanır. return sayesinde oyun bittikten sonra yapılan tıklamalar işlenmez.

Adım 5: Tam kod (birleştirilmiş)

Kod bloğu: Daire Tıklama oyununun tam kodu.

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

Bu kod p5.js Web Editor'e yapıştırılıp doğrudan çalıştırılabilir. Oyun, if/else ve değişken kavramlarının bir arada kullanıldığı ilk tam örnektir; çoklu hedefler sonraki ana başlıklarda ele alınır.

Özet

Fare etkileşimi, önceki ana başlıkta kurulan koşullu mantığı doğrudan oyuncu eylemine bağlar. p5.js’te mouseX ve mouseY imlecin tuval üzerindeki konumunu her frame günceller; mouseIsPressed tuş basılı tutulduğu sürece her frame doğru değerini alırken mousePressed() yalnızca basma anında bir kez çalışan bir olay fonksiyonudur. Bu ayrım, skor artışı gibi tek seferlik sayılması gereken işlemlerin draw içinde tekrarlanarak hatalı biçimde çoğalmasını önler. Aynı bölümde metin araçları da toparlanır: text mesajı yazar, textSize yazı boyutunu belirler, textAlign ise verilen noktanın metnin hangi kenarına oturacağını seçer.

dist(x1, y1, x2, y2) iki nokta arasındaki Öklid mesafesini döndürür; bu değer hedef dairenin yarıçapıyla karşılaştırıldığında “tıklama daireye isabet etti mi?” sorusu geometrik bir koşula dönüşür. Daire Tıklama oyunu bu araçları tek bir sketch’te birleştirir: hedefin konumu random(min, max) ile kenardan en az bir yarıçap içeride seçilir, mousePressed() içinde isabet sınanır, skor bir artar ve hedef yeni bir rastgele konuma taşınır. Hedef skora ulaşıldığında oyunBitti bayrağı devreye girer ve return sonraki tıklamaları etkisiz kılar. Kaçırmada puan kaybı ve skorun sıfırın altına düşmesiyle kaybetme gibi kurallar Sıra Sizde etkinliklerinde genişletilir.

Böylece mini oyun, dizilere ve çoklu nesne yapılarına geçmeden önce girdi–karar–geri bildirim döngüsünü pekiştirir.

Neler Öğrendik?

Soru 1 Daireye tıklanıp tıklanmadığını anlamak için en uygun araç hangisidir?

Soru 2 Skorun bir tıklamada birden fazla artmasını önlemek için ne yapılır?

Soru 3 mouseX / mouseY neyi verir?

Soru 4 Daire Tıklama iskeletinde hedef yenileme tipik olarak ne zaman yapılır?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: Mesafe ≤ yarıçap ise geometrik isabet vardır.
• İlgili Konu: 4.1. Fare Girdisi, Metin, Mesafe ve Etkileşim

Soru 2: Doğru Cevap: A

• Çözüm: draw içinde mouseIsPressed ile artış tekrarlanabilir; olay tek seferliktir.
• İlgili Konu: 4.1. Fare Girdisi, Metin, Mesafe ve Etkileşim

Soru 3: Doğru Cevap: B

• Çözüm: p5.js imleç koordinatlarını bu sistem değişkenlerinde tutar.
• İlgili Konu: 4.1. Fare Girdisi, Metin, Mesafe ve Etkileşim

Soru 4: Doğru Cevap: B

• Çözüm: İsabet sonrası hedef yeni konuma taşınır.
• İlgili Konu: 4.2. Adım Adım: Daire Tıklama Oyunu

Yararlanılan Kaynaklar

Bu içerik aşağıdaki kaynaklardan derlenerek hazırlanmıştır:

• McCarthy, L., Reas, C., & Fry, B. (2015). Make: Getting Started with p5.js. Maker Media.
• Microsoft. (n.d.). Visual Studio Code. https://code.visualstudio.com/
• p5.js Foundation. (n.d.). dist(). p5.js Reference. https://p5js.org/reference/p5/dist/
• p5.js Foundation. (n.d.). mouseX. p5.js Reference. https://p5js.org/reference/p5/mouseX/
• p5.js Foundation. (n.d.). p5.js Web Editor. https://editor.p5js.org/
• p5.js Foundation. (n.d.). random(). p5.js Reference. https://p5js.org/reference/p5/random/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js
• Sweigart, A. (2017). Invent Your Own Computer Games with Python (4th ed.). No Starch Press. (Benzer mini oyun örnekleri için.)
• The Coding Train. (n.d.). Games [Öğretici parkur]. https://thecodingtrain.com/tracks/games/