Ana Başlık 3. Değişkenler, Operatörler ve Koşullu İfadeler

Amaç: Değişken ve veri türlerini tanıtarak karşılaştırma/mantıksal operatörler ile if/else dallanma mantığını kurmak.

Öğrenme Çıktıları:

• Değişken tanımlar ve number, string, boolean türlerini ayırt eder.
• Karşılaştırma ve mantıksal operatörleri koşullarda kullanır.
• if, else if ve else ile çok yollu dallanma yazar.
• Atama (=) ile karşılaştırma (===) farkını açıklar.

Anahtar Sözcükler: değişken, veri türü, operatör, if/else, boolean, doğruluk tablosu

Giriş

İlk ana başlıkta p5.js ortamı kurulmuş, koordinat sistemi tanınmış ve temel şekiller çizilmiştir. Ancak çizilen şekiller henüz duruma göre karar verememektedir. Oyun programlamanın özü, çalışma anındaki bilgiye göre farklı yollar izlemektir: top kenara değdi mi, skor yeterli mi, fare doğru bölgeye tıkladı mı?

Bu kararlar koşullu ifadelerle kodlanır. Koşuldan önce değişken kavramı gerekir; skor, can, konum ve oyun bitiş bayrağı gibi bilgiler isimlendirilmiş bellek alanlarında tutulur. JavaScript’te let / const, temel veri türleri, atama ile karşılaştırmanın ayrımı ve && / || / ! operatörleri bu zemini oluşturur.

Bu ana başlıkta değişkenler, operatörler ve if/else yapıları sistematik işlenir. Fare etkileşimi ve Daire Tıklama mini oyunu bir sonraki ana başlıkta, bu temelin üzerine kurulacaktır. 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.

3.1. Değişkenler ve Veri Türleri

JavaScript'te değişken tanımlamak için let, const veya eski sözdizim olan var anahtar sözcükleri kullanılır. var işlev (function) kapsamına sahiptir ve beklenmedik davranışlara yol açabilir; let ve const ise blok kapsamlıdır (süslü parantez {} içinde tanımlanırsa dışarıdan erişilemez). Örneklerde değişebilir değerler için let, değişmeyecek sabitler için const kullanılır.

Kod bloğu: Temel değişken tanımlama örnekleri.

let skor = 0;                  // Tam sayı (number)let oyunAdi = "Daire Tıklama"; // Metin (string)let oyunBitti = false;         // Mantıksal değer (boolean)const HEDEF_SKOR = 10;         // Sabit — sonradan değiştirilmez (BÜYÜK_HARF örfi)

Bu düzeyde odaklanılan temel veri türleri şunlardır (JavaScript'te undefined, null, object gibi ek türler de vardır):

Tablo 1.

p5.js, konum ve boyut için number türünü yoğun biçimde kullanır. Oyun durumunu izlemek için boolean değişkenler (oyunBitti, hedefVuruldu gibi) sık görülür.

Değişken adlarının ne anlama geldiği okunabilirlik açısından önemlidir. x, y gibi tek harfli adlar koordinat için yaygındır; a, b, temp1 gibi belirsiz adlar ise kodun izlenmesini zorlaştırır.

camelCase, JavaScript'te dil tarafından zorunlu kılınan bir kural değildir; hedef_x veya HedefX gibi adlar da sözdizimi açısından geçerlidir. Ancak JavaScript ve p5.js topluluğunda değişken ve fonksiyon adları için camelCase yaygın bir örf (convention) haline gelmiştir. Bu kitaptaki örneklerde değişken ve fonksiyon adları camelCase ile yazılır.

Sabit (const) değerlerde ise bazen tüm harflerin büyük yazıldığı ve kelimelerin alt çizgiyle ayrıldığı BÜYÜK_HARF örfi kullanılır: HEDEF_SKOR, MAKS_CAN. Bu da zorunluluk değil, okunabilirlik için benimsenen bir düzendir.

String (metin) işlemleri — kısa özet

Bu kitaptaki mini oyunlar çoğunlukla sayı ve boolean ile ilerler; yine de skor yazısı, seviye adı veya "Kazandın!" gibi mesajlar string türündedir. Aşağıdaki işlemler başlangıç için yeterlidir:

Tablo 2.

Kod bloğu: String birleştirme ve ekrana yazma (çalışır sketch).

let skor = 7;let oyunAdi = "Daire Tıklama"; function setup() {  createCanvas(400, 200);} function draw() {  background(240);  fill(0);   let mesaj = "Skor: " + skor; // "Skor: 7"  text(mesaj, 20, 40);   if (oyunAdi.length > 0) {    text(oyunAdi.toUpperCase(), 20, 70);  }}

Sayıyı metne çevirmek için String(skor) veya skor + "" de kullanılabilir; pratikte "Skor: " + skor en yaygınıdır. Metinden sayıya dönüş (Number("10"), parseInt) bu ana başlıkta zorunlu değildir; skor zaten number tutulur, ekrana yazarken string birleştirilir. text(metin, x, y) tuvale yazar (Ana Başlık 1 çizim tablosu); metin rengi fill ile ayarlanır.

3.2. Karşılaştırma ve Mantıksal Operatörler

Koşullu ifadeler, karşılaştırma operatörlerinin sonucuna dayanır. Karşılaştırma sonucu her zaman boolean değer üretir: true veya false.

Tablo 3.

== ile === farkı (tür dönüşümü): JavaScript’te "10" bir string (metin), 10 ise bir number (sayı)dır; görünüşte aynı olsalar da veri türleri farklıdır. == (iki eşittir) karşılaştırırken gerekirse türleri birbirine çevirmeye çalışır (tür dönüşümü / type coercion): bu yüzden "10" == 10 sonucu true olur. === (üç eşittir, tam eşitlik) hem değeri hem türü kontrol eder; "10" === 10 sonucu false olur. Oyun kodunda skor, can gibi değerler zaten number tutulduğu için ve sürpriz eşleşmeleri önlemek adına örneklerde === tercih edilir. Eşit değil için benzer ayrım vardır: != tür dönüşümü yapabilir, !== yapmaz; örneklerde mümkün olduğunca !== kullanılır.

Mantıksal operatörler

Mantıksal operatörler, karşılaştırma ifadelerinin ürettiği true/false değerlerini birleştirir. Sonuç yine boolean olur.

Tablo 4.

// Yanlış beklenti (matematik yazımı — JS'te güvenilir değil):// 20 < x < 60 // Doğru:20 < x && x < 60

Örneğin x = 40 iken 20 < x && x < 60 → true; x = 10 iken → false. Tuval sınırı gibi durumlar da aynı kalıptır: x > 0 && x < width.

İki operandlı operatörlerde (&&, ||) her operand true veya false olabileceğinden 2 × 2 = 4 durum vardır. Aşağıda A ve B, bu iki operandı temsil eder (ör. A = can > 0, B = !oyunBitti). Tek operandlı ! için ise yalnızca 2 durum vardır.

&& (VE) doğruluk tablosu — 4 durum

Tablo 5.

Özet: Yalnızca A ve B ikisi birden true ise sonuç true olur. Oyun bağlamında can > 0 && !oyunBitti ifadesi hem canın sıfırdan büyük hem de oyunun bitmemiş olması gerektiğini söyler; biri false ise tüm ifade false döner.

Tablo 6.

|| (VEYA) doğruluk tablosu — 4 durum

Tablo 7.

Özet: A veya B'den en az biri true ise sonuç true olur. Oyun bağlamında can === 0 || sure === 0 ifadesi can bittiğinde veya süre dolduğunda oyunun sona erdiğini ifade eder.

Tablo 8.

! (DEĞİL) doğruluk tablosu — 2 durum (tek operand)

Tablo 9.

Özet: ! yalnızca tek boolean değeri tersine çevirir. !oyunBitti ifadesi oyun bitmediyse true, bittiyse false döner; if (!oyunBitti) bloğu yalnızca oyun devam ederken çalışır.

Görsel 1 yukarıdaki VE, VEYA ve DEĞİL tablolarını yan yana özetler: iki operandlı operatörlerde 4 durum, ! için 2 durum.

Mantıksal operatörler ile şekil renklendirme

Aşağıdaki statik sketch bütün sonuçları tek çalıştırmada gösterir. Üst sırada &&, dört kenarlı ve eşit kenarlı olan kareyi vurgular; dikdörtgenin dört kenarı olsa da kenarları eşit değildir. Alt sırada ||, üçgen veya daire olan şekilleri vurgular; kare iki koşula da uymaz. Fare, klavye, animasyon veya kodda değer değiştirme gerekmez.

Bu örnekte iki yeni komut kullanılır:

Tablo 10.

color() doğrudan çizim yapmaz: let secili = color(45, 110, 170); rengi saklar; fill(secili) veya stroke(secili) sonraki dolgu / kenar rengini ayarlar. Etiketler için text() Ana Başlık 1'de tanıtılmıştır; textSize ve textAlign bu sketch’te kullanılır, ayrıntıları 4.1’de verilir.

Kod bloğu: && ve || ile seçilen geometrik şekiller — tüm sonuçlar aynı tuvalde.

function setup() {  createCanvas(760, 430);  noLoop();} function draw() {  background(245);  textAlign(CENTER);   fill(35);  textSize(16);  text("Mantıksal operatörler ile şekil renklendirme", 380, 30);  textSize(12);  text("Tüm sonuçlar tek statik tuvalde", 380, 52);   noStroke();   let secili = color(45, 110, 170);  let diger = color(195);   // && : dört kenarlı VE eşit kenarlı  fill(55);  textSize(13);  text("dört kenarlı && eşit kenarlı", 380, 82);   let dortKenar = true;  let esitKenar = true;  if (dortKenar && esitKenar) {    fill(secili);  } else {    fill(diger);  }  rect(125, 100, 110, 110);      // kare   dortKenar = true;  esitKenar = false;  if (dortKenar && esitKenar) {    fill(secili);  } else {    fill(diger);  }  rect(445, 125, 180, 60);       // dikdörtgen   fill(secili);  textSize(12);  text("true — kare seçildi", 180, 232);  fill(90);  text("false — kenarlar eşit değil", 535, 232);   // || : üçgen VEYA daire  stroke(210);  line(60, 255, 700, 255);  noStroke();  fill(55);  textSize(13);  text("üçgen || daire", 380, 282);   let ucgenMi = true;  let daireMi = false;  if (ucgenMi || daireMi) {    fill(secili);  } else {    fill(diger);  }  triangle(90, 395, 170, 295, 250, 395);   ucgenMi = false;  daireMi = false;  if (ucgenMi || daireMi) {    fill(secili);  } else {    fill(diger);  }  rect(330, 305, 100, 90);       // kare   ucgenMi = false;  daireMi = true;  if (ucgenMi || daireMi) {    fill(secili);  } else {    fill(diger);  }  ellipse(570, 350, 100, 100);   // daire   fill(secili);  text("true", 170, 418);  fill(90);  text("false", 380, 418);  fill(secili);  text("true", 570, 418);}

Üst sırada yalnız kare, alt sırada üçgen ile daire mavi görünür. Gri şekiller ilgili koşulun false sonucunu gösterir.

Görsel 2 && için iki koşulun birlikte, || için koşullardan en az birinin sağlanmasını tek tuvalde karşılaştırır.

İkiden fazla koşul birleştirmek

&& ve || zincirlenerek üç veya daha fazla koşul aynı ifadede birleştirilebilir. JavaScript ifadeyi soldan sağa değerlendirir; && || operatöründen önce işlenir. Başlangıç düzeyinde karışıklığı önlemek için parantez kullanmak önerilir.

Tablo 11.

Örnek: x = 150, y = 200 iken dört koşul da true olduğundan tuvalIcinde true olur; x = 0 veya x = 500 iken zincir false döner (kısa devre ile sonraki koşullara bakılmayabilir). Karışık ifadede (skor >= 10 && can > 0) || oyunBitti için skor 10, can 2 ve oyun devam ediyorsa parantez içi true olduğundan sonuç true (kazanma); skor 7 iken parantez false kalır, oyunBitti de false ise tüm ifade false olur.

Kod bloğu: Karşılaştırma ve mantıksal operatör kullanımı — çalışır sketch.

let x = 150;let y = 200;let skor = 7;let can = 2;let sure = 0;let oyunBitti = false; function setup() {  createCanvas(400, 280);} function draw() {  background(240);  fill(0);  textSize(14);   // Dört koşullu VE: nokta tuval içinde mi?  let tuvalIcinde = (x > 0 && x < 400 && y > 0 && y < 400); // true   // İkili VE: skor yeterli mi ve oyun bitmedi mi?  let kazandi = (skor >= 10 && !oyunBitti); // false — skor henüz 7   // Üçlü VE: oyun devam edebilir mi?  let oyunDevam = (can > 0 && skor < 10 && !oyunBitti); // true   // VEYA: oyun bitti mi? (can veya süre tükendi)  let oyunSonu = (can === 0 || sure === 0); // true — sure 0   // Parantezli karışım: kazanma veya zorunlu bitiş  let ekranMesaji = (skor >= 10 && can > 0) || oyunBitti; // false   text("tuvalIcinde: " + tuvalIcinde, 20, 40);  text("kazandi: " + kazandi, 20, 70);  text("oyunDevam: " + oyunDevam, 20, 100);  text("oyunSonu: " + oyunSonu, 20, 130);  text("ekranMesaji: " + ekranMesaji, 20, 160);}

3.3. if, else if ve else Yapıları

Temel sözdizimi:

if (koşul) {  // koşul doğruysa çalışır} else if (baskaKoşul) {  // ilk koşul yanlış, bu doğruysa çalışır} else {  // hiçbiri doğru değilse çalışır}

Aşağıdaki üç örnekte sol taraftaki (girintisiz) ve sağdaki (girintili) kod JavaScript’te çoğu zaman aynı şekilde çalışır; fark okunabilirliktedir. Özellikle iç içe koşullarda girinti olmadan hangi satırın hangi bloğa ait olduğu hızla kaybolur.

Örnek 1 — tek if (girintisiz):

if (skor >= 10) {fill(0, 200, 0);ellipse(200, 200, 80, 80);}

Girintili hali:

if (skor >= 10) {  fill(0, 200, 0);  ellipse(200, 200, 80, 80);}

Örnek 2 — if / else (girintisiz):

if (can > 0) {background(200, 230, 200);} else {background(230, 180, 180);}

Girintili hali:

if (can > 0) {  background(200, 230, 200);} else {  background(230, 180, 180);}

Örnek 3 — iç içe koşul (girintisiz):

if (!oyunBitti) {if (skor >= HEDEF_SKOR) {oyunBitti = true;}}

Girintili hali:

if (!oyunBitti) {  if (skor >= HEDEF_SKOR) {    oyunBitti = true;  }}

Kod bloğu: Koşula göre renk değiştiren çizim.

let sicaklik; // Değişken — draw dışında tanımlandı (setup'ta değer verilecek) function setup() {  createCanvas(400, 400);  sicaklik = 18; // Başlangıç değeri} function draw() {  background(240);   if (sicaklik > 25) {    fill(200, 80, 50);   // Sıcak — turuncu  } else {    fill(50, 100, 200);  // Serin — mavi  }   noStroke();  ellipse(200, 200, 100, 100);}

Bu örnekte koşul, fare veya mesafe yerine sayısal bir değişken (sicaklik) üzerinden kurulmuştur. sicaklik değeri setup() içinde bir kez atanır; draw() her frame'de aynı değerle koşulu değerlendirir. Fare ile etkileşimli sürüm, fare girdisi ve dist() tanıtıldıktan sonra 4.1’de verilecektir.

Aşağıdaki özet, draw() içindeki if/else dallanmasını gösterir. İlk akış şeması örneği olduğu için simgeler, döngü bölümündeki şemalarla aynı üç eleman üzerinden hatırlatılır: yuvarlak = başla/bitiş, elmas = koşul, dikdörtgen = işlem (oklar sırayı gösterir).

Tablo 12.

Görsel 3 Başla → koşul → iki fill dalı → ortak ellipse → Bitir yolunu gösterir; sicaklik > 25 yalnızca rengi seçer.

if / else if / else ile görsel karar: Trafik ışığı

İkiden fazla alternatif için else if zinciri kullanılır. Trafik ışığı bunun en tanıdık örneğidir: tek bir durum değişkeni hangi lambanın yanacağını seçer; zincir yalnızca ilk uyan dalı çalıştırır. Aşağıdaki sketch üç olası durumu da tek çalıştırmada yan yana çizer; fare, klavye veya animasyon yoktur.

Kod bloğu: Üç durum değeri — üç trafik ışığı, tek tuval.

function setup() {  createCanvas(620, 400);  noLoop();} function draw() {  background(255);  textAlign(CENTER);  textSize(15);  noStroke();   // —— if ——  let durum = "kirmizi";  fill(21, 101, 192);  text("if", 130, 78);  textSize(11);  fill(198, 40, 40);  text('durum = "kirmizi"', 130, 98);  fill(40);  rect(100, 110, 60, 230);  fill(90);  ellipse(130, 154, 40, 40);  ellipse(130, 224, 40, 40);  ellipse(130, 294, 40, 40);  if (durum === "kirmizi") {    fill(220, 60, 60);    ellipse(130, 154, 40, 40);  } else if (durum === "sari") {    fill(240, 200, 50);    ellipse(130, 224, 40, 40);  } else {    fill(70, 200, 90);    ellipse(130, 294, 40, 40);  }   // —— else if ——  durum = "sari";  textSize(15);  fill(21, 101, 192);  text("else if", 310, 78);  textSize(11);  fill(184, 134, 11);  text('durum = "sari"', 310, 98);  fill(40);  rect(280, 110, 60, 230);  fill(90);  ellipse(310, 154, 40, 40);  ellipse(310, 224, 40, 40);  ellipse(310, 294, 40, 40);  if (durum === "kirmizi") {    fill(220, 60, 60);    ellipse(310, 154, 40, 40);  } else if (durum === "sari") {    fill(240, 200, 50);    ellipse(310, 224, 40, 40);  } else {    fill(70, 200, 90);    ellipse(310, 294, 40, 40);  }   // —— else ——  durum = "yesil";  textSize(15);  fill(21, 101, 192);  text("else", 490, 78);  textSize(11);  fill(46, 125, 50);  text('durum = "yesil"', 490, 98);  fill(40);  rect(460, 110, 60, 230);  fill(90);  ellipse(490, 154, 40, 40);  ellipse(490, 224, 40, 40);  ellipse(490, 294, 40, 40);  if (durum === "kirmizi") {    fill(220, 60, 60);    ellipse(490, 154, 40, 40);  } else if (durum === "sari") {    fill(240, 200, 50);    ellipse(490, 224, 40, 40);  } else {    fill(70, 200, 90);    ellipse(490, 294, 40, 40);  }}

Önce üç lamba gri çizilir; if / else if / else yalnızca duruma uyan lambayı yeniden boyar. Soldan sağa üç sütun sırasıyla if, else if ve else dallarını gösterir.

Görsel 4 soldan sağa if ("kirmizi"), else if ("sari") ve else ("yesil") dallarını ayırır; her durumda yalnızca bir dal çalışır.

if/else oyunlarda neden bu kadar sık?

Oyunlar sürekli karar verir: can bitti mi, engelle çarpışma oldu mu, menü mü oyun içi mi, skor eşiği aşıldı mı? Bu kararların çoğu if / else if / else ile kodlanır. Tanıdık oyunlardan birkaç örnek:

Tablo 13.

Aynı iskelet ilerideki Daire Tıklama örneğinde de görünür: isabet varsa skor artar, hedef skora ulaşınca oyun biter.

İç içe if / else ve mantıksal operatör eşdeğerliği

Bir if bloğunun içine başka bir if (ve isteğe bağlı else) yazmak iç içe koşul (nested conditional) adını alır: önce dış koşul, doğruysa iç koşul sorulur. Her düzeydeki koşul tek bir karşılaştırma olmak zorunda değildir; && / || / ! ile birleştirilmiş daha karmaşık ifadeler de yazılabilir (ör. can > 0 && skor < 10). else yalnızca gerçekten yapılacak bir iş varken eklenir; boş else { } bloğu gereksizdir.

Örnek 1

Skor yalnızca can varken ve oyun bitmemişken artsın. İç içe if ile tek if + && aynı kararı verir:

if (can > 0) {  if (!oyunBitti) {    skor = skor + 1;  }}

if (can > 0 && !oyunBitti) {  skor = skor + 1;}

Görsel 5 Örnek 1’in iki yazımını yan yana gösterir.

Örnek 2

else dallarında farklı mesajlar:

if (can > 0) {  if (!oyunBitti) {    skor = skor + 1;    mesaj = "Devam";  } else {    mesaj = "Oyun bitti";  }} else {  mesaj = "Can yok";}

Görsel 6 üç yolu ayırır: devam, oyun bitti, can yok.

Örnek 3

Dış koşulda birden fazla ifade (&&); içeride skor eşiği. Her dal farklı işlem yapar:

if (can > 0 && !oyunBitti) {  if (skor >= 10) {    mesaj = "Seviye atlandı";    oyunBitti = true;  } else {    mesaj = "Skor yetersiz";  }} else {  mesaj = "Oyuna devam edilemez";}

Görsel 7 önce can > 0 && !oyunBitti sorusunu, ardından skor eşiğini izler.

let x = 15;let y = 8;let aktif = true;let seviye = 2; console.log("basla"); if (x > 10 && y < 10) {  console.log("bolge-icinde");} else {  console.log("bolge-disinda");} if (!aktif || seviye === 1) {  console.log("beklet");} else if (seviye >= 2 && x === 15) {  console.log("ilerle");} else {  console.log("bekle");} let sonuc = (x >= 10 && y !== 0) || !aktif;console.log(sonuc);

Özet

Değişkenler, programın çalışma sırasında okuyup güncelleyebildiği isimlendirilmiş bellek alanlarıdır. let değişebilir, const değişmez bağlar kurar; örneklerde skor ve konum için let, tuval boyutu gibi sabitler için const tercih edilir. Number, string ve boolean temel türlerdir; string birleştirme ve .length kısa metin işlemlerinde yeterlidir.

Atama (=) değer yazar; karşılaştırma (===, <, >) ise doğru/yanlış üretir. Mantıksal operatörler birden fazla koşulu birleştirir: && tümünün doğru olmasını, || en az birinin doğru olmasını, ! ise değillemeyi sağlar. if / else if / else zinciri bu koşullara göre farklı kod yollarını seçer. İç içe if ile tek if + && çoğu zaman aynı kararı verir; ara adım yoksa birleşik koşul daha sadedir.

Oyun kodunda koşul çoğu zaman draw() veya olay fonksiyonu içinde okunur; yanlış yerde yazılan atama veya = / === karışıklığı sessiz hatalara yol açar. Bu ana başlığın çıktısı, bir sonraki adımda fare girdisi ve mesafe hesabıyla birleşecek sağlam bir karar verme iskeletidir.

Neler Öğrendik?

Soru 1 let skor = 0 ile const GENISLIK = 400 arasındaki temel fark nedir?

Soru 2 can > 0 && !oyunBitti ifadesi ne zaman true olur?

Soru 3 x = 5 ile x === 5 farkı nedir?

Soru 4 else if ne zaman devreye girer?

Neler Öğrendik Yanıt Anahtarı

Soru 1: Doğru Cevap: B

• Çözüm: const ile bağlanan tanımlayıcıya yeni değer atanamaz; let güncellenebilir.
• İlgili Konu: 3.1. Değişkenler ve Veri Türleri

Soru 2: Doğru Cevap: B

• Çözüm: && her iki yanın true olmasını ister; ! oyunBitti’yi tersine çevirir.
• İlgili Konu: 3.2. Karşılaştırma ve Mantıksal Operatörler

Soru 3: Doğru Cevap: B

• Çözüm: Tek = atamadır; === sıkı eşitlik karşılaştırmasıdır.
• İlgili Konu: 3.2. Karşılaştırma ve Mantıksal Operatörler

Soru 4: Doğru Cevap: A

• Çözüm: else if, önceki dallar tutmazsa kendi koşulunu dener.
• İlgili Konu: 3.3. if, else if ve else Yapıları

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
• p5.js Foundation. (n.d.). dist(). p5.js Reference. https://p5js.org/reference/p5/dist/
• p5.js Foundation. (n.d.). mouseX. p5.js Reference. https://p5js.org/reference/p5/mouseX/
• p5.js Foundation. (n.d.). random(). p5.js Reference. https://p5js.org/reference/p5/random/
• Shiffman, D. (n.d.). Code! Programming with p5.js. The Coding Train. https://thecodingtrain.com/tracks/code-programming-with-p5-js
• Sweigart, A. (2017). Invent Your Own Computer Games with Python (4th ed.). No Starch Press. (Benzer mini oyun örnekleri için.)
• The Coding Train. (n.d.). Games [Öğretici parkur]. https://thecodingtrain.com/tracks/games/