Bölüm 3 — Amaç ve Kapsam

Genel Amaç

Bu bölümün temel amacı, deltaTime ile cihazdan bağımsız hareketi kurmak; dizi koleksiyonlarını oyun verisine bağlamak ve klavye girdisiyle kontrol iskeletini oluşturarak sonraki çarpışma ve durum makinesi konularına zemin hazırlamaktır. Bölüm boyunca her ana başlık kendi içinde amaç, öğrenme çıktıları, örnek kod ve değerlendirme sorularıyla tamamlanır; böylece bir sonraki bölüme geçmeden önce ölçülebilir kazanımlar elde edilir.

Kapsam

Bu bölüm şu ana başlıklar altında ele alınmaktadır:

Ana Başlık 1: deltaTime ile Zaman Tabanlı Hareket

Ana Başlık 2: Dizi Temelleri: Tanım, Erişim ve push/pop

Ana Başlık 3: Sabit Kapasite ve Paralel Dizilerle Mini Sahne

Ana Başlık 4: Klavye Girdisi

Ana Başlık 1. deltaTime ile Zaman Tabanlı Hareket

Amaç: deltaTime ile frame hızından bağımsız hareketi öğreterek taşınabilir animasyon kurmak.

Öğrenme Çıktıları:

• Frame başına sabit adım sorununu açıklar.
• deltaTime birimini ve kullanımını uygular.
• Hızı saniye başına birim olarak yazar.
• Hareketli top örneğinde zaman tabanlı güncelleme kurar.

Anahtar Sözcükler: deltaTime, zaman tabanlı hareket, hız, taşınabilirlik

Giriş

FPS ve frameRate bilindikten sonra asıl çözüm gelir: hareketi frame sayısına değil geçen süreye bağlamak. deltaTime son frame’den bu frame’e geçen milisaniyeyi verir; x += hiz * (deltaTime / 1000) ifadesi hızı “birim / saniye” yapar. Böylece 30 FPS ve 60 FPS’te top benzer gerçek hızda ilerler.

Bu ana başlık sorunu, formülü ve hareketli top örneğini işler. Sonraki diziler ve klavye kontrolü, bu zaman modelinin üzerine çoklu varlık ve girdi ekler. 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. Frame Başına Hareketin Sorunu

Frame başına sabit piksel ekleme (topX = topX + 3) sezgiseldir; fakat hız frame sayısına bağlıdır:

Tablo 1.

Aynı kod, farklı frame hızında farklı oyun hızı üretir. Oyuncu deneyimi makineden makineye değişir; fizik tabanlı veya ağ üzerinden senkronize oyunlarda bu kabul edilemez.

Bu etki, hızlı hareket eden nesnelerde daha da görünür olur. Örneğin bir mermi veya ok, frame başına 15 piksel ilerleyen bir formülle hareket ettiriliyorsa, 30 FPS'te saniyede 450 piksel, 60 FPS'te saniyede 900 piksel kat eder — iki kat fark, çarpışma testlerinin bile farklı sonuç vermesine yol açabilir: yüksek FPS'te mermi ince bir engelin üzerinden "atlayarak" geçebilir, düşük FPS'te ise engelle çarpışabilir. Bu tür tutarsızlıklar, oyunun zorluk seviyesini geliştiricinin niyeti dışında değiştirir ve hata ayıklamayı zorlaştırır: bir hata bazı bilgisayarlarda gözlenirken bazılarında hiç ortaya çıkmayabilir.

Çözüm: hareketi frame sayısına değil, geçen süreye bağlamak. p5.js her draw() çağrısında bir önceki frame'den bu yana geçen süreyi milisaniye cinsinden deltaTime değişkeninde sunar.

1.2. deltaTime ile Zaman Tabanlı Hareket

Hızı saniye başına piksel (pixels per second) olarak tanımlamak yaygın bir yöntemdir. Örneğin top saniyede 120 piksel sağa gitsin.

Kritik birim: p5.js’te deltaTime milisaniyedir (ms), saniye değil. 1 saniye = 1000 ms olduğu için formüle sokmadan önce saniyeye çevrilir:

dtSaniye = deltaTime / 1000          // ör. 16.7 / 1000 ≈ 0.0167 skonumDegisimi = HIZ * dtSaniye       // ör. 120 * 0.0167 ≈ 2 px bu frame'de

Tek satırda yazımı: HIZ * deltaTime / 1000 — / 1000 “ms → saniye” adımıdır; hız birimi (piksel/saniye) ile çarpmak için şarttır.

Tablo 2.

60 FPS'te frame başına ~2 piksel, 30 FPS'te frame başına ~4 piksel olur; saniyede toplam yine ~120 piksel kalır.

Birim özeti: HIZ → piksel/saniye; deltaTime / 1000 → saniye; çarpım → piksel. Frame süresi kısalınca (FPS yüksek) frame başına eklenen piksel azalır, frame sayısı artar; süre uzayınca tersi olur — saniyedeki toplam aynı kalır. Bu, deltaTime hareketinin frame hızından bağımsız olmasının temelidir.

Okunabilir alışkanlık:

let dt = deltaTime / 1000; // bir kez saniyeye çevirtopX = topX + HIZ * dt;

Kod bloğu: Aynı top — deltaTime ile hareket.

let topX = 50;let topY = 150;const TOP_YARICAP = 25;const HIZ = 120; // piksel / saniye function setup() {  createCanvas(500, 300);  noStroke();  frameRate(60);} function draw() {  background(30, 35, 50);   let dt = deltaTime / 1000; // ms → saniye  topX = topX + HIZ * dt;   // HIZ * deltaTime / 1000 ile aynı   if (topX > width + TOP_YARICAP) {    topX = -TOP_YARICAP;  }   fill(255, 200, 80);  ellipse(topX, topY, TOP_YARICAP * 2, TOP_YARICAP * 2);   fill(255);  textSize(14);  textAlign(LEFT, TOP);  text("FPS: " + nf(frameRate(), 0, 1), 10, 10);}

HIZ * deltaTime / 1000 tek satırda da yazılabilir; önce dt almak birimi görünür kılar.

let dt = min(deltaTime, 50) / 1000;topX = topX + HIZ * dt;

Tek frame'de en fazla 50 ms sayılır; aksi halde top bir anda ekrandan fırlayabilir. Bu kitabın basit örneklerinde doğrudan deltaTime yeterlidir; tarayıcı sekmesi arka planda uzun süre kalırsa dönüşte ani sıçrama gözlemlenebilir — bu beklenen davranıştır.

Karşılaştırma tablosu (HIZ = 120, yaklaşık değerler):

Tablo 3.

1.3. Hareketli Top Örneği

Aşağıdaki sketch, yatay hareketin yanı sıra dikey salınım ekler; sin() önceki bölümlerde tanıtılmıştır. Hareket güncellemesi deltaTime ile yapılır; çizim aynı draw() içinde kalır.

Oyun kuralları (basit demo):

• Top sürekli sağa hareket eder; tuval dışına çıkınca soldan tekrar girer.
• Dikey konum sinüs eğrisiyle salınır.
• Ekranda anlık FPS gösterilir.

let topX = 0;const TOP_YARICAP = 22;const HIZ_X = 150;        // yatay: piksel / saniyeconst SALINIM_GENISLIGI = 40;const SALINIM_HIZI = 2;   // salınım faz hızı (radyan/saniye yaklaşık kullanım) let zaman = 0; // birikimli saniye (salınım fazı için) function setup() {  createCanvas(560, 320);  noStroke();  frameRate(60);} function draw() {  background(25, 32, 48);   let dtSaniye = deltaTime / 1000;  topX = topX + HIZ_X * dtSaniye;  zaman = zaman + dtSaniye;   if (topX > width + TOP_YARICAP) {    topX = -TOP_YARICAP;  }   let topY = height / 2 + sin(zaman * SALINIM_HIZI) * SALINIM_GENISLIGI;   fill(255, 190, 70);  ellipse(topX, topY, TOP_YARICAP * 2, TOP_YARICAP * 2);   fill(220);  textSize(14);  textAlign(LEFT, TOP);  text("FPS: " + nf(frameRate(), 0, 1), 12, 12);  text("deltaTime: " + nf(deltaTime, 0, 1) + " ms", 12, 32);}

Bu örnekte zaman değişkeni her frame'de dtSaniye kadar artırılarak birikimli bir saat gibi çalışır; sin(zaman * SALINIM_HIZI) ifadesi bu saate göre −1 ile +1 arasında salınan bir değer üretir ve SALINIM_GENISLIGI ile çarpılarak piksel cinsinden dikey ofsete dönüştürülür. zaman frame sayısına değil geçen gerçek süreye bağlı olduğu için, salınımın hızı da FPS'ten bağımsızdır — tıpkı yatay harekette olduğu gibi. Eğer bu değişken yerine frameCount (önceki bölümlerde tanıtılan, her frame bir artan sayaç) kullanılsaydı, salınım da frame hızına bağımlı hâle gelir ve yukarıda anlatılan tutarsızlık dikey eksende tekrarlanırdı.

setup() içinde frameRate(30) denendiğinde topun yatay hızı gözle aynı kalmalı; yalnızca hareketin akıcılığı (frame sayısı) değişir. Bu, deltaTime kullanımının amacını doğrular.

Deney önerisi: Aynı sketch'te topX = topX + 5 satırını geçici olarak geri getirin; frameRate(60) ve frameRate(30) arasında topun saniyede kat ettiği yolu gözlemleyin. Ardından HIZ * deltaTime / 1000 formülüne dönün — fark belirginleşir. Bu karşılaştırma, oyun geliştirmede «neden deltaTime?» sorusunun pratik yanıtıdır.

Pekiştirme: kavramı mini senaryoya bağlama

1. Veri: Hangi değişkenler durumu tutuyor?
2. Güncelleme: Her frame veya olayda ne değişiyor?
3. Çizim: Görünenler hangi alanlardan geliyor?
4. Kural: Oyuncu eylemi hangi koşulla kabul/red?

Eksik adımı (sınır, başlangıç değeri, tek seferlik olay) şimdi tamamlamak, sonra büyük sketch içinde aramaktan kolaydır.

Özet

Sabit x += n FPS’e bağımlıdır; deltaTime ile çarpılan hız ise zamana bağlıdır. Birimler önemlidir: deltaTime milisaniye olduğu için çoğu örnekte 1000’e bölünür. Çok büyük deltaTime (sekme sonrası) teleporta yol açmasın diye üst sınır (clamp) düşünülebilir.

Zaman tabanlı hareket, çarpışma ve klavye ile birleşince mini oyunlar farklı cihazlarda tutarlı oynanır. Bu ana başlık Temel Kavramlar kitabında animasyon taşınabilirliğinin anahtarını verir.

Değişikliğin görünür sonucu, sayıların anlamının değişmesidir. Sabit adım yazımında 5 değeri «her frame beş piksel» demektir ve gerçek hız donanıma göre oynar; zaman tabanlı yazımda aynı hız 300 gibi bir değerle «saniyede üç yüz piksel» olarak ifade edilir. Bu nedenle mevcut bir sketch zaman tabanlı hâle getirilirken bütün hız sabitlerinin yeniden ölçeklenmesi gerekir. Aynı çarpan, hız dışındaki zamana bağlı büyüklüklere de uygulanır: sayaçlar, geri sayımlar ve ömür değerleri de saniye cinsinden tutulur.

Ölçüt basittir: aynı sketch farklı FPS değerlerinde çalıştırıldığında topun tuvali kat etme süresi değişmiyorsa hareket zaman tabanlıdır. Değişiyorsa bir yerde frame sayısına bağlı bir güncelleme kalmış demektir. Aynı ölçüt, hareketin yanı sıra animasyon adımları ve düşman üretim aralıkları için de geçerlidir; zamana bağlanmamış tek bir sayaç bile oyunun temposunu donanıma bağımlı kılar.

Neler Öğrendik?

Soru 1 deltaTime tipik olarak neyi verir?

Soru 2 x += hiz * (deltaTime/1000) neden tercih edilir?

Soru 3 Frame başına sabit piksel eklemenin riski nedir?

Soru 4 Hız değişkenini “birim / saniye” tutmanın yararı nedir?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: A

• Çözüm: p5.js deltaTime ms cinsindendir.
• İlgili Konu: 1.2. deltaTime

Soru 2: Doğru Cevap: A

• Çözüm: Zaman tabanlı entegrasyon.
• İlgili Konu: 1.2. Zaman Tabanlı Hareket

Soru 3: Doğru Cevap: A

• Çözüm: FPS düşünce sabit adım yavaşlar.
• İlgili Konu: 1.1. Frame Başına Hareketin Sorunu

Soru 4: Doğru Cevap: A

• Çözüm: Birim tutarlılığı okunabilirlik sağlar.
• İlgili Konu: 1.3. Hareketli Top Örneği

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.
• Nystrom, R. (2014). Game Programming Patterns. gameprogrammingpatterns.com — Game Loop bölümü.
• Nystrom, R. (2014). Game Programming Patterns. Genever Benning. https://gameprogrammingpatterns.com/
• Nystrom, R. (2014). Game loop. In Game Programming Patterns. https://gameprogrammingpatterns.com/game-loop.html
• p5.js Foundation. (n.d.). deltaTime. p5.js Reference. https://p5js.org/reference/p5/deltaTime/
• p5.js Foundation. (n.d.). frameRate. p5.js Reference. https://p5js.org/reference/p5/frameRate/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js

Ana Başlık 2. Dizi Temelleri: Tanım, Erişim ve push/pop

Amaç: Dizi kavramını, indeksle erişimi ve push/pop/length işlemlerini oyun verisi bağlamında öğretmek.

Öğrenme Çıktıları:

• Diziyi sıralı koleksiyon olarak tanımlar.
• İndeks ile eleman okur ve yazar.
• for ile dizi dolaşır.
• push, pop ve length kullanımını uygular.

Anahtar Sözcükler: dizi, indeks, length, push, pop, paralel dizi

Giriş

Şimdiye kadar çoğu örnekte tekil değişkenler yeterliydi: bir x, bir skor, bir hedef. Oyunlar büyüdükçe aynı türden birçok değer birlikte yönetilir — birden fazla balon konumu, birden fazla engel, tahmin geçmişi. Bunları x1, x2, x3 diye çoğaltmak bakımı bozar; dizi (array) aynı türdeki değerleri tek isim altında, sırayla tutar.

JavaScript’te dizi köşeli parantezle yazılır; elemanlar 0’dan başlayan indekslerle okunur. length uzunluğu verir; push sona ekler, pop sondan çıkarır. Dolaşma çoğu zaman for ile yapılır. Bu ana başlık dizinin sözdizimini ve temel mutasyonlarını kurar; sabit kapasiteli yığın benzeri kullanım ve paralel dizilerle mini sahne 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.

2.1. Dizi Kavramı ve Tanımlama

let skorlar = [10, 25, 40];           // Sayı dizisilet renkler = [255, 120, 80];         // RGB bileşenlerilet mesajlar = ["dogru", "yuksek", "dusuk"]; // Metin dizisilet bosDizi = [];                     // Boş dizi

Tablo 1.

let a = [1];a[3] = 44;// a.length → 4; a[1] ve a[2] boş (empty); okununca undefined

Konsolda çoğu zaman Array(4) [ 1, <2 empty slots>, 44 ] benzeri görünür. Bu, bilerek yazılan BOS / -1 işaretinden farklıdır: empty slot’ta hücre hiç doldurulmamıştır. push veya 0, 1, 2… sırasıyla atama boşluk bırakmaz; oyun listelerinde bu delikleri oluşturmayın.

Görsel 1 her elemanın indeks numarasını (0, 1, 2) ve skorlar[i] erişimini kutularla gösterir. Dördüncü kutu yoktur — skorlar[3] tanımsızdır.

Dizi okuma izlemesi: let renkler = [255, 120, 80]; tanımı için indeks ve değer eşleşmesi şöyledir:

Tablo 2.

fill(renkler[0], renkler[1], renkler[2]) ifadesi bu üç bileşeni sırayla okuyarak fill(255, 120, 80) ile aynı sonucu verir; dizi, ilgili renk bileşenlerini tek isim altında taşımayı sağlar.

2.2. Dizi Elemanlarına Erişim, Dolaşma ve Paralel Diziler

Eleman okuma ve yazma:

let tahminler = [7, 12, 5];tahminler[0] = 8;        // İlk elemanı 8 yaplet ortanca = tahminler[1]; // 12

Kod bloğu: for döngüsüyle dizi elemanlarını ekrana yazma.

let tahminler = [7, 12, 5, 9]; function setup() {  createCanvas(400, 300);} function draw() {  background(240);  fill(30);  textSize(18);  textAlign(LEFT, TOP);   for (let i = 0; i < tahminler.length; i = i + 1) {    let metin = (i + 1) + ". tahmin: " + tahminler[i];    text(metin, 20, 20 + i * 28);  }}

i < tahminler.length koşulu, indeksin dizi sınırları içinde kalmasını sağlar. length eleman sayısını verdiği için son geçerli indeks length - 1'dir.

Tablo 3.

Dizideki tek bir eleman güncellenebilir: tahminler[2] = 99; yalnızca üçüncü elemanı değiştirir. Son geçerli indeks dizi.length - 1'dir; bu sınırın dışına yazmak beklenmedik sonuçlara yol açabilir.

Paralel diziler — aynı indeks, bir nesne

Tek bir daire için x ve y iki değişken yeter. Ekranda birden fazla hedef varsa her biri için X ve Y gerekir. Bunları iki dizide, aynı indekste tutmak pratik bir çözümdür: hedefXListesi[i] ile hedefYListesi[i] aynı hedefin koordinatlarıdır. Bu modele paralel dizi denir. (İleride nesne veya 2B dizi alternatifleri gelecek; şimdilik paralel dizi yeterlidir.)

Hatırlatma — ellipse: ellipse(x, y, genislik, yukseklik) merkez (x, y) olan bir elips çizer. Genişlik ve yükseklik çaptır (yarıçapın iki katı). Daire için genişlik = yükseklik; oval için ikisi farklıdır. circle(x, y, cap) ise yalnızca daire içindir.

Kod bloğu: Konum listesinden birden fazla hedef çizimi.

let hedefXListesi = [80, 200, 320];let hedefYListesi = [100, 150, 200];const YARICAP = 25; function setup() {  createCanvas(400, 300);  noStroke();} function draw() {  background(25, 30, 45);  fill(255, 200, 50);   for (let i = 0; i < hedefXListesi.length; i = i + 1) {    ellipse(hedefXListesi[i], hedefYListesi[i], YARICAP * 2, YARICAP * 2);  }}

Aynı i hem X hem Y’yi okur; döngü bir turda bir hedef çizer.

Görsel 2 hedefXListesi[i] ve hedefYListesi[i] çiftinin tuvalde aynı hedef dairesine karşılık geldiğini gösterir.

Sıra Sizde: Aşağıdaki sahnede biz (oyuncu) ve düşmanlar var. Bizim konumumuz tek bir noktadır — bizX, bizY iki değer yeter, dizi gerekmez. Ama düşmanlar çok olduğu için konumları paralel dizilerde tutulur: dusmanX[] ve dusmanY[]. Aynı indeks bir düşmanı verir: (dusmanX[i], dusmanY[i]). Boş / ölü slotta hem X hem Y -1’dir; döngüde atlanır (sahnede çizilmez).

Kod 6.

javascriptKopyala

let bizX = 200, bizY = 150;let dusmanX = [60, 340, -1, 260, 150];let dusmanY = [60,  80, -1, 240, 200]; // [2] ikisi de -1 → yok

Kağıda yazın:

1. dusmanX.length kaçtır? Sahnede gerçekten kaç düşman var (-1 slotunu saymayın)?
2. (dusmanX[0], dusmanY[0]) neresi? İndeks [2] neden sahnede yok?
3. Bize en yakın düşman hangi indeks? for ile -1 olanları atlayıp dist(bizX, bizY, dusmanX[i], dusmanY[i]) (veya uzaklık karesi) ile en küçüğü bulun.

2.3. push(), pop() ve length

Tablo 4.

Görsel 4 push(9) öncesi ve sonrası diziyi yan yana gösterir; altta for döngüsünün her indekste hangi değeri okuduğu özetlenir.

Kod bloğu: Tahmin geçmişine ekleme.

let tahminGecmisi = []; function mousePressed() {  let yeniTahmin = floor(random(1, 11)); // 1–10 arası tam sayı  tahminGecmisi.push(yeniTahmin);}

floor() p5.js'te ondalıklı sayıyı aşağı yuvarlayarak tam sayı üretir; random(1, 11) 1 ile 11 arasında (11 hariç) değer verir.

pop() iz örneği: let liste = [10, 20, 42];

Tablo 5.

Son satırda dizi boşken pop() güvenli çalışır ancak anlamlı değer vermez; oyun mantığında «son tahmini geri al» gibi özellikler eklenecekse önce length > 0 kontrolü yapılır.

Yığın, programlamada temel bir yapıdır: fonksiyon çağrıları makinede bir çağrı yığını üzerinde tutulur; derleyiciler ve yorumlayıcılar bu modeli kullanır. Oyun geliştirmede de sık görülür — birkaç tanıdık örnek:

Tablo 6.

Aşağıdaki mini kule örneğinde GERİ AL ile son kuleyi kaldırmak da aynı fikirdir: geçmiş bir yığındır.

Kod bloğu: Dizide en büyük değeri bulma (skor listesi, can değerleri…).

function enBuyuk(degerler) {  if (degerler.length === 0) {    return 0;  }  let maks = degerler[0];  for (let i = 1; i < degerler.length; i = i + 1) {    if (degerler[i] > maks) {      maks = degerler[i];    }  }  return maks;}

enBuyuk(skorlar) çağrısı listedeki en yüksek skoru verir; for + karşılaştırma örüntüsü birçok özet istatistikte tekrarlanır.

Kod bloğu: Mini kule savunma — haritaya tıkla, kule kur (push); geri al henüz yok (Sıra Sizde’de pop).

let kuleX = [];let kuleY = []; function setup() {  createCanvas(400, 300);} function draw() {  background(210, 230, 205); // yesil harita   // Once buton — metinler ustune binmesin diye saginda / altinda  fill(150, 60, 60);  rect(0, 0, 72, 36);  fill(255);  textAlign(CENTER, CENTER);  textSize(12);  text("GERİ AL", 36, 18);   fill(40);  textSize(13);  textAlign(LEFT, TOP);  text("Haritaya tıkla: kule kur", 80, 6);  text("GERİ AL: son kuleyi kaldır", 80, 22);  text("Kule sayısı: " + kuleX.length, 12, 44);   for (let i = 0; i < kuleX.length; i = i + 1) {    fill(70, 110, 200);    circle(kuleX[i], kuleY[i], 26); // kule govdesi    fill(255);    circle(kuleX[i], kuleY[i], 10); // namlu  }} function mousePressed() {  if (mouseX < 72 && mouseY < 36) {    // GERİ AL — Sıra Sizde'de pop eklenecek  }  kuleX.push(mouseX);  kuleY.push(mouseY);}

Her tıklama harita konumunu her iki diziye push eder; kuleler ekranda birikir. Sol üst GERİ AL kutusuna tıklamak şu hâliyle kaldırma yapmaz; dahası tıklama alttaki push satırına da ulaştığı için o noktaya yeni bir kule eklenir. Kaldırma mantığı ve bu istenmeyen ekleme Sıra Sizde’de birlikte düzeltilir.

Özet

Dizi, köşeli parantezle tanımlanan ve indeksle erişilen sıralı bir veri koleksiyonudur; let sayilar = [10, 20, 30] üç elemanlı bir listedir. İndeksler sıfırdan başladığı için sayilar[0] ilk elemanı verir ve son geçerli indeks length - 1 olur; bu sınırın dışına çıkan bir okuma undefined üretir. Dolaşma döngüsünün koşulu bu yüzden çoğu zaman i < dizi.length biçiminde yazılır. Var olmayan bir indekse yazmak diziyi boş hücrelerle uzatabilir; bu boşluklar, oyun listelerinde bilinçli olarak konan işaret değerlerinden farklıdır.

Aynı türden birden çok nesnenin özellikleri paralel dizilerde tutulabilir: iki ayrı listede aynı indeks aynı düşmanın x ve y koordinatını gösterir, kullanılmayan hücre ise bir işaret değeriyle atlanır. Tek bir for döngüsü her turda ilgili indeksin iki değerini birden okuyarak sahnedeki nesneleri çizer. Bu model, ileride gelecek nesne ve iki boyutlu dizi alternatiflerinin ön adımıdır.

push diziyi sonundan büyütür, pop son elemanı çıkarıp değerini döndürür ve length her iki işlemde de güncellenir; boş dizide pop çağrısı undefined verdiği için önce uzunluk denetlenir. İkisi birlikte kullanıldığında dizi, son giren ilk çıkar kuralıyla çalışan bir yığın gibi davranır; geri alma, menü katmanları ve kart destesi bu davranışın tanıdık örnekleridir. Sabit kapasiteli kullanım ve mini sahne örneği bir sonraki ana başlıkta bu temele dayanır.

Neler Öğrendik?

Soru 1 JavaScript dizilerinde ilk elemanın indeksi nedir?

Soru 2 dizi.push(5) ne yapar?

Soru 3 for (let i = 0; i < dizi.length; i++) neden yaygındır?

Soru 4 Paralel diziler ne anlama gelir?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: JS dizileri 0 tabanlıdır.
• İlgili Konu: 2.1. Dizi Kavramı ve Tanımlama

Soru 2: Doğru Cevap: B

• Çözüm: push sona ekler.
• İlgili Konu: 2.3. push(), pop() ve length

Soru 3: Doğru Cevap: A

• Çözüm: length döngü üst sınırıdır.
• İlgili Konu: 2.2. Dizi Elemanlarına Erişim, Dolaşma ve Paralel Diziler

Soru 4: Doğru Cevap: A

• Çözüm: Aynı i indeksi aynı varlığı bağlar.
• İlgili Konu: 2.2. Dizi Elemanlarına Erişim, Dolaşma ve Paralel Diziler

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.). Array. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
• p5.js Foundation. (n.d.). floor. p5.js Reference. https://p5js.org/reference/p5/floor/
• p5.js Foundation. (n.d.). keyPressed. p5.js Reference. https://p5js.org/reference/p5/keyPressed/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js

Ana Başlık 3. Sabit Kapasite ve Paralel Dizilerle Mini Sahne

Amaç: push/pop olmadan sabit kapasiteli dizi kullanımını ve paralel dizilerle çoklu nesne sahnesini öğretmek.

Öğrenme Çıktıları:

• Sabit kapasite + tepe indeksi modelini açıklar.
• Paralel dizilerle birden fazla nesneyi günceller.
• Mini sahnede dizi tabanlı animasyon kurar.
• Dizi verisini oyun kuralına (ör. tahmin / balon) bağlar.

Anahtar Sözcükler: sabit kapasite, tepe, paralel dizi, mini sahne, çoklu nesne

Giriş

Dizi temelleri ve push/pop bilindikten sonra iki pratik yol ayrımı belirir. Birincisi dinamik liste: eleman gelince uzar, gidince kısalır. İkincisi sabit kapasite: dizi boyutu baştan ayrılır, “kaç eleman canlı?” bilgisi ayrı bir tepe/sayaçta tutulur. Bazı oyun iskeletlerinde ikinci model, bellek ve döngü sınırını öngörülebilir kılar.

Paralel diziler aynı indekste konum, hız veya renk gibi özellikleri birlikte taşır. Bu ana başlık sabit kapasite fikrini somutlaştırır ve paralel dizilerle küçük bir sahne kurar. Sayı tahmin veya balon örneği, dizinin yalnızca veri deposu değil oyun kuralının taşıyıcısı olduğunu gösterir. Sonraki bölümlerdeki klavye ve çarpışma, bu çoklu nesne alışkanlığının üzerine binecektir. 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.

3.1. Sabit kapasite: diziyi push / pop olmadan yığın gibi kullanmak

Motivasyon: push ve pop hazır metotlardır; onları bilmek işi kısaltır. Ama yığın mantığı metotlara bağlı değildir: «sona ekle / sondan çıkar» davranışını indeks ve atama ile de kurabilirsiniz. Bu, hem «metotları henüz bilmiyorum» durumunda bir çıkış yolu sunar hem de dizinin nasıl çalıştığını (slot, indeks, doluluk) daha görünür kılar. Birçok dilde ve özellikle makineye yakın ortamlarda hazır push/pop yoktur; sabit boyutta dizi + tepe indeksi klasik çözümdür.

push / pop dizinin gerçek uzunluğunu değiştirir. Alternatif yaklaşım: ihtiyaç duyulacak en fazla eleman sayısını (MAKS) baştan belirlemek; diziyi o uzunlukta oluşturup boş slotları özel bir değerle (BOS, -1, "" …) kodlamak; ekleme ve çıkarmayı push() / pop() çağırmadan slotlara yazarak yapmak. Böylece dizi yığın (stack) gibi kullanılır: length sabit kalır, doluluk bir tepe indeksiyle (veya BOS tarayarak) izlenir.

Fikir:

1. Üst sınırı sabitle (MAKS).
2. Diziyi MAKS uzunluğunda BOS ile doldur (geçerli veriden ayırt edilebilir olmalı).
3. «Ekle» (push benzeri) = yigin[tepe] = deger; tepe++ — push() yok.
4. «Çıkar» (pop benzeri) = tepe--; değeri oku; slota BOS yaz — pop() yok.

const MAKS = 5;const BOS = -1; // geçerli tahmin 1–10 olduğu için -1 «boş» demektir let yigin = [BOS, BOS, BOS, BOS, BOS]; // length her zaman 5let tepe = 0; function yiginEkle(deger) {  if (tepe >= MAKS) {    return false; // yer yok  }  yigin[tepe] = deger;  tepe = tepe + 1;  return true;} function yiginCikar() {  if (tepe === 0) {    return BOS; // boş  }  tepe = tepe - 1;  let eski = yigin[tepe];  yigin[tepe] = BOS;  return eski;}

Tablo 1.

Bu modelde yigin.length her zaman MAKS kalır; dolu eleman sayısı tepe ile aynıdır. Ekrana yazarken yalnızca dolu slotlar çizilir:

for (let i = 0; i < tepe; i = i + 1) {  text(yigin[i], 20, 40 + i * 20);}

tepe tutmak istemezseniz «ilk BOS slota yaz / sondan ilk dolu slotu boşalt» diye de tarayabilirsiniz; sonuç aynı fikirdir, yalnızca doluluk hesabı döngüyle yapılır.

Tablo 2.

Kule kurma ve skor geçmişi gibi örnekler push / pop ile yazılır (kısa ve okunaklıdır). Sabit slot / yığın modeli, metot bilmeden yığın kurmak, «maksimum N yer» kuralını gömmek veya sabit boyutlu dizi zorunluluğu olan dilleri anlamak için bilinmelidir.

Ne isteniyor? (kısa): push / pop kullanmadan «aynı işi başka sözdizimiyle yaz» demek değil. Yukarıdaki sabit slot + tepe modeli zaten yiginEkle / yiginCikar ile duruyor. Sıra Sizde’de bu modeli çalışan bir mini sketch’te göreceksiniz; sizin göreviniz listenin görselini Görsel 1’deki gibi slot kutularına çevirmek.

Kod bloğu: Mini envanter — tıkla ekle / sol üstten çıkar (push/pop yok).

const MAKS = 5;const BOS = ""; let envanter = [BOS, BOS, BOS, BOS, BOS]; // length her zaman 5let tepe = 0;let esyalar = ["kilic", "iksir", "anahtar", "kalkan", "harita"]; function setup() {  createCanvas(520, 200);  textAlign(CENTER, CENTER);} function draw() {  background(245);  fill(40);  textSize(14);  textAlign(LEFT, TOP);  text("Sol tık: eşya ekle | Sol üst kutu: çıkar | length = " + envanter.length, 12, 10);  text("tepe = " + tepe, 12, 32);   // Sol üst: çıkar  fill(120, 80, 80);  rect(0, 160, 40, 40);  fill(255);  textAlign(CENTER, CENTER);  textSize(11);  text("ÇIKAR", 20, 180);   // Şimdilik yalnızca metin listesi — Sıra Sizde'de bunu Görsel 1 gibi slotlara çevireceksiniz  textAlign(LEFT, TOP);  textSize(14);  fill(30);  for (let i = 0; i < MAKS; i = i + 1) {    let yazi = envanter[i];    if (yazi === BOS) {      yazi = "(boş)";    }    text("[" + i + "] " + yazi, 60, 70 + i * 20);  }} function mousePressed() {  if (mouseX < 40 && mouseY > 160) {    yiginCikar();    return;  }  // Sıradaki eşyayı ekle (döngüsel)  let ad = esyalar[tepe % esyalar.length];  yiginEkle(ad);} function yiginEkle(deger) {  if (tepe >= MAKS) {    return false;  }  envanter[tepe] = deger;  tepe = tepe + 1;  return true;} function yiginCikar() {  if (tepe === 0) {    return BOS;  }  tepe = tepe - 1;  let eski = envanter[tepe];  envanter[tepe] = BOS;  return eski;}

Sketch’i çalıştırın: birkaç kez tıklayın, ÇIKAR ile geri alın. Konsolda veya ekranda envanter.length’in hep 5 kaldığını görün — push/pop olmadığı için dizi büyüyüp küçülmez; doluluk tepe ile izlenir.

3.2. Paralel dizilerle mini sahne — balonlar

2.2’de paralel diziler ve ellipse hatırlatması yapıldı; 2.3’te push / pop ile liste büyüyüp küçüldü. Bu alt başlıkta ikisini birleştirip oval balon sahnesi kurulur: konum için balonX / balonY, boyut için ayrı balonRX / balonRY (yatay ve dikey yarıçap) — hepsi aynı indekste.

Hatırlatma: ellipse(x, y, genislik, yukseklik) — genişlik = 2 * rx, yükseklik = 2 * ry. Daire istiyorsanız rx === ry (veya circle); Görsel 2’deki gibi oval balonlar için rx ile ry farklıdır.

Sık karşılaşılan dizi hataları:

Tablo 3.

Sıra Sizde: Paralel dizilerle bir balon sahnesi çizin. Hedef görünüm:

İstenenler:

1. balonX, balonY, balonRX, balonRY (isteğe bağlı renk dizisi) — aynı indekste bir balon.
2. for içinde ellipse(balonX[i], balonY[i], balonRX[i] * 2, balonRY[i] * 2) (ip için kısa bir line bonus).
3. Kâğıtta: yalnızca balonX.push(...) yapıp diğer üç diziyi unutan bir arkadaşın ekranında ne bozulur? Bir cümleyle yazın.

// iskelet — indeksi siz bulun, splice / push siz yazınlet vurus = -1;for (let i = 0; i < balonX.length; i = i + 1) {  if (noktaElipsIcindeMi(mouseX, mouseY, balonX[i], balonY[i], balonRX[i], balonRY[i])) {    vurus = i;    break;  }}if (vurus >= 0) {  // tüm paralel dizilerde splice(vurus, 1); skor++} else {  let b = yeniBalonOlustur(balonX, balonY, balonRX, balonRY, width, height);  if (b !== null) {    // b[0]..b[3] → push; renk için uyumluBalonRengi()  }}

Özet

Sabit kapasitede dizi, baştan istenen sayıda eleman içerecek biçimde (ör. [BOS, BOS, BOS, BOS]) tanımlanır; canlı eleman sayısı tepe benzeri bir değişkenle izlenir. Ekleme tepeye yazar ve tepeyi artırır; silme tepeyi azaltır — push/pop yerine indeks aritmetiği vardır. Bu model, nesne havuzu düşüncesine de köprüdür.

Paralel x[], y[], r[] dizileri aynı i ile bir balonu veya hedefi tanımlar. draw içinde i < tepe (veya length) kadar dolaşıp güncelleme ve çizim yapılır. Mini sahne, diziyi görünür oyun davranışına bağlar: çoklu konum, basit kural, okunabilir döngü. Bu alışkanlık olmadan sonraki çarpışma ve klavye kontrollü çoklu varlıklar zorlaşır.

İki modelin maliyeti farklıdır. Dinamik listede silme işlemi kalan elemanları kaydırdığı için indeksler değişir; döngü içinde eleman çıkarmak, atlanan eleman gibi ince hatalara yol açar. Sabit kapasitede ise dizi hiç küçülmez, yalnızca tepe değeri oynar; bu yüzden indeksler kararlıdır ve döngü sınırı her frame'de aynı biçimde okunur. Kapasitenin dolması ayrı bir karardır: yeni eleman ya reddedilir ya da en eskisinin üzerine yazılır. Bu seçim, oyunun kuralına göre baştan belirlenir.

Neler Öğrendik?

Soru 1 Sabit kapasite modelinde tepe tipik olarak neyi tutar?

Soru 2 Paralel x ve y dizilerinde aynı indeks ne anlama gelir?

Soru 3 Mini sahnede diziyi draw içinde dolaşmanın amacı nedir?

Soru 4 push/pop yerine sabit kapasite seçmek ne sağlar?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: tepe canlı aralığı işaret eder.
• İlgili Konu: 3.1. Sabit kapasite

Soru 2: Doğru Cevap: B

• Çözüm: Aynı i aynı nesneye aittir.
• İlgili Konu: 3.2. Paralel dizilerle mini sahne

Soru 3: Doğru Cevap: A

• Çözüm: Frame başına tüm canlılar işlenir.
• İlgili Konu: 3.2. Paralel dizilerle mini sahne

Soru 4: Doğru Cevap: A

• Çözüm: Kapasite baştan bellidir.
• İlgili Konu: 3.1. Sabit kapasite

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.). Array. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
• p5.js Foundation. (n.d.). floor. p5.js Reference. https://p5js.org/reference/p5/floor/
• p5.js Foundation. (n.d.). keyPressed. p5.js Reference. https://p5js.org/reference/p5/keyPressed/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js

Ana Başlık 4. Klavye Girdisi

Amaç: Klavye olaylarını (keyIsDown, key, keyPressed()) öğreterek oyuncu kontrollü hareket sağlamak.

Öğrenme Çıktıları:

• Klavye girdisinin oyun döngüsündeki yerini açıklar.
• keyIsDown() ile sürekli basılı tuş kontrolü yapar.
• keyPressed() ile tek seferlik tuş olayını yakalar.
• key ve keyCode değişkenlerini ayırt eder; tuş kodlarının ASCII/Unicode ile ilişkisini açıklar.
• deltaTime ile klavye kontrollü hareket kodlar.

Anahtar Sözcükler: klavye girdisi, keyIsDown, keyPressed, key, keyCode, oyuncu kontrolü, ASCII, Unicode

Giriş

Önceki ana başlıkta top deltaTime ile kendi kendine hareket ediyordu; oyuncu yalnızca izliyordu. Oyunlarda karakter, araç veya imleç çoğu zaman klavye (ve fare) ile yönlendirilir. Klavyenin en tanıdık kullanımı tek seferlik olaydır: bir tuşa basıldığı anda tek bir iş yapılır, örneğin R ile tur yeniden başlatılır. Gerçek zamanlı kontrolde ise tuş basılı tutulduğu sürece hareket devam etmelidir: WASD veya ok tuşlarıyla kareyi gezdirmek buna tipik örnektir.

p5.js, fare girdisinde olduğu gibi klavye için de iki katman sunar: draw() içinde her frame okunan durum (keyIsDown) ve tuşa basıldığı anda bir kez çalışan olay fonksiyonu (keyPressed). Bu ana başlıkta her iki yöntem sistematik biçimde ele alınacak; hareket deltaTime ile birleştirilerek önceki ana başlıktaki frame bağımsız hız korunacaktır.

Bu iki katmanlı yaklaşım, klavyenin fiziksel doğasından kaynaklanır: bir tuş, oyuncu parmağını kaldırana kadar "basılı" kalır ve bu süre boyunca aynı tuşa ait sayısız draw() çağrısı gerçekleşebilir. Programın bu süreklilikten haberdar olması için her frame'de tuşun anlık durumunu sorgulaması gerekir; bu da keyIsDown() fonksiyonunun görevidir. Buna karşılık "tuşa basıldı" bilgisinin yalnızca bir kez işlenmesi istenen durumlar da vardır — bir menüde seçim yapmak, bir mermi ateşlemek gibi; bu tür senaryolarda p5.js'in tuş basışını olay olarak bildirdiği keyPressed() daha uygundur. İki katmanı doğru yerde kullanmak, klavye kontrollü bir oyunun hem tepkisel hem öngörülebilir olmasını sağlar.

Türkiye'de okul laboratuvarlarında QWERTY klavye yaygındır; WASD ve ok tuşları birlikte desteklenirse farklı alışkanlıklara sahip oyuncular aynı sketch'i kullanabilir. Tuval odaklıyken tuşlar sketch'e gider — önizleme paneline bir kez tıklamak gerekir; aksi halde girdi tarayıcıya veya editöre yönlenebilir.

4.1. Klavye Olayları ve p5.js Örüntüsü

p5.js'te yerleşik olay fonksiyonları (önceki bölümlerde setup, draw, mousePressed ile tanıtılan örüntü):

Tablo 1.

Fare ile karşılaştırma (önceki bölümler):

Tablo 2.

4.2. keyIsDown ile Sürekli Hareket

Ok tuşları için p5.js sabitleri kullanılabilir: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW. Harf tuşlarında keyIsDown sayı ister: 65 (A), 68 (D).

Kod bloğu: Ok tuşlarıyla yatay hareket — deltaTime ile hız.

let kareX = 200;let kareY = 150;const KARE_BOYUT = 40;const HIZ = 180; // piksel / saniye function setup() {  createCanvas(500, 300);  noStroke();} function draw() {  background(35, 40, 55);   let dt = deltaTime / 1000;   if (keyIsDown(RIGHT_ARROW)) {    kareX = kareX + HIZ * dt;  }  if (keyIsDown(LEFT_ARROW)) {    kareX = kareX - HIZ * dt;  }   fill(100, 200, 255);  rect(kareX, kareY, KARE_BOYUT, KARE_BOYUT);}

Birden fazla if kullanıldığında koşullar bağımsızdır; çapraz hareket (ör. sağ + yukarı) aynı frame'de birleşebilir. else if yalnızca tek yön seçilecekse uygundur.

Çapraz hareket ve hız: Sağ ve yukarı aynı anda basılıyken kare hem X hem Y değişir; frame başına kat edilen mesafe HIZ * dt ile her eksende ayrı uygulanır. Köşegen hareket biraz daha hızlı görünebilir (Pisagor bağıntısı); rekabetçi oyunlarda hız normalize edilir. Örneklerde basit bağımsız if blokları kullanılır; çapraz hızı eşitlemek istenirse X ve Y bileşenleri birim vektöre göre ölçeklenip (normalize edilip) tekrar HIZ ile çarpılır.

Tablo 3.

Bu hata sık görülür çünkü keyPressed() sezgisel olarak "tuşla ilgili her şeyin buraya yazılacağı" fonksiyon gibi algılanabilir. Ancak keyPressed() yalnızca tuşa basılma anında bir kez tetiklenir; oyuncu tuşu birkaç saniye basılı tutsa da fonksiyon gövdesi tek seferlik çalışır. Bu nedenle keyPressed() içine kareX = kareX + HIZ * dt gibi bir satır yazmak, karenin yalnızca her basışta bir kez ve sabit miktarda ilerlemesine yol açar — akıcı hareket değil, adım adım sıçrama görünür. Sürekli hareket her zaman draw() içindeki bir koşulla, yani keyIsDown() ile sağlanmalıdır.

Dikey hareket için UP_ARROW ve DOWN_ARROW aynı örüntüyle eklenir:

  if (keyIsDown(DOWN_ARROW)) {    kareY = kareY + HIZ * dt;  }  if (keyIsDown(UP_ARROW)) {    kareY = kareY - HIZ * dt;  }

4.3. keyPressed ve Tek Seferlik Eylemler

Turu yeniden başlatan R tuşu, keyPressed() ile şu biçimde yazılır:

function keyPressed() {  if (key === "r" || key === "R") {    // turu sıfırla  }}

keyPressed() ile mousePressed() aynı mantığı izler: olay bir kez tetiklenir. Zıplama, tek atış veya menüde seçim gibi "her basışta bir eylem" senaryolarına uygundur.

Kod bloğu: Boşluk tuşuna basınca karenin rengini değiştirme (toggle).

let kareRengi; function setup() {  createCanvas(400, 300);  kareRengi = color(100, 200, 255);} function draw() {  background(30);  fill(kareRengi);  rect(width / 2 - 30, height / 2 - 30, 60, 60);} function keyPressed() {  if (key === " ") {    if (red(kareRengi) > 200) {      kareRengi = color(100, 200, 255);    } else {      kareRengi = color(255, 120, 80);    }  }}

red() p5.js renk bileşenini okur; renk kavramı önceki bölümlerdeki fill(r, g, b) ile uyumludur.

Alternatif olarak draw() içinde keyIsDown ile birlikte bir "önceki durum" bayrağı tutulup tek seferlik eylem simüle edilebilir (tuş bu frame basılı, önceki frame basılı değildi ise eylemi çalıştır). Bu teknik bazı ileri senaryolarda (örneğin aynı frame'de birden çok girdi kaynağını birleştirirken) gerekebilir; ancak ek bir değişken ve karşılaştırma gerektirdiği için kodu karmaşıklaştırır. p5.js'in kendisi bu karşılaştırmayı keyPressed() aracılığıyla otomatik yaptığından, basit ve orta düzey oyunlarda doğrudan keyPressed() tercih edilmelidir.

keyReleased(): Tuş bırakıldığı anda bir kez çalışır. keyPressed() basma anını, keyIsDown() basılı tutmayı, keyReleased() ise bırakma anını yakalar. Örneğin SPACE basılıyken şarj dolup bırakılınca ateş etmek için keyIsDown ile şarj, keyReleased ile ateş ayrılabilir.

Kontrol şeması örneği (uzay gemisi):

Tablo 4.

4.4. key ve keyCode

Bazı tuşların tek karakterle temsil edilmesi zordur veya ok tuşları farklı klavyelerde farklı karakter üretebilir. Bu durumda keyCode kullanılır.

key ve keyCode arasındaki fark, "hangi karakter" ile "hangi fiziksel tuş" sorularının ayrımına dayanır. Harf ve rakam tuşlarında key doğrudan okunabilir bir karakter döndürür ('a', '5'); bu, ekrana metin yazdırma veya karakter karşılaştırma için pratiktir. Ok tuşları, SHIFT, CTRL gibi tuşlarda ise yazdırılabilir bir karakter yoktur — bu tuşlar keyCode üzerinden sayısal bir kimlikle temsil edilir. p5.js, sık kullanılan ok tuşları için LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW adlı sabitleri önceden tanımlayarak bu sayısal kodları ezberlemeyi gereksiz kılar; geliştirici keyCode === 37 yazmak yerine keyCode === LEFT_ARROW yazabilir, kod hem okunur hem hataya daha az açık olur.

37 nereden geliyor? ASCII, Unicode ve tuş kodları

keyCode === 37 yazıldığında 37 «rastgele bir sabit» değildir; bilgisayarların karakter ve tuşları sayılarla temsil etme geleneğinden gelir. «Bu sayı tablonun neresinde?» sorusu için üç katmanı ayırmak yeterlidir.

1. ASCII (American Standard Code for Information Interchange)
Erken bilgisayarlarda harf, rakam ve bazı denetim karakterleri 0–127 aralığında numaralandırıldı. 0–31 denetim kodlarıdır (görünmez); 32–126 yazdırılabilir karakterlerdir. Görsel 1 bu yazdırılabilir aralığı gösterir; renkler rakam, büyük harf ve küçük harf bloklarını ayırır.

Tablo 5.

Harf ve rakam gibi yazdırılabilir tuşlarda key değişkeni doğrudan bu karakteri verir ('A', 'w'). JavaScript’te bir karakterin numarasını görmek için charCodeAt kullanılabilir: 'A'.charCodeAt(0) → 65.

Yazdırılamayan (denetim) karakterler: \n, \t

Görsel 1’de görünmeyen 0–31 aralığı denetim kodlarıdır; ekranda bir «harf» gibi basılmaz, ama programda kaçış dizisi (escape sequence) ile yazılır. Oyun ve arayüz metinlerinde en sık kullanılan ikisi:

Tablo 6.

JavaScript string’inde backslash (\) «sonraki karakter özel anlam taşır» demektir: "Merhaba\nDunya" içinde \n iki karakter (\ ve n) gibi yazılır ama bellekte tek satır-sonu karakterine dönüşür.

p5.js text() bu kaçışları işler; HUD (skor / can) gibi çok satırlı yazılar için \n pratiktir:

function draw() {  background(30);  fill(255);  textSize(18);  textAlign(LEFT, TOP);  text("Skor: 3\nCan: 5", 24, 40);   // iki satır  text("A\tB\tC", 24, 100);            // sekme ile aralık}

Görsel 2 solda string içindeki kaçışları, sağda tuvalde oluşan satır kırılmasını ve sekme boşluğunu gösterir.

2. Unicode
ASCII yalnızca Latin alfabesinin dar bir dilimini kapsar. Unicode, dünyadaki yazı sistemlerini (Türkçe ğ, ş, emoji, vb.) tek bir numara uzayında toplayan daha geniş standarttır. Unicode’un ilk 128 kodu ASCII ile aynıdır; yani 'A' hem ASCII’de hem Unicode’da 65’tir. Bu kitapta oyun girdileri çoğunlukla Latin harf ve ok tuşlarıyla sınırlıdır; yine de metinleri bilgisayarın «harf = sayı» diye sakladığını bilmek, ileride dosya, ağ veya farklı dillerle çalışırken işe yarar.

3. keyCode ve ok tuşları (37, 38, 39, 40)

O zaman 37 nereden geliyor? Tarayıcıların eski klavye API’sinin (p5.js’in keyCode ile yansıttığı) ayrı bir tuş-numara listesinden. Bu liste ASCII tablosu değildir; tesadüfen sol oka 37 denmiştir. Aynı şekilde yukarı 38, sağ 39, aşağı 40’tır:

Tablo 7.

«Ama ASCII 37 = % değil mi?» Evet — ama o başka bir sözlükteki 37’dir. İki farklı numaralandırma aynı rakamı kullanabilir; bu bir çakışma veya çelişki değil, tesadüftür. (İki farklı apartmanda «daire 37» olması gibi: aynı numara, farklı binalar.) Sol ok ≠ %. % tuşuna basınca key === "%" olur; sol oka basınca keyCode === LEFT_ARROW (yani 37) bakılır — farklı olaylar.

Bu yüzden keyCode === 37 ile keyCode === LEFT_ARROW aynı karşılaştırmadır; LEFT_ARROW yalnızca o tuş kimliğinin okunabilir adıdır. Harf tuşlarında keyCode çoğu ortamda büyük harfin ASCII/Unicode numarasına yakındır (ör. A → 65); yine de harf kontrolünde key === "w" / key === "W" daha doğrudan ve güvenilirdir. Ok, SHIFT, ENTER gibi özel tuşlarda keyCode (veya LEFT_ARROW sabiti) kullanılır — ASCII tablosundan ok aramayın; orada yoktur.

Tablo 8.

Kod bloğu: keyPressed() içinde ok tuşu ile mesaj — önceki bölümlerde tanıtılan console.log() ile tuşa basıldığı alt konsolda görülür (tuvalde değil).

function keyPressed() {  if (keyCode === UP_ARROW) {    console.log("Yukari ok");  }  if (key === "w" || key === "W") {    console.log("W tusu");  }}

WASD ve ok tuşlarını aynı hareket için birleştirmek yaygındır:

  if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) {    kareX = kareX - HIZ * dt;  }  if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) {    kareX = kareX + HIZ * dt;  }

4.5. Klavye ile Kontrol Edilen Kare

Aşağıdaki sketch, ok tuşları ve WASD ile hareket eden bir kareyi tuval sınırları içinde tutar. Hareket deltaTime ile hesaplanır; ekranda basılı tuş bilgisi gösterilir.

Kontrol özeti:

• Ok veya WASD: sürekli hareket
• R: konumu merkeze sıfırla (tek seferlik keyPressed)
• Fare konumu bilgi metninde gösterilir (önceki bölümler girdisi ile birlikte)

let oyuncuX;let oyuncuY;const BOYUT = 44;const HIZ = 200; function setup() {  createCanvas(560, 360);  noStroke();  oyuncuX = width / 2 - BOYUT / 2;  oyuncuY = height / 2 - BOYUT / 2;} function draw() {  background(28, 32, 48);  let dt = deltaTime / 1000;   if (keyIsDown(LEFT_ARROW) || keyIsDown(65)) {    oyuncuX = oyuncuX - HIZ * dt;  }  if (keyIsDown(RIGHT_ARROW) || keyIsDown(68)) {    oyuncuX = oyuncuX + HIZ * dt;  }  if (keyIsDown(UP_ARROW) || keyIsDown(87)) {    oyuncuY = oyuncuY - HIZ * dt;  }  if (keyIsDown(DOWN_ARROW) || keyIsDown(83)) {    oyuncuY = oyuncuY + HIZ * dt;  }   oyuncuX = constrain(oyuncuX, 0, width - BOYUT);  oyuncuY = constrain(oyuncuY, 0, height - BOYUT);   fill(90, 180, 255);  rect(oyuncuX, oyuncuY, BOYUT, BOYUT);   fill(220);  textSize(14);  textAlign(LEFT, TOP);  text("Ok / WASD: hareket  |  R: merkeze sifirla", 12, 12);  text("Fare: " + floor(mouseX) + ", " + floor(mouseY), 12, 32);} function keyPressed() {  if (key === "r" || key === "R") {    oyuncuX = width / 2 - BOYUT / 2;    oyuncuY = height / 2 - BOYUT / 2;  }}

Tuval odaklıyken tuşlar sketch'e gider; tarayıcı sekmesinin odak dışı kalması durumunda girdi alınmayabilir — önizleme paneline tıklamak gerekir.

Hata ayıklama ipuçları:

Tablo 9.

Bu tablo, klavye kontrollü bir sketch'te karşılaşılan sorunların çoğunun ya odak (tuvalin girdi almaması) ya da hangi p5.js aracının (durum mu, olay mı) kullanıldığıyla ilgili olduğunu gösterir. Hata ayıklarken ilk soru her zaman "bu davranış sürekli mi yoksa tek seferlik mi olmalı?" olmalıdır; yanıt keyIsDown ile keyPressed arasındaki seçimi belirler.

Özet

Klavye girdisi, oyuncunun gerçek zamanlı kontrolünü sağlar. p5.js'te iki temel katman ayırt edilir: keyIsDown() tuş basılıyken her frame true döndüğü için draw() içinde sürekli hareket üretir; keyPressed() ise basış anında bir kez çalışır. Sürekli harekette hız deltaTime ile çarpılarak Bölüm 2 Ana Başlık 4'teki frame bağımsız tempo korunur; çapraz hareket için bağımsız if blokları birleşir. WASD ve ok tuşları birlikte desteklenebilir; böylece farklı alışkanlıklara sahip oyuncular aynı sketch'i kullanır. Ok tuşları için LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW sabitleri; keyIsDown ile harf tuşları için 65 / 68 gibi keyCode sayıları kullanılır. keyPressed() zıplama, ateş, tur yenileme ve renk değiştirme gibi tek seferlik eylemler için uygundur. key harf ve sembol tuşlarını, keyCode ok tuşları gibi özel tuşları tanımlamada kullanılır; key === "r" veya keyCode === LEFT_ARROW gibi koşullar olay gövdesinde yazılır. Yazdırılabilir karakterler ASCII (ve onu kapsayan Unicode) numaralarıyla saklanır ('A' → 65); ok tuşları ise ASCII’de yoktur — keyCode 37/38/39/40 gibi özel sayılardır ve p5.js bunları LEFT_ARROW / UP_ARROW / RIGHT_ARROW / DOWN_ARROW sabitleriyle adlandırır. Ham sayı yerine sabiti kullanmak okunabilirliği artırır. Denetim karakterleri \n (satır sonu) ve \t (sekme) string içinde kaçış dizisi olarak yazılır; text() ile çok satırlı HUD üretilebilir. constrain() ile nesne tuval sınırları içinde tutulur — bu, konumu sınırda kilitleyen bir engellemedir; duvara çarpınca yön değiştiren sekme tepkisi sonraki ana başlıkta açık if ve hız tersine çevirme ile ele alınır. Fare ile karşılaştırıldığında sürekli basılı tutma mouseIsPressed / keyIsDown, tek seferlik olay ise mousePressed() / keyPressed() eşleşmesine karşılık gelir.

Neler Öğrendik?

Soru 1 Sürekli yürüme hareketi için en uygun yapı hangisidir?

Soru 2 key === "r" ifadesi ne zaman anlamlıdır?

Soru 3 [Kod okuma] HIZ = 200, deltaTime ≈ 16.7 ms iken aşağıdaki blok bir frame'de kareX değerini yaklaşık ne kadar artırır? Kod 9.

if (keyIsDown(RIGHT_ARROW)) {  kareX = kareX + HIZ * deltaTime / 1000;}

Soru 4 constrain(oyuncuX, 0, width - BOYUT) satırının amacı nedir?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: Basılı tutma draw() döngüsünde keyIsDown ile okunur; keyPressed yalnızca bir frame tetiklenir.
• İlgili Konu: 4.2. keyIsDown ile Sürekli Hareket

Soru 2: Doğru Cevap: B

• Çözüm: key olay anındaki karakter tuşunu verir; sürekli okuma için keyIsDown kullanılır.
• İlgili Konu: 4.4. key ve keyCode

Soru 3: Doğru Cevap: B

• Çözüm: 200 × 0.0167 ≈ 3.3 piksel; hız saniye başına tanımlıdır.
• İlgili Konu: 4.2. keyIsDown ile Sürekli Hareket

Soru 4: Doğru Cevap: B

• Çözüm: constrain değeri min–max aralığına sıkıştırır; kare ekran dışına çıkmaz.
• İlgili Konu: 4.5. Klavye ile Kontrol Edilen Kare

Yararlanılan Kaynaklar

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

• ASCII. (n.d.). In Wikipedia. https://en.wikipedia.org/wiki/ASCII
• asciitable.com. (n.d.). ASCII Table. https://www.asciitable.com/
• McCarthy, L., Reas, C., & Fry, B. (2015). Make: Getting Started with p5.js. Maker Media.
• MDN Web Docs. (n.d.). Identifiers — Lexical grammar. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#identifiers
• Microsoft. (n.d.). Visual Studio Code. https://code.visualstudio.com/
• Nystrom, R. (2014). Game Programming Patterns. Genever Benning. https://gameprogrammingpatterns.com/
• p5.js Foundation. (n.d.). constrain. p5.js Reference. https://p5js.org/reference/p5/constrain/
• p5.js Foundation. (n.d.). keyCode. p5.js Reference. https://p5js.org/reference/p5/keyCode/
• p5.js Foundation. (n.d.). keyIsDown. p5.js Reference. https://p5js.org/reference/p5/keyIsDown/
• p5.js Foundation. (n.d.). keyPressed. p5.js Reference. https://p5js.org/reference/p5/keyPressed/
• p5.js Foundation. (n.d.). p5.js Web Editor. https://editor.p5js.org/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js
• Unicode Consortium. (n.d.). The Unicode Standard. https://www.unicode.org/standard/standard.html
• unicode-table.com. (n.d.). Unicode Character Table. https://unicode-table.com/

Bölüm 3 — Ek Sorular

Her ana başlık için 10 çoktan seçmeli değerlendirme sorusu. Bölüm sonu sınav veya pekiştirme amaçlıdır.

Ana Başlık 1 için 10 Soru

SORU 1: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 2: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 3: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 4: Hız değişkenini “birim / saniye” tutmanın yararı nedir?

Doğru cevap: A

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 1.4

SORU 5: «deltaTime ile Zaman Tabanlı Hareket» bağlamında hangisi daha iyi bir sonraki adım geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme mevcut öğrenilen API ile kural ekler. İlgili Konu: 1.uygulama

SORU 6: Aşağıdaki hangi seçenek tipik bir çeldirici bug senaryosudur?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer — görünür bug. İlgili Konu: 1.uygulama

SORU 7: Kod okuma: if (x > width) { x = 0; } ne yapar?

Doğru cevap: B

Genel açıklama: Yatay sarma (wrap) kalıbı. İlgili Konu: 1.uygulama

SORU 8: Bu ana başlıkta (deltaTime ile Zaman Tabanlı Hareket) hangi uygulama en uygundur?

Doğru cevap: B

Genel açıklama: Seçenek konu başlığıyla örtüşür; diğerleri alandan kopuk. İlgili Konu: 1.uygulama

SORU 9: console.log ayıklamada asıl faydası nedir?

Doğru cevap: B

Genel açıklama: Gözlemlenebilir ara durum. İlgili Konu: 1.uygulama

SORU 10: Bir fonksiyonu parametreli yazmanın faydası?

Doğru cevap: B

Genel açıklama: Modülerlik ve yeniden kullanım. İlgili Konu: 1.uygulama

Ana Başlık 2 için 10 Soru

SORU 1: JavaScript dizilerinde ilk elemanın indeksi nedir?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 2.1

SORU 2: dizi.push(5) ne yapar?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 2.2

SORU 3: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 4: Paralel diziler ne anlama gelir?

Doğru cevap: A

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 2.4

SORU 5: «Dizi Temelleri: Tanım, Erişim ve push/pop» bağlamında hangisi daha iyi bir sonraki adım geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme mevcut öğrenilen API ile kural ekler. İlgili Konu: 2.uygulama

SORU 6: Aşağıdaki hangi seçenek tipik bir çeldirici bug senaryosudur?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer — görünür bug. İlgili Konu: 2.uygulama

SORU 7: Kod okuma: if (x > width) { x = 0; } ne yapar?

Doğru cevap: B

Genel açıklama: Yatay sarma (wrap) kalıbı. İlgili Konu: 2.uygulama

SORU 8: Bu ana başlıkta (Dizi Temelleri: Tanım, Erişim ve push/pop) hangi uygulama en uygundur?

Doğru cevap: B

Genel açıklama: Seçenek konu başlığıyla örtüşür; diğerleri alandan kopuk. İlgili Konu: 2.uygulama

SORU 9: console.log ayıklamada asıl faydası nedir?

Doğru cevap: B

Genel açıklama: Gözlemlenebilir ara durum. İlgili Konu: 2.uygulama

SORU 10: Bir fonksiyonu parametreli yazmanın faydası?

Doğru cevap: B

Genel açıklama: Modülerlik ve yeniden kullanım. İlgili Konu: 2.uygulama

Ana Başlık 3 için 10 Soru

SORU 1: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 2: Paralel x ve y dizilerinde aynı indeks ne anlama gelir?

Doğru cevap: B

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 3.2

SORU 3: Aşağıdaki yaklaşımlardan hangisi oyun sketch’inde daha sağlam bir geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme, öğrenilen araçlarla kural eklemeyi hedefler; alandan kopuk şıklar elenir. İlgili Konu: Pekiştirme

SORU 4: push/pop yerine sabit kapasite seçmek ne sağlar?

Doğru cevap: A

Genel açıklama: Bu soru ana başlık kazanımını ölçer. İlgili Konu: 3.4

SORU 5: «Sabit Kapasite ve Paralel Dizilerle Mini Sahne» bağlamında hangisi daha iyi bir sonraki adım geliştirmedir?

Doğru cevap: B

Genel açıklama: Geliştirme mevcut öğrenilen API ile kural ekler. İlgili Konu: 3.uygulama

SORU 6: Aşağıdaki hangi seçenek tipik bir çeldirici bug senaryosudur?

Doğru cevap: B

Genel açıklama: Koşulsuz artış her frame şişer — görünür bug. İlgili Konu: 3.uygulama

SORU 7: Kod okuma: if (x > width) { x = 0; } ne yapar?

Doğru cevap: B

Genel açıklama: Yatay sarma (wrap) kalıbı. İlgili Konu: 3.uygulama

SORU 8: Bu ana başlıkta (Sabit Kapasite ve Paralel Dizilerle Mini Sahne) hangi uygulama en uygundur?

Doğru cevap: B

Genel açıklama: Seçenek konu başlığıyla örtüşür; diğerleri alandan kopuk. İlgili Konu: 3.uygulama

SORU 9: console.log ayıklamada asıl faydası nedir?

Doğru cevap: B

Genel açıklama: Gözlemlenebilir ara durum. İlgili Konu: 3.uygulama

SORU 10: Bir fonksiyonu parametreli yazmanın faydası?

Doğru cevap: B

Genel açıklama: Modülerlik ve yeniden kullanım. İlgili Konu: 3.uygulama

Ana Başlık 4 için 10 Soru

SORU 1: Sürekli yürüme hareketi için en uygun yapı hangisidir?

Doğru cevap: B

Genel açıklama: Basılı tutma draw() döngüsünde keyIsDown ile okunur. İlgili Konu: 2.2. keyIsDown ile Sürekli Hareket

SORU 2: Zıplama veya tek atışlı ateş gibi eylem için hangi olay fonksiyonu daha uygundur?

Doğru cevap: B

Genel açıklama: keyPressed() bir basışta bir kez tetiklenir; tekrarlayan hareket için uygun değildir. İlgili Konu: 2.3. keyPressed ve Tek Seferlik Eylemler

SORU 3: Ok tuşları için genelde hangi değişken kullanılır?

Doğru cevap: B

Genel açıklama: Ok tuşları gibi özel tuşlar keyCode ile (LEFT_ARROW, RIGHT_ARROW vb.) okunur. İlgili Konu: 2.4. key ve keyCode

SORU 4: [Kod okuma] HIZ = 200, deltaTime ≈ 16.7 ms iken aşağıdaki blok bir frame'de kareX değerini yaklaşık ne kadar artırır? Kod 1.

if (keyIsDown(RIGHT_ARROW)) {  kareX = kareX + HIZ * deltaTime / 1000;}

Doğru cevap: B

Genel açıklama: 200 × 0.0167 ≈ 3.3 piksel; hız saniye başına tanımlıdır. İlgili Konu: 2.2 (deltaTime ile birleşim)

SORU 5: constrain(oyuncuX, 0, width - BOYUT) satırının amacı nedir?

Doğru cevap: B

Genel açıklama: constrain değeri min–max aralığına sıkıştırır; kare ekran dışına çıkmaz. İlgili Konu: 2.5. Klavye ile Kontrol Edilen Kare

SORU 6: key === "a" ifadesi ne zaman anlamlıdır?

Doğru cevap: B

Genel açıklama: key olay anındaki karakter tuşunu verir; sürekli okuma için keyIsDown kullanılır. İlgili Konu: 2.3 ve 2.4

SORU 7: WASD ve ok tuşlarını birlikte desteklemek neden tercih edilir?

Doğru cevap: B

Genel açıklama: İki kontrol şeması aynı hareketi farklı tuşlarla sağlar. İlgili Konu: 2.5. Klavye ile Kontrol Edilen Kare

SORU 8: [Kod okuma] Aşağıdaki kodda keyIsDown(LEFT_ARROW) || keyIsDown(65) ifadesi ne zaman true olur?

Doğru cevap: B

Genel açıklama: || en az bir koşul true ise true döner. İlgili Konu: 2.5

SORU 9: I. keyIsDown() her frame kontrol edilebilir.
II. keyPressed() tek basışta bir kez çalışır.
III. Klavye girdisi tuval odak dışındayken her zaman alınır.

Hangileri doğrudur?

Doğru cevap: B

Genel açıklama: I ve II doğru. III yanlış; önizleme panelinin odakta olması gerekir. İlgili Konu: 2.1–2.3

SORU 10: Klavye ile hareket eden kare örneğinde hız neden deltaTime ile çarpılır?

Doğru cevap: B

Genel açıklama: Ana Başlık 1'deki zaman tabanlı hareket klavye girdisiyle birleştirilir. İlgili Konu: 2.2 ve 2.5

Ana Başlık 1 — Açık Uçlu

A1. «deltaTime ile Zaman Tabanlı Hareket» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «deltaTime ile Zaman Tabanlı Hareket» için küçük bir varyasyon tasarlayın (yeni kural, sınır durumu veya görsel geri bildirim). Hangi fonksiyonlar değişir? Madde madde yazın.

A3. Bu ana başlıkta sık yapılan bir yanlış varsayımı (yanlış indeks, sıra, durum veya veri modeli) seçin; neden hatalı olduğunu ve doğru yaklaşımı iki–üç cümleyle yazın.

Ana Başlık 2 — Açık Uçlu

A1. «Dizi Temelleri: Tanım, Erişim ve push/pop» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «Dizi Temelleri: Tanım, Erişim ve push/pop» için küçük bir varyasyon tasarlayın (yeni kural, sınır durumu veya görsel geri bildirim). Hangi fonksiyonlar değişir? Madde madde yazın.

A3. Bu ana başlıkta sık yapılan bir yanlış varsayımı (yanlış indeks, sıra, durum veya veri modeli) seçin; neden hatalı olduğunu ve doğru yaklaşımı iki–üç cümleyle yazın.

Ana Başlık 3 — Açık Uçlu

A1. «Sabit Kapasite ve Paralel Dizilerle Mini Sahne» konusundaki merkezi kavramı kendi cümlelerinizle açıklayın ve bunu somut bir mini oyun / sketch örneğine bağlayın.

A2. «Sabit Kapasite ve Paralel Dizilerle Mini Sahne» için küçük bir varyasyon tasarlayın (yeni kural, sınır durumu veya görsel geri bildirim). Hangi fonksiyonlar değişir? Madde madde yazın.

A3. Bu ana başlıkta sık yapılan bir yanlış varsayımı (yanlış indeks, sıra, durum veya veri modeli) seçin; neden hatalı olduğunu ve doğru yaklaşımı iki–üç cümleyle yazın.

Ana Başlık 4 — Açık Uçlu

A1. Bir oyun için kontrol tablosu oluşturun: hangi tuşlar keyIsDown, hangileri keyPressed ile okunmalı? Gerekçe yazın.

Örnek yanıt unsurları: WASD sürekli; SPACE/R tek seferlik.
Değerlendirme: Tuş–olay eşlemesi tutarlı mı?

A2. constrain() ile manuel sınır if testi arasında ne zaman hangisini tercih edersiniz?

Örnek yanıt unsurları: constrain engelleme; sekme için açık if + hız tersi.
Değerlendirme: Ana Başlık 2–3 köprüsü kurulmuş mu?

A3. Tuval odak dışıyken klavye çalışmıyorsa kullanıcıya ne önerirsiniz?

Örnek yanıt unsurları: Önizleme paneline tıklama.
Değerlendirme: Pratik çözüm var mı?