Ana Başlık 1. for, while ve Döngü Kontrolü

Amaç: for ve while döngülerini, break/continue ve seçim ölçütlerini öğreterek tekrarlayan işlemleri güvenli yazmak.

Öğrenme Çıktıları:

• for döngüsünün üç parçasını açıklar ve uygular.
• while ile koşula bağlı tekrar yazar.
• for ve while arasında seçim gerekçesi verir.
• break ve continue ile döngü akışını denetler.

Anahtar Sözcükler: for, while, break, continue, sonsuz döngü, sayaç

Giriş

Önceki bölümlerde tekil şekiller ve koşullu kararlar işlendi. Oyun dünyaları ise çoğu zaman onlarca tekrarlayan öğe içerir: ızgara çizgileri, engeller, parçacıklar. Aynı kodu elle kopyalamak bakımı zorlaştırır; döngüler bu tekrarı tek bir kalıpta toplar.

for sayaç tabanlı, while koşul tabanlı tekrardır. Yanlış koşul sonsuz döngüye yol açabilir; break erken çıkış, continue tur atlama sağlar. Bu ana başlık döngünün nedenini, sözdizimini ve güvenli kontrolünü kurar. İç içe ızgara ve animasyon bir sonraki ana başlıkta gelir. 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. Örnek sketch’ler tek bir mekaniğe odaklanır; böylece yan konular okumayı dağıtmaz. Parametreleri değiştirip yeniden çalıştırmak, kuralın sınırını görmenin en hızlı yoludur. Bu ana başlığın çıktısı, sonraki oyunda yeniden kullanılabilecek bir iskelet oluşturur.

1.1. Neden Döngü? Tekrarlayan İşlemler

Döngü olmadan beş adet dikdörtgen çizmek için rect() beş kez yazılmalıdır:

rect(0, 0, 40, 40);rect(50, 0, 40, 40);rect(100, 0, 40, 40);rect(150, 0, 40, 40);rect(200, 0, 40, 40);

Burada yalnızca X konumu 50'şer piksel artmaktadır. On veya yüz dikdörtgen gerektiğinde bu yöntem sürdürülebilir değildir. Döngü ile örüntü tek bir değişkene bağlanır; değişken her turda güncellenir.

1.2. for Döngüsü

Sözdizimi:

for (başlangıç; koşul; artış) {  // döngü gövdesi — koşul true olduğu sürece tekrarlanır}

for başlığının üç parçası — ne işe yarar?

Üç parça zorunlu isimler değil; her biri farklı anda çalışır. Noktalı virgüller parçaları ayırır:

Tablo 1.

Çalışma sırası her zaman şöyledir: başlangıç → (koşul? → gövde → güncelleme → koşul? → …). Üçüncü parça gövdeden sonra gelir; bu yüzden gövde içinde i hâlâ o turun değeridir.

Kod bloğu: Üç parçanın rolünü konsolda izleme.

function setup() {  createCanvas(200, 100);  console.log("başlangıç çalışacak");  for (let i = 0; i < 3; i++) {    console.log("gövde, i =", i);  }  console.log("döngü bitti");} function draw() {  background(240);}

Konsol çıktısı:

başlangıç çalışacakgövde, i = 0gövde, i = 1gövde, i = 2döngü bitti

(i++ her gövdeden sonra sessizce çalışır; ayrı bir console.log satırı yoktur.)

Üç parçadan bazılarını boş bırakmak

Noktalı virgüller durur; aradaki ifade yazılmazsa o parça atlanmış sayılır:

Tablo 2.

Aşağıda her durum için kısa, çalışır örnekler vardır (setup içinde; konsol çıktısı).

Kod bloğu: Artış boş — güncelleme gövdede.

function setup() {  createCanvas(200, 100);  for (let i = 0; i < 3; ) {    console.log("artış gövdede, i =", i);    i++; // üçüncü parça boş olduğu için burada  }} function draw() {  background(240);}

artış gövdede, i = 0artış gövdede, i = 1artış gövdede, i = 2

Kod bloğu: Başlangıç boş — i önce tanımlanır.

function setup() {  createCanvas(200, 100);  let i = 0; // başlangıç döngü dışında  for (; i < 3; i++) {    console.log("başlangıç dışarıda, i =", i);  }} function draw() {  background(240);}

başlangıç dışarıda, i = 0başlangıç dışarıda, i = 1başlangıç dışarıda, i = 2

Kod bloğu: Koşul boş — break ile çıkış.

function setup() {  createCanvas(200, 100);  for (let i = 0; ; i++) {    console.log("koşul yok, i =", i);    if (i >= 2) {      break; // yoksa sonsuz döner    }  }  console.log("break ile çıktık");} function draw() {  background(240);}

koşul yok, i = 0koşul yok, i = 1koşul yok, i = 2break ile çıktık

Kod bloğu: for (;;) — üçü de boş (while (true) eşdeğeri).

function setup() {  createCanvas(200, 100);  let n = 0;  for (;;) {    console.log("for(;;), n =", n);    n++;    if (n >= 3) {      break;    }  }} function draw() {  background(240);}

for(;;), n = 0for(;;), n = 1for(;;), n = 2

Kısayol operatörleri (++, --, +=, -=)

Sayısal değişkeni bir artırmak veya azaltmak döngülerde sık tekrarlanır. JavaScript bunun için kısayol operatörleri sunar; bunlar yeni bir dil kuralı değil, uzun yazımın kısa eşdeğeridir:

Tablo 3.

for döngüsünün üçüncü bölümünde her iki biçim de geçerlidir:

for (let i = 0; i < 5; i = i + 1) { /* … */ }for (let i = 0; i < 5; i++) { /* … */ }          // aynı anlamfor (let satir = 5; satir >= 0; satir--) { /* … */ } // alttan üste

Kod bloğu: Yatay dizide beş kare çizen for döngüsü.

function setup() {  createCanvas(400, 200);  noStroke();} function draw() {  background(30, 30, 50);   for (let i = 0; i < 5; i = i + 1) {    fill(100 + i * 30, 150, 200);    rect(i * 50, 80, 40, 40);  }}

i sırasıyla 0, 1, 2, 3, 4 değerlerini alır; her değerde rect(i * 50, 80, 40, 40) farklı X konumunda bir kare çizer.

for döngüsü izleme tablosu

for (let i = 0; i < 5; i = i + 1) ifadesinin turları:

Tablo 4.

Koşul false olduğunda gövde bir kez daha çalışmaz; akış döngüden sonraki satıra geçer.

Görsel 1 for döngüsünün çalışma sırasını özetler: başlangıç (i = 0), koşul kontrolü (i < 5), gövde, artış (i = i + 1) ve koşula geri dönüş. Koşul false olduğunda döngü biter.

1.3. while Döngüsü

Sözdizimi:

while (koşul) {  // gövde}

Kod bloğu: while ile sayaç — setup() içinde mantık gösterimi. Konsola yazdırmak için 1.3'teki console.log() kullanılır.

function setup() {  createCanvas(400, 400);   let sayac = 0;  while (sayac < 5) {    console.log("sayac:", sayac);    sayac = sayac + 1;  }  console.log("while bitti");} function draw() {  background(220);}

Konsol çıktısı (sırayla):

sayac: 0sayac: 1sayac: 2sayac: 3sayac: 4while bitti

while döngüsü izleme tablosu

sayac = 0 sonrası while (sayac < 5) { …; sayac = sayac + 1; } için:

Tablo 5.

Tablo, for izleme tablosuyla aynı mantıktadır; fark yalnızca başlangıç/artışın nerede yazıldığıdır.

Görsel 2 while akışını özetler: döngü öncesi sayac = 0, koşul, gövde, artış, koşula dönüş.

Sonsuz döngü

Gövdede koşulu false yapacak güncelleme yoksa döngü sonsuz döner ve program donabilir.

Yanlış örnek (çalıştırmayın — tarayıcı kilitlenebilir):

let n = 0;while (n < 5) {  console.log(n);  // n artırılmadı → koşul hep true kalır}

1.4. Aynı İş: for ve while — Hangisi Ne Zaman?

Aynı görev çoğu zaman her iki döngüyle de yazılabilir. Aşağıda “0’dan 4’e kadar konsola yaz” işi yan yana gösterilir.

Kod bloğu: Aynı mantık — for sürümü.

function setup() {  createCanvas(200, 100);  for (let i = 0; i < 5; i++) {    console.log("for:", i);  }} function draw() {  background(240);}

Kod bloğu: Aynı mantık — while sürümü.

function setup() {  createCanvas(200, 100);  let i = 0;  while (i < 5) {    console.log("while:", i);    i++;  }} function draw() {  background(240);}

Her iki konsol da 0 1 2 3 4 üretir. Eşleme şöyle okunur:

Tablo 6.

Çizim örneği de aynıdır: Beş kare için for (let i = 0; i < 5; i++) { rect(i * 50, 80, 40, 40); } yerine let i = 0; while (i < 5) { rect(…); i++; } yazılabilir; tuval aynı görünür.

Basit desenler: yatay / dikey çizgi ve eşmerkezli daire

Aşağıdaki üç desen döngü değişkenini konuma bağlamanın en sade örnekleridir. Her biri önce for, sonra while ile yazılır; tuval çıktısı aynıdır.

Görsel 3 üç deseninin beklenen çıktısını özetler.

Kod bloğu: Yatay paralel çizgiler — for.

function setup() {  createCanvas(280, 200);} function draw() {  background(236);  stroke(40);  for (let i = 0; i < 8; i++) {    let y = 20 + i * 20;    line(20, y, 260, y);  }}

Kod bloğu: Aynı yatay çizgiler — while.

function setup() {  createCanvas(280, 200);} function draw() {  background(236);  stroke(40);  let i = 0;  while (i < 8) {    let y = 20 + i * 20;    line(20, y, 260, y);    i++;  }}

i her turda Y konumunu kaydırır; X uçları sabittir → yatay paralel çizgiler.

Kod bloğu: Dikey paralel çizgiler — for / while.

// forfor (let i = 0; i < 8; i++) {  let x = 20 + i * 30;  line(x, 20, x, 180);} // while (eşdeğer)let i = 0;while (i < 8) {  let x = 20 + i * 30;  line(x, 20, x, 180);  i++;}

Burada değişen X’tir; çizgiler dikeydir.

Kod bloğu: Eşmerkezli daireler — for / while.

function setup() {  createCanvas(280, 200);} function draw() {  background(236);  noFill();  stroke(40);  for (let i = 1; i <= 6; i++) {    let çap = i * 28;    circle(140, 100, çap);  }} // while eşdeğeri:// let i = 1;// while (i <= 6) {//   circle(140, 100, i * 28);//   i++;// }

Merkez sabit, çap i ile büyür → eşmerkezli daireler. (circle(x, y, çap) p5.js’te çap parametresi alır.)

Sıra Sizde: Tek bir for ile renk tayfı çizin (p5.js). Hedef görünümler:

İstenenler:

1. Görsel 4 (dikey / mavi): Yatay şeritler; mavi bileşen 0’dan 255’e artsın (fill(0, 0, mavi) — mavi döngü değişkenine bağlı).
2. Görsel 5 (yatay / kırmızı): Dikey şeritler; kırmızı 0’dan 255’e artsın (fill(kirmizi, 0, 0)).
3. İç içe döngü gerekmez — yukarıdaki yatay/dikey çizgi örnekleri gibi tek for yeter. Tek tek renk yazmayın.

İpucu: N şerit için renk = i * (255 / (N - 1)) (veya map(i, 0, N - 1, 0, 255)). Şerit yüksekliği / genişliği: height / N, width / N.

draw() ile dolaylı döngü (background silmeden)

for / while tek frame içinde birçok çizgi üretir. Benzer sonucu bazen draw()’ın kendisine bırakmak da mümkündür: background() çağrılmazsa önceki çizimler silinmez; her frame’de bir yeni çizgi eklenir. Bu, p5.js’in sürekli draw çağrısını dolaylı bir döngü gibi kullanmaktır.

Kod bloğu: Her frame bir yatay çizgi — background yok.

let satir = 0; function setup() {  createCanvas(280, 200);  background(236); // yalnızca bir kez  stroke(40);} function draw() {  if (satir < 8) {    let y = 20 + satir * 20;    line(20, y, 260, y);    satir++;  }  // satir 8 olunca yeni çizgi eklenmez; tuval dolu kalır}

İlk 8 frame’de ekran Görsel 3’teki yatay desene yaklaşır; fark, çizgilerin zamanla birikmesidir (animasyon gibi görünür). for ile tek frame’de biten sürüm anında tamamlanır.

Tablo 7.

Hangisi hangi durumda daha iyi?

Kesin bir kural yoktur; okunabilirlik ve niyet önemlidir. Başlangıç düzeyinde şu tercihler yaygındır:

Tablo 8.

Tartışma: “Beş kare çiz” için while de çalışır; ama for niyeti (“sayarak tekrarla”) daha net gösterir. “Kullanıcı doğru cevabı girene kadar sor” gibi tur sayısı belirsiz işlerde while daha doğal okunur. İkisi de aynı makineye derlenebilir; seçim çoğu zaman okuyan insanın işi anlaması içindir.

Döngüler oyunlarda neden bu kadar sık?

Beş rect örneğindeki tekrar, oyunlarda da aynıdır: listedeki her düşmanı, her mermiyi veya her tahta satırını tek tek işlemek. Aşağıdakiler örnek senaryolardır (oyun motorunun içini birebir iddia etmez); amaç, döngünün neyi tekrarladığını somutlaştırmaktır.

Tablo 9.

while daha çok “koşul doğru olduğu sürece” işlerde öne çıkar: can bitene kadar, doğru cevap gelene kadar, liste boşalana kadar. Bu kitaptaki mini oyunlarda çoğu tekrar for ile başlar; while seçtiğinizde gerekçenizi bir cümleyle söyleyebilmeniz yeterlidir.

1.5. break, continue ve Erken Çıkış

Bu iki komut for ve while içinde kullanılabilir. Amaç çoğu zaman “hedef bulundu, yeter” (break) veya “bu turu atla, sonrakine bak” (continue) demektir.

Kod bloğu: break — konsolda izleme.

function setup() {  createCanvas(200, 100);   for (let i = 0; i < 10; i++) {    if (i === 3) {      console.log("break: i =", i, "→ döngü biter");      break;    }    console.log("i =", i);  }  console.log("for sonrası");} function draw() {  background(240);}

Konsol çıktısı:

i = 0i = 1i = 2break: i = 3 → döngü biterfor sonrası

i 3 olduğunda gövde console.log("i =", i) satırına gelmeden break çalışır; 4…9 turları hiç yapılmaz.

Kod bloğu: continue — tek bir turu atlama.

function setup() {  createCanvas(200, 100);   for (let i = 0; i < 5; i++) {    if (i === 2) {      console.log("continue: i =", i, "→ bu tur atlandı");      continue;    }    console.log("i =", i);  }} function draw() {  background(240);}

Konsol çıktısı:

i = 0i = 1continue: i = 2 → bu tur atlandıi = 3i = 4

Tablo 10.

Kod bloğu: İç döngüde break — dış döngü sürer (konsol).

function setup() {  createCanvas(200, 100);   for (let satir = 0; satir < 3; satir++) {    for (let sutun = 0; sutun < 3; sutun++) {      console.log("bak:", satir, sutun);      if (satir === 1 && sutun === 1) {        console.log("break — yalnızca iç döngü biter");        break;      }    }    console.log("dış tur bitti, satir =", satir);  }} function draw() {  background(240);}

Konsol çıktısı (özet): satir = 1 iken sutun 0 ve 1 yazılır, sonra iç break; ardından satir = 2 yine 0, 1, 2 ile gezer. Dış döngü durmaz.

Kontrollü sonsuz döngü (setup / mantık kodunda; draw içinde değil):

let deneme = 0;while (true) {  deneme++;  console.log("deneme", deneme);  if (deneme >= 3) {    break; // bilinçli çıkış  }}

Aynı desen for (;;) ile de yazılabilir; yine break şarttır.

Özet

Döngü, aynı işlem ailesini bir sayaca veya bir koşula bağlı olarak yineleyen yapıdır; beş rect çağrısını tek tek yazmak yerine örüntüyü tek bir değişkene bağlar. for (başlangıç; koşul; artış) üçlüsünde başlangıç yalnızca bir kez, koşul her tur öncesinde, güncelleme ise her gövde bitiminde çalışır. Bu parçalar bilinçli olarak boş bırakılabilir; ancak boş bırakma nadir bir tercihtir ve for (;;) gibi biçimler yalnızca break ile birlikte anlam taşır. i++, i-- ve i += 5 kısayolları uzun yazımın eşdeğeridir. while ise “koşul doğru kaldıkça” modelidir; başlangıç döngüden önce, güncelleme gövde içinde yazılır ve güncelleme unutulduğunda koşul hiç bozulmadığı için tarayıcı kilitlenebilir.

Aynı iş çoğu zaman her iki yapıyla da yazılabildiğinden seçim okunabilirliğe dayanır: tur sayısı baştan belliyse for, tur sayısı belirsiz ve vurgu koşuldaysa while daha doğal okunur. break içinde bulunduğu döngüyü hemen sonlandırır, continue yalnızca o turun kalan gövdesini atlar; iç içe döngülerde break en içteki döngüyü kırar, dış döngü sürer. Oyunlarda aynı tekrar Tetris’te dolu satırların taranmasında, Pac-Man’de hayaletlerin sırayla güncellenmesinde veya mermi listesinin işlenmesinde görülür. draw içinde while (true) animasyonu hızlandırmaz; frame’i bitirmediği için görüntüyü ve girdiyi dondurur. Bu temel, sonraki ana başlıktaki iç içe ızgara ve frameCount animasyonuna zemin hazırlar.

Neler Öğrendik?

Soru 1 for başlığındaki üç parça sırasıyla neyi kontrol eder?

Soru 2 draw() içinde while (true) yazmak genelde neye yol açar?

Soru 3 break ne yapar?

Soru 4 continue ne yapar?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: Klasik for üçlüsü başlangıç–koşul–adım biçimindedir.
• İlgili Konu: 1.2. for Döngüsü

Soru 2: Doğru Cevap: B

• Çözüm: draw bir frame’i bitirmeden sonraki frame gelmez; uzun while ekranı ve girdiyi dondurabilir.
• İlgili Konu: 1.3. while Döngüsü

Soru 3: Doğru Cevap: B

• Çözüm: break en yakın döngüden çıkar.
• İlgili Konu: 1.5. break, continue ve Erken Çıkış

Soru 4: Doğru Cevap: B

• Çözüm: continue yalnızca o iterasyonun kalanını atlar.
• İlgili Konu: 1.5. break, continue ve Erken Çıkış

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.
• MDN Web Docs. (n.d.). JavaScript Guide. Mozilla. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
• Mozilla Developer Network. (n.d.). break. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break
• Mozilla Developer Network. (n.d.). continue. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/continue
• Mozilla Developer Network. (n.d.). for. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for
• Mozilla Developer Network. (n.d.). while. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while
• Nystrom, R. (2014). Game loop. In Game Programming Patterns. https://gameprogrammingpatterns.com/game-loop.html
• p5.js Foundation. (n.d.). angleMode. p5.js Reference. https://p5js.org/reference/p5/angleMode/
• p5.js Foundation. (n.d.). radians. p5.js Reference. https://p5js.org/reference/p5/radians/
• p5.js Foundation. (n.d.). sin. p5.js Reference. https://p5js.org/reference/p5/sin/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js