Bölüm 3 · Sunum 3

Beş yuvalı envanter, bir avuç balon

Boyutu baştan belli diziler ve birçok nesneyi birlikte yöneten paralel diziler.

Sabit kapasitetepe ve BOSMini envanterBalon sahnesisplice

Oyunlarda envanter neden hep sınırlı?

Çantada 5 yuva var, altıncı eşyayı alamıyorsunuz. Geçen ders gördüğümüz push ile sınırsız ekleyebiliyorduk. Sınırı kim, nasıl koyuyor?

İki yol var: uzayan liste, sabit yuvalar

Dinamikpush / popEleman gelince dizi uzar, gidince kısalır. Eleman yoksa yuva da yoktur. Uzunluk baştan bilinmiyorsa: tahmin geçmişi, kule listesi.

SabitSabit kapasiteYuva sayısı baştan bellidir ve değişmez. Boş yuvada özel bir “boş” işareti durur. Kaç yuvanın dolu olduğu ayrı bir sayaçta tutulur.

Sabit model, belleği ve döngü sınırını öngörülebilir kılar. Tasarım açısından da bir kuraldır: “en fazla 5 eşya”.

Can göstergesi: beş yuva, kaçı dolu?

Zelda’daki kalpler, Minecraft’ın 9 yuvalı çubuğu, bir silahın şarjörü: hepsinde yuva sayısı sabit, değişen yalnızca doluluk.

Fikir dört adımda

Üst sınırı sabitle: MAKS.
Diziyi MAKS uzunluğunda oluştur ve BOS ile doldur.
Ekle: yigin[tepe] = deger; tepe++. push() yok.
Çıkar: tepe--; değeri oku; yuvaya yeniden BOS yaz. pop() yok.

Yığın mantığı metotlara bağlı değil: “sona ekle, sondan çıkar” davranışı indeks ve atamayla da kurulur. Birçok dilde hazır push / pop zaten yoktur.

`tepe`: sıradaki boş yuvayı gösteren parmak

kilic0

iksir1

anahtar2

BOS3 ▲ tepe

BOS4

MAKS = 5 · tepe = 3 · envanter.length her zaman 5

tepe iki şeyi birden söylerKaç yuva dolu (3) ve yeni eşyanın nereye yazılacağı (indeks 3).

BOS“Bu yuvada bir şey yok” demek için seçtiğimiz özel değer: -1, "" gibi.

Ekleme: `yiginEkle`

Önce sınıra bakıyor: yer yoksa false döner ve hiçbir şey eklemez. Yer varsa tepe’nin gösterdiği yuvaya yazar, sonra tepe’yi bir ilerletir.

Çıkarma: `yiginCikar`

Yığın boşsa BOS döner.
tepe’yi bir geri al: artık son dolu yuvayı gösteriyor.
Oradaki değeri bir kenara al.
Yuvaya yeniden BOS yaz.
Aldığın değeri döndür.

Adım adım izleyelim

Adım	İşlem	`yigin`	`tepe`
Başlangıç	—	`[-1, -1, -1, -1, -1]`	0
1	`yiginEkle(7)`	`[7, -1, -1, -1, -1]`	1
2	`yiginEkle(3)`	`[7, 3, -1, -1, -1]`	2
3	`yiginCikar()` → 3	`[7, -1, -1, -1, -1]`	1

yigin.length hep MAKS. Dolu eleman sayısı tepe. Döngü bu yüzden i < tepe ile sınırlanır.

Skor listesinde boş yuvayı `0` ile işaretlesek olur mu?

Oyuncu gerçekten 0 puan aldıysa ne olacak?

Boş işareti, geçerli bir değerle çakışmamalı

Tahmin 1–10 arasıBOS = -1 uygun. −1 hiçbir zaman geçerli bir tahmin olamaz.

Skor 0 olabilirO zaman 0 “boş” anlamına gelemez; yine -1 gibi imkânsız bir değer seçilir.

Metin listeleriÇoğunlukla "" ya da "BOS" kullanılır.

tepe tutmak istemezseniz “ilk BOS yuvaya yaz” diye tarayabilirsiniz. Fikir aynıdır; doluluk hesabı döngüyle yapılır.

Hangisi ne zaman?

Yaklaşım	Boyut	Boş yer	Ne zaman uygun?
`push` / `pop`	`length` değişir	Eleman yoksa yuva da yok	Uzunluk baştan bilinmiyor; geçmiş listesi
Sabit kapasite + `BOS` + `tepe`	`length === MAKS`, sabit	Yuva var, değeri `BOS`	Envanter, can, sabit düşman havuzu, sınırlı geri al

Kule kurma ve skor geçmişi gibi örnekleri push / pop ile yazmak kısa ve okunaklıdır. Sabit model “en fazla N yer” kuralını koda gömmek için bilinmelidir.

Başka dillerde bu bir tercih değil, zorunluluk

JavaScript’te diziler dinamikpush ile büyür, pop ile küçülür. Doğru boyutu baştan seçmek çoğu zaman bir tasarım tercihidir.

C, C++, Pascal ve gömülü sistemlerdeDizinin boyutu tanımlanırken belirlenir, sonradan büyütülemez. Küçük seçilirse taşma (overflow) ve hatalı bellek yazımı, büyük seçilirse bellek israfı olur.

Oyun motorlarında“En fazla 20 adım geri al”, “en fazla 3 açık menü”, “ekranda en fazla 100 mermi” gibi üst sınırlar çok yaygındır. Kapasite baştan kesilir ki oyun ortasında bellek sürprizi olmasın. Bu fikre nesne havuzu (object pool) denir.

Mini envanter: tıkla ekle, sol alttan çıkar

const MAKS = 5;
const BOS = "";

let envanter = [BOS, BOS, BOS, BOS, BOS]; // length her zaman 5
let 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;
}

Tuvale birkaç kez tıklayın, sonra ÇIKAR kutusuna basın. length hep 5 kalıyor; değişen yalnızca tepe. Altıncı eşyayı eklemeyi deneyin.

Listeyi yuva kutularına çevirin

draw içindeki metin listesini kaldırın; yan yana 5 dikdörtgen yuva çizin.
Dolu yuva: dolu kutu ve eşyanın adı. Boş yuva: soluk çerçeve ve “BOS”.
tepe indeksinin altına küçük bir üçgen koyun. tepe === MAKS iken “dolu” yazın.
yiginEkle, yiginCikar ve mousePressed’e dokunmayın; yalnızca çizimi değiştirin.

Ekranda beş balon olacak. Her biri oval ve farklı boyda.

Bir balonu tarif etmek için kaç sayıya ihtiyacınız var? Bunları kaç dizide tutarsınız?

Dört paralel dizi, aynı indeks

balonX

1200

3001

4802

balonY

1200

1801

1002

balonRX · balonRY

32 · 420

50 · 321

24 · 362

Konum için balonX ve balonY; boyut için yatay ve dikey yarıçap: balonRX, balonRY.

ellipse çap ister: genişlik = 2 × rx, yükseklik = 2 × ry. Daire için rx ile ry eşittir.

Hedef: balon sahnesi

Bu, birazdan sizin yazacağınız sahnenin bir örneği. Her diziye birer sayı ekleyin: altıncı balon belirir.

Paralel dizilerde ekleme ve çıkarma hep birlikte

Diziler farklı uzunlukta kalırDöngü, yeni balon için balonY[i]’yi okumaya çalışır ve undefined bulur.

KuralBir diziye ne yapıyorsanız hepsine yapın: dört push, dört pop.

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

Belirti	Olası neden	Çözüm
Ekranda `undefined`	Geçersiz indeks: üç elemanlı dizide `d[3]`	`i < dizi.length` koşulunu kontrol et
Son satırda fazladan boş değer	`i <= length` ile sınır aşımı	`i < length` kullan
`push` sonrası liste görünmüyor	`draw()` içinde dolaşma yok	`for` ile ekrana yazdır
Balonlar üst üste ya da garip boyda	Paralel dizide indeks kayması	X, Y, RX, RY’yi aynı `i` ile oku
Bir balon “kaybolmuş” gibi	Yalnızca bir diziye `push` / `pop`	Ekleme-çıkarma bütün dizilerde birlikte

Balon sahnenizi çizin

balonX, balonY, balonRX, balonRY dizilerini kurun. İsterseniz bir de renk dizisi.
for içinde ellipse ile çizin. Bonus: kısa bir line ile ip.
Kâğıtta: yalnızca balonX.push(...) yapıp diğer üç diziyi unutan arkadaşınızın ekranında ne bozulur? Bir cümleyle yazın.

Örnek olay: kule yığını

Mini kule sketch’inde üç kule kuruldu, sonra bir kez GERİ AL’a basıldı. Dizilerde ne kaldı, ekranda kaç kule görünüyor?

kuleX[0] hangi kuleyi temsil eder: ilk kurulanı mı, son kurulanı mı?
GERİ AL neden her iki dizide pop ister?
length === 0 iken pop çağırmak neden risklidir?

Ortadaki balonu patlatmak istiyoruz. `pop()` işe yarar mı?

pop yalnızca sondaki elemanı çıkarıyor. Oyuncu ise istediği balona tıklıyor.

`splice(i, 1)`: aradan bir eleman çıkar

1200

3001

4802

2203

↓ balonX.splice(1, 1)

1200

4801

2202

sonrakiler bir yuva sola kayar · length 3 olur

dizi.splice(i, 1)İndeksi i olan elemanı çıkarır; length bir azalır. Boşluk kalmaz.

Paralel dizilerdeAynı i için her dizide splice(i, 1) çağrılır. Biri unutulursa indeksler kayar.

Balon Patlat: hedeflediğimiz oyun

Balona tıklayınca o balon bütün dizilerden splice ile çıkar; boşluğa tıklayınca bütün dizilere push edilir. Birazdan bunu siz yazacaksınız.

Balon Patlat (1/3): mekaniği siz yazın

Paralel dizileri ve birkaç başlangıç balonunu kurun. Class ya da nesne kullanmayın.
setup / draw: arka plan, skor, for + ellipse.
mousePressed akışı:
- Tıklanan nokta hangi balonun içinde? İndeksini bulun.
- Bulunduysa: bütün dizilerde splice(i, 1); skoru artırın.
- Bulunamadıysa: yeni bir balonu bütün dizilere push edin.

Balon Patlat (2/3): yardımcıları yapay zekâdan isteyin

A · Nokta elipsin içinde mi?noktaElipsIcindeMi(px, py, cx, cy, rx, ry) → boolean. Elips denklemini kullansın.

B · Çakışmayan yeni balonyeniBalonOlustur(…): tuvalin içinde, diğer balonlara değmeyen rastgele bir balon. Yer bulamazsa null. Dönüş: [x, y, rx, ry].

C · Uyumlu renkuyumluBalonRengi() → [r, g, b]. Pastel, birbirine yakışan renkler.

Sonra denetleyinnoktaElipsIcindeMi gerçekten elips mi kullanıyor, yoksa dist ile daire mi? yeniBalonOlustur kenarları ve diğer balonları hesaba katıyor mu? Siz splice / push’u bütün dizilerde birlikte yaptınız mı?

Balon Patlat (3/3): makyaj

Mekanik çalışıyorsa sketch’in tamamını yapıştırıp görsel ve ses cilasını isteyin: patlayınca küçülerek kaybolma, yeni balonda büyüyerek belirme, kısa ses efektleri. “Mekaniği bozma, class kullanma.”
“Neleri değiştirdin, bu ders düzeyinde madde madde açıkla” deyin. Anlamadığınız satır için devam sorusu sorun.
Önce yalnızca fikir isteyin: “Bu oyunu daha eğlenceli yapacak 6–8 makyaj fikri öner; kod yazma.” Beğendiğinizi sonra uygulatın.

HatırlatmaAnimasyon için çoğu zaman ek diziler gelir: balonOlcek, balonAlfa. Onların da birlikte push / splice edildiğini kontrol edin. Düzeyinizin üstünde bir parça gelirse “daha basit anlat ya da sadeleştir” demek doğaldır.

Yapay zekâyla: paralel diziden nesneye

x[i], y[i], r[i] için bir nesne biçimi tasarlayın: {x, y, r}.
Yapay zekâdan paralel dizi ↔ nesne dizisi dönüşümünün iskeletini isteyin. Henüz sınıf kullanmasın.
Bu aşamada hangi modelin daha okunur olduğunu bir cümleyle not edin.

MAKS = 3. Bu çağrılardan sonra `tepe` kaç, `yigin` nasıl?

tepe 3 · [4, 9, 7]
tepe 2 · [4, 9, -1]
tepe 3 · [9, 2, 7]
tepe 4 · [4, 9, 2, 7]

Dördüncü ekleme reddedilir: yer yok. Sonra en üstteki 2 çıkar. Dizi asla 3 yuvayı aşmaz.

`d = [5, 8, 1, 6]` iken `d.splice(1, 1)` sonrası `d[2]` kaç?

1
6
8
undefined

8 çıkar; dizi [5, 1, 6] olur. Sonraki elemanlar bir yuva sola kaydığı için indeksleri değişir.

Can sayısı 0 olabilen bir oyunda, “bu yuvada oyuncu yok” işareti olarak hangisi güvenli?

0
-1
3
Hepsi olur

0 geçerli bir can değeri; “boş” ile karışır. İşaret, oyunda asla oluşmayacak bir değer olmalı.

Merak edenler için kaynaklar

The Coding Train7.5 Removing Objects from Arrayssplice ile diziden eleman çıkarmak; balon patlatmanın tam karşılığı.thecodingtrain.com › 7-arrays › 5-removing-elements The Coding Train7.4 Mouse Interaction with ObjectsTıklanan nesneyi bulmak.thecodingtrain.com › 7-arrays › 4-mouse-interaction

Patt ViraArray of ObjectsParalel dizilerden sonraki adım: her balonu tek bir nesnede tutmak.pattvira.com/intro-to-creative-coding/array-of-objects Patt ViraChanging Size of ArrayDiziyi çalışırken büyütüp küçültmek.pattvira.com/intro-to-creative-coding/changing-size-of-array

Bugün ne öğrendik?

Sabit kapasite: dizi baştan MAKS uzunlukta kurulur, boş yuvalar BOS ile işaretlenir.
tepe hem dolu yuva sayısını hem sıradaki boş yuvayı gösterir.
Ekleme: yigin[tepe] = deger; tepe++. Çıkarma: tepe-- ve yuvaya BOS.
BOS geçerli bir oyun değeriyle çakışmamalı.
Paralel dizilerde push, pop, splice her zaman bütün dizilerde birlikte yapılır.
splice(i, 1) aradan eleman çıkarır; sonrakiler sola kayar.

Sıradaki ders

Kontrol oyuncuya geçiyor

Klavye: basılı tutmak, bir kez basmak ve tuş kodları.

Sonraki sunum →← Önceki

Beş yuvalı envanter, bir avuç balon

Oyunlarda envanter neden hep sınırlı?

İki yol var: uzayan liste, sabit yuvalar

Can göstergesi: beş yuva, kaçı dolu?

Fikir dört adımda

tepe: sıradaki boş yuvayı gösteren parmak

Ekleme: yiginEkle

Çıkarma: yiginCikar

Adım adım izleyelim

Skor listesinde boş yuvayı 0 ile işaretlesek olur mu?

Boş işareti, geçerli bir değerle çakışmamalı

Hangisi ne zaman?

Başka dillerde bu bir tercih değil, zorunluluk

Mini envanter: tıkla ekle, sol alttan çıkar

Listeyi yuva kutularına çevirin

Ekranda beş balon olacak. Her biri oval ve farklı boyda.

Dört paralel dizi, aynı indeks

Hedef: balon sahnesi

Paralel dizilerde ekleme ve çıkarma hep birlikte

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

Balon sahnenizi çizin

Örnek olay: kule yığını

Ortadaki balonu patlatmak istiyoruz. pop() işe yarar mı?

splice(i, 1): aradan bir eleman çıkar

Balon Patlat: hedeflediğimiz oyun

Balon Patlat (1/3): mekaniği siz yazın

Balon Patlat (2/3): yardımcıları yapay zekâdan isteyin

Balon Patlat (3/3): makyaj

Yapay zekâyla: paralel diziden nesneye

MAKS = 3. Bu çağrılardan sonra tepe kaç, yigin nasıl?

d = [5, 8, 1, 6] iken d.splice(1, 1) sonrası d[2] kaç?

Can sayısı 0 olabilen bir oyunda, “bu yuvada oyuncu yok” işareti olarak hangisi güvenli?

Merak edenler için kaynaklar

Bugün ne öğrendik?

Kontrol oyuncuya geçiyor

`tepe`: sıradaki boş yuvayı gösteren parmak

Ekleme: `yiginEkle`

Çıkarma: `yiginCikar`

Skor listesinde boş yuvayı `0` ile işaretlesek olur mu?

Ortadaki balonu patlatmak istiyoruz. `pop()` işe yarar mı?

`splice(i, 1)`: aradan bir eleman çıkar

MAKS = 3. Bu çağrılardan sonra `tepe` kaç, `yigin` nasıl?

`d = [5, 8, 1, 6]` iken `d.splice(1, 1)` sonrası `d[2]` kaç?