Ana Başlık 3. Fonksiyonlar ve Modüler Kod Yazımı

Amaç: Fonksiyon tanımlama, parametre ve dönüş değeri kavramlarını öğreterek kodu modüler hale getirmek.

Öğrenme Çıktıları:

• Fonksiyon tanımlar ve çağırır.
• Parametreli fonksiyonlarla tekrar kullanılabilir kod yazar.
• return ifadesiyle değer döndürür.
• p5.js'te yardımcı çizim fonksiyonları oluşturur.
• Modüler kod yapısının oyun geliştirmedeki önemini açıklar.
• Global ve yerel değişken kapsamını ayırt eder; parametre ile argüman ilişkisini açıklar.

Anahtar Sözcükler: fonksiyon, parametre, argüman, dönüş değeri, return, modülerlik, yeniden kullanılabilirlik, kapsam, global değişken, yerel değişken, gölgeleme

Giriş

Döngüler tekrarlayan aynı kodu kısaltır; fonksiyonlar ise anlamlı iş parçalarını isimlendirilmiş bloklara ayırır. draw() içinde onlarca satır büyüdüğünde "tahta çiz", "skor yaz", "hedefi güncelle" gibi görevler birbirine karışır. Fonksiyonlar, her görevi ayrı bir isim altında toplayarak okunabilirliği artırır ve aynı işlemi farklı yerlerden tekrar çağırmayı mümkün kılar. Böylece bir değişiklik tek noktada yapılır; kopyalanmış satırlarda unutulan güncellemeler azalır.

p5.js’te setup() ve draw() zaten özel fonksiyonlardır; p5.js bunları belirli zamanlarda otomatik çağırır. mousePressed() de önceki ana başlıklarda benzer biçimde tanıtılmıştır. Bu ana başlıkta kullanıcı tanımlı fonksiyonlar ele alınacak: geliştiricinin kendi adını verdiği, parametre alabilen ve değer döndürebilen bloklar. Parametreler dış veri taşır; return hem erken çıkış hem de hesaplanmış sonuç için kullanılır. Modüler yapı, ileride XOX tahtası çizimi ve Daire Tıklama oyunundaki hedef konumu güncelleme gibi görevlerin düzenlenmesine zemin hazırlar.

Fonksiyonlar yalnızca kod tekrarını azaltmaz; soyutlama sağlar. draw() içinde tahtaCiz() yazmak, «tahtayı çiz» niyetini kodu inceleyene iletir; hücre renginin nasıl seçildiği hucreCiz içinde kalır. Oyun büyüdükçe hangi fonksiyonun ne yaptığını bilmek, hata ayıklamayı hızlandırır: tahta bozuksa önce tahtaCiz ve hucreCiz incelenir, tüm draw() taranmaz.

Modüler yazım aynı zamanda hata ayıklamayı ve ekip çalışmasını kolaylaştırır. Bir oyunda skor hesaplaması hatalıysa, tüm draw() gövdesini satır satır izlemek yerine doğrudan skorArtir gibi anlamlı adlandırılmış fonksiyona bakmak yeterli olur; fonksiyon adı zaten hangi görevi üstlendiğini belirtir. Birden fazla kişi aynı sketch üzerinde çalıştığında da fonksiyonlara bölünmüş kod, kimin hangi parçayı değiştirdiğini ayırt etmeyi kolaylaştırır: biri tahtaCiz üzerinde çalışırken diğeri skorGuncelle üzerinde çalışabilir, iki değişiklik aynı satırlarda çakışmaz.

3.1. Fonksiyon Kavramı ve Sözdizimi

Matematik dersindeki f(x) = x * x gibi bir fonksiyonu düşünün: dışarıdan bir girdi verirsiniz, içerideki kural çalışır, bir sonuç çıkar. Programlamada da benzer bir bakış yaygındır: çağıran taraf çoğu zaman fonksiyonun içini satır satır bilmek zorunda değildir — adı, girdi ve çıktı yeter; gövde bir kara kutu gibi kalabilir. dist(x1, y1, x2, y2) tam böyle çalışır: mesafe formülünü ezberlemeseniz de sonucu kullanırsınız. Kendi yazdığınız icindeMi veya topla için de aynı alışkanlık geçerlidir: önce «ne alır, ne verir / ne yapar?» sorusunu netleştirin.

Görsel 1 fonksiyonu girdi → kara kutu → çıktı olarak özetler: topla(3, 5) çağrısında önemli olan argümanlar ve dönen 8’dir; kutunun içindeki satırlar çağıran için gizli kalabilir.

Temel sözdizimi:

function fonksiyonAdi() {  // gövde — çağrıldığında çalışan satırlar}

Çağrı (call): fonksiyonAdi(); — parantezler fonksiyonun şimdi çalıştırılması gerektiğini belirtir.

Tablo 1.

Kod bloğu: Basit yardımcı fonksiyon — arka plan rengini sabitleyen arkaPlanCiz.

function setup() {  createCanvas(400, 400);} function draw() {  arkaPlanCiz();  ortaCizgiCiz();} function arkaPlanCiz() {  background(35, 40, 55);} function ortaCizgiCiz() {  stroke(200);  strokeWeight(2);  line(width / 2, 0, width / 2, height);  noStroke();}

draw() artık ne yaptığını okunaklı biçimde listeler; ayrıntılar fonksiyon gövdelerinde saklanır. p5.js draw() her frame'de çalıştığı için içinde çağrılan arkaPlanCiz() ve ortaCizgiCiz() de her frame'de yeniden çalışır.

Fonksiyon çağrı izi: Aşağıdaki sketch'te draw() çalıştığında çağrı sırası şöyledir:

Tablo 2.

Fonksiyon iç içe çağrılabilir: tahtaCiz döngü içinde hucreCiz çağırır; her hucreCiz tamamlanınca kontrol tahtaCiz'e döner. Bu «çağrı yığını» (call stack) kavramının basit hâlidir; derin özyineleme (Mayın Tarlası Flood Fill) ileride aynı mantığı kullanır.

3.2. Parametreli Fonksiyonlar

function dikdortgenCiz(x, y, w, h, renkR, renkG, renkB) {  fill(renkR, renkG, renkB);  noStroke();  rect(x, y, w, h);} function draw() {  background(20);  dikdortgenCiz(50, 50, 80, 60, 255, 100, 100);   // kırmızımsı  dikdortgenCiz(200, 120, 100, 40, 100, 200, 255); // mavimsi}

Aynı fonksiyon farklı argümanlarla birden çok kez kullanılır; kod tekrarı azalır.

Tablo 3.

3.3. return ile Değer Döndürme

mousePressed() içinde return; ifadesi fonksiyondan erken çıkış için kullanılır; oyun bittiğinde geri kalan satırlar çalışmaz. return aynı zamanda bir değer üretip çağıran yere iletebilir.

function acikKareMi(satirSutunToplami) {  return (satirSutunToplami % 2 === 0);} function draw() {  background(50);  for (let satir = 0; satir < 4; satir = satir + 1) {    for (let sutun = 0; sutun < 4; sutun = sutun + 1) {      if (acikKareMi(satir + sutun)) {        fill(230, 220, 200);      } else {        fill(60, 55, 50);      }      rect(sutun * 50, satir * 50, 50, 50);    }  }}

Fonksiyon, dama deseninde satır ve sütun toplamının çift olduğu hücreleri açık renge ayırır: acikKareMi(3) çağrısı false, acikKareMi(6) çağrısı true döndürür. Çağıran satır bu boolean değeri if koşulunda kullanır.

Tablo 4.

let sonuc = topla(3, 5); // sonuc değişkeni 8 olur function topla(a, b) {  return a + b;}

Kod bloğu: Oyun mantığında return — mesafe ve «içinde mi» testi (daire çarpışmasında kullanılan dist() ile uyumlu).

function mesafeHesapla(x1, y1, x2, y2) {  return dist(x1, y1, x2, y2);} function icindeMi(fareX, fareY, merkezX, merkezY, yaricap) {  let m = mesafeHesapla(fareX, fareY, merkezX, merkezY);  return m < yaricap;}

icindeMi(mouseX, mouseY, hedefX, hedefY, 40) ifadesi true veya false üretir; if koşulunda doğrudan kullanılabilir. Daire Tıklama oyunundaki dist(...) < hedefYaricap satırı bu yapının satır içi hâlidir; fonksiyona taşımak okunabilirliği artırır.

3.4. p5.js'te Yardımcı Çizim Fonksiyonları

Izgara ve şekil çizimini fonksiyonlara ayırmak, draw() gövdesini sade tutar.

Kod bloğu: Parametreli hücre ve tahta çizimi.

const HUCRE = 50;const SUTUN = 3;const SATIR = 3; function setup() {  createCanvas(SUTUN * HUCRE, SATIR * HUCRE);  noStroke();} function draw() {  background(30, 35, 45);  tahtaCiz(0, 0, SATIR, SUTUN, HUCRE);  merkezIsaretiCiz(width / 2, height / 2);} function tahtaCiz(baslangicX, baslangicY, satirSayisi, sutunSayisi, hucreBoyutu) {  for (let satir = 0; satir < satirSayisi; satir = satir + 1) {    for (let sutun = 0; sutun < sutunSayisi; sutun = sutun + 1) {      hucreCiz(        baslangicX + sutun * hucreBoyutu,        baslangicY + satir * hucreBoyutu,        hucreBoyutu,        satir,        sutun      );    }  }} function hucreCiz(x, y, boyut, satir, sutun) {  if ((satir + sutun) % 2 === 0) {    fill(240, 235, 220);  } else {    fill(70, 65, 60);  }  rect(x, y, boyut, boyut);} function merkezIsaretiCiz(merkezX, merkezY) {  fill(255, 80, 80);  ellipse(merkezX, merkezY, 12, 12);}

tahtaCiz üç kez farklı boyutta çağrılabilir; yalnızca argümanlar değişir. Bu yapı ilerleyen bölümlerdeki XOX oyununun görsel zeminini oluşturur.

Çağrı sırası izlemesi: SATIR = 2, SUTUN = 2 olan daha küçük bir tahtada tahtaCiz çağrısının ürettiği hucreCiz çağrıları sırasıyla şöyledir:

Tablo 5.

Dış döngü satir değerini, iç döngü sutun değerini değiştirir; her ikili için hucreCiz bir kez çağrılır. Toplam çağrı sayısı satirSayisi * sutunSayisi kadardır.

3.5. Modüler Kod ve Oyun Mimarisi

Oyun kodunda yaygın işlev ayrımı:

Tablo 6.

Görsel 2 draw() fonksiyonunun çizim, tahta ve skor gibi görevleri ayrı fonksiyonlara devretmesini; tahtaCiz içinde hucreCiz gibi iç içe çağrıları gösterir.

Kod bloğu: Daire Tıklama için hedef konumu güncelleme — artık fonksiyon kullanılabilir (bu ana başlıktan sonra refaktör örneği).

function yeniHedefKonumu() {  hedefX = random(50, width - 50);  hedefY = random(50, height - 50);} 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 {      yeniHedefKonumu();    }  }}

Bu parça, sayı tahmin oyununda satır satır draw() ve mousePressed() içinde yazılmış mantığın modüler hâlidir; yeniHedefKonumu() yalnızca koordinat atamasından sorumludur.

Kod bloğu: XOX taşı çizimi — parametreli tasCiz (ilerleyen bölümlerin 5. ana başlığına hazırlık).

function tasCiz(satir, sutun, hucre, oyuncu) {  let x = sutun * hucre + hucre / 2;  let y = satir * hucre + hucre / 2;  textAlign(CENTER, CENTER);  textSize(hucre * 0.55);  fill(30);  text(oyuncu, x, y);} function xoxTahtasiniCiz(tahta, hucre) {  for (let satir = 0; satir < 3; satir = satir + 1) {    for (let sutun = 0; sutun < 3; sutun = sutun + 1) {      if (tahta[satir][sutun] !== "") {        tasCiz(satir, sutun, hucre, tahta[satir][sutun]);      }    }  }}

Boş hücrelerde tasCiz çağrılmaz; dolu hücrelerde "X" veya "O" metni çizilir. Tahta verisi (tahta dizisi) ile görselleştirme (tasCiz) ayrılmış olur.

3.6. Değişken Kapsamı: Global ve Yerel

Fonksiyonlar büyüdükçe «bu x hangisi?» sorusu sık çıkar. Cevap kapsam (scope) kurallarındadır: bir değişkenin adı, yalnızca tanımlandığı bölgede geçerlidir. Yanlış yerde tanımlanan skor frame sonunda yok olur; yanlış adlandırılmış parametre ise global skoru güncellemezmiş gibi görünür.

Global değişkenler

setup() ve draw() dışında, sketch dosyasının üst düzeyinde let / const ile tanımlanan değişkenler global kabul edilir. Bunlara setup, draw, mousePressed ve kullanıcı tanımlı yardımcılardan erişilebilir; değer frame’ler arasında kalır.

let skor = 0;          // global — setup/draw dışındalet hedefX;let hedefY; function setup() {  createCanvas(400, 400);  hedefX = width / 2;  hedefY = height / 2;} function draw() {  background(240);  text("Skor: " + skor, 20, 30); // global skor okunur  circle(hedefX, hedefY, 40);} function skorArtir(artisMiktari) {  skor = skor + artisMiktari;    // global skor güncellenir}

Oyun durumu (skor, hedefX, oyunBitti) bu yüzden üst düzeyde tutulur: draw her frame yeniden çalışsa da global değer silinmez.

Tablo 7.

Yerel değişkenler ve draw()

Fonksiyon içinde let x = 5 yazılırsa x yalnızca o fonksiyon gövdesinde geçerlidir; fonksiyon bittiğinde yerel değişken yok olur. Parametreler de yerel kapsamdadır.

let skor = 0; // global — doğru yer function draw() {  let geciciX = mouseX; // yerel — yalnızca bu frame’de geçerli  // let skor = 0;     // YANLIŞ: her frame sıfırdan başlar, skor birikmez  background(240);  text(skor, 20, 30);  circle(geciciX, 200, 20);}

geciciX her frame fare konumuna göre yeniden hesaplanır; bunu global tutmaya gerek yoktur. Buna karşılık skor birikmeli olduğu için global (veya ileride nesne/dizi) olmalıdır.

Argüman ile parametre aynı şey değildir

Çağrı satırındaki değer argüman, fonksiyon tanımındaki yer tutucu parametredir. İsimler aynı olsa bile bunlar iki ayrı değişkendir: çağrı anında argümanın değeri parametreye kopyalanır.

function konumYaz(x) {  // buradaki x, çağıranın x'i değil — kopya (yerel parametre)  x = x + 50;  text(x, 20, 40);} function draw() {  background(255);  let x = 100;       // draw'ın yerel x'i  konumYaz(x);       // argüman: 100 → parametreye kopyalanır  text(x, 20, 80);   // hâlâ 100 — konumYaz içindeki atama burayı değiştirmez}

Tablo 8.

Ekranda üst satır 150, alt satır 100 görünür. Parametre adı x olsa da çağıranın x'i ile bağlantılı değildir; sayısal değerler kopyalanır. Bu yüzden dikdortgenCiz(x, y, w, h) içindeki x, çağrı sırasında gelen argümanın kopyasıdır — fonksiyon gövdesinde x'i değiştirmek, çağıran taraftaki değişkeni otomatik güncellemez.

Gölgeleme (shadowing)

Parametre veya yerel let adı, üst düzeydeki global ile aynı olursa fonksiyon içinde yerel olan kazanır; global o isimle görünmez. Buna gölgeleme (shadowing) denir.

let skor = 10; // global function skorArtir(skor) {   // parametre adı da skor — gölgeleme  skor = skor + 1;           // yalnızca yerel parametre artar  // global skor hâlâ 10} function draw() {  skorArtir(skor);           // argüman: 10 → yerel parametreye kopyalanır  text(skor, 20, 30);        // hâlâ 10 — beklenen artış olmaz}

Karışıklığı önlemek için parametre adını globalden ayırmak önerilir:

let skor = 10; function skorArtir(artisMiktari) {  skor = skor + artisMiktari; // global skor bilinçli güncellenir} function draw() {  // …  skorArtir(1);}

let secili = "gunes"; function setup() {  createCanvas(400, 400);  background(230); // bir kez} function draw() {  // boş — şekiller tıklamayla birikir} function mousePressed() {  if (mouseX < 40 && mouseY < 40) {    background(230); // temizle    return;  }  if (secili === "gunes") {    gunesCiz(mouseX, mouseY);  } else if (secili === "insan") {    insanCiz(mouseX, mouseY);  } else if (secili === "agac") {    agacCiz(mouseX, mouseY);  } else if (secili === "ev") {    evCiz(mouseX, mouseY);  } else if (secili === "kus") {    kusCiz(mouseX, mouseY);  }} // keyPressed — YZ / ekip arkadaşı yazdı; siz içini bilmeden kullanıyorsunuz

Özet

Fonksiyonlar, adlandırılmış ve gerektiğinde tekrar çağrılabilen kod bloklarıdır. Tanım function ad() { … } biçimindedir; çağrı ad(); ile yapılır — parantezler bloğun o anda çalıştırılacağını belirtir. p5.js’in setup() ve draw() fonksiyonları kütüphane tarafından otomatik çağrılır; mousePressed gibi olay fonksiyonları da benzerdir. Kullanıcı tanımlı fonksiyonlar ise geliştiricinin açıkça çağırdığı yardımcı bloklardır. Modülerlik, uzun draw() gövdelerini çizim, girdi, mantık ve hesap görevlerine ayırarak okunabilirliği ve bakımı artırır; tahta bozuksa tüm draw() yerine tahtaCiz incelenir. Yeniden kullanılabilirlik, aynı yardımcının farklı argümanlarla tekrar çağrılmasından doğar. Parametreler fonksiyona dış veri taşır; çağrı sırasındaki somut değerler argümandır (dikdortgenCiz(50, 80, 100, 40)). Aynı fonksiyon farklı argümanlarla birçok kez kullanılabilir; böylece kopyala-yapıştır azalır. return hem koşul sağlanmadığında erken çıkış (if (oyunBitti) { return; }) hem de topla, acikKareMi, icindeMi gibi yardımcılarda hesaplanmış değer döndürme için kullanılır. Dönüş değeri atama veya koşul ifadesinde tüketilir. Kapsam (scope), bir değişken adının geçerli olduğu bölgedir. setup/draw dışında tanımlanan skor, hedefX gibi değişkenler globaldir; frame’ler arasında kalır ve yardımcılardan okunup yazılabilir. Fonksiyon içindeki let ve parametreler yereldir; fonksiyon (veya draw frame’i) bitince yok olur. Bu yüzden skor draw içinde let skor = 0 ile tanımlanmaz. Argüman ile parametre aynı isimde olsa bile ayrıdır: çağrıda değer kopyalanır; parametreyi değiştirmek çağıranın değişkenini otomatik güncellemez. Parametre adı global ile örtüşürse gölgeleme olur; skorArtir(artisMiktari) gibi ayırt edici adlar tercih edilir. p5.js’te tahtaCiz, hucreCiz, hedefCiz, arkaPlanCiz gibi görevler ayrı fonksiyonlara bölündüğünde draw() kısa ve niyet odaklı kalır; iç içe çağrılar (tahtaCiz → hucreCiz) görev hiyerarşisini yansıtır.

Neler Öğrendik?

Soru 1 Aşağıdakilerden hangisi fonksiyon çağrısıdır?

Soru 2 function topla(a, b) { return a + b; } tanımında a ve b ne olarak adlandırılır?

Soru 3 mousePressed() içinde if (oyunBitti) { return; } satırının amacı nedir?

Soru 4 I. Parametreli fonksiyonlar kod tekrarını azaltır. II. return a + b; ifadesi toplamı çağıran yere iletir. III. Modüler kod, görevleri isimlendirilmiş parçalara ayırır.

Hangileri doğrudur?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: C

• Çözüm: hedefCiz(); fonksiyonu çalıştırır. A seçeneği tanımdır; return ve if ayrı yapılardır.
• İlgili Konu: 3.1. Fonksiyon Kavramı ve Sözdizimi

Soru 2: Doğru Cevap: B

• Çözüm: Tanımdaki a ve b parametredir. topla(3, 5) çağrısındaki 3 ve 5 argümandır.
• İlgili Konu: 3.2. Parametreli Fonksiyonlar

Soru 3: Doğru Cevap: C

• Çözüm: return; değer döndürmeden fonksiyonu sonlandırır; oyun bittiğinde tıklama işlenmez.
• İlgili Konu: 3.3. return ile Değer Döndürme

Soru 4: Doğru Cevap: E

• Çözüm: Üç ifade de modüler fonksiyon kullanımını doğru tanımlar.
• İlgili Konu: 3.5. Modüler Kod ve Oyun Mimarisi

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.
• Mozilla Developer Network. (n.d.). Functions. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
• Mozilla Developer Network. (n.d.). return. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return
• Mozilla Developer Network. (n.d.). Scope. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Glossary/Scope
• p5.js Foundation. (n.d.). p5.js reference. https://p5js.org/reference/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js