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/