K1 Katman 1 — Temel & İskelet

// Rol tanımı, mimari kararlar, ilk çalışan iskelet

K2 Katman 2 — Mekanik & Oynanış

// SRS, lock delay, scoring, combo, line clear

K3 Katman 3 — Sunum & Dayanıklılık

// Neon UI, mobil, kalıcılık, optimizasyon, debug

ℹ Prompt Zinciri Kullanım Rehberi

Zaman Tahmini

01 Mimari Temel Kararlar

Neden Tek Dosya (Self-Contained)?

Blogger gibi platformlarda harici .js / .css yüklemek çoğu zaman CSP (Content Security Policy) ve cross-origin kısıtlarına takılır. Tek dosya yaklaşımı:

• Sıfır ağ gecikmesi: Ek HTTP isteği yok, ilk render daha hızlı.
• Dağıtım kolaylığı: Kopyala-yapıştır ile her yerde çalışır.
• Versiyon bütünlüğü: JS ile CSS asla birbiriyle uyumsuz kalmaz.
• Güvenlik: Harici script enjeksiyon vektörü ortadan kalkar.

Neden Zero-Library?

Varsayımlar (Assumptions)

• Modern tarayıcı (Chrome 90+, Safari 14+, Firefox 88+) hedeflenir.
• Kullanıcı en az bir kez ekrana dokunur/klavye kullanır → AudioContext açılır (autoplay policy).
• Cihaz dikey veya yatay olabilir; aspect-ratio ile tahta her zaman 1:2 kalır.
• Retina ekranlar devicePixelRatio ile keskin render alır.

02 Oyun Motoru Prensipleri

2.1 Fixed-Timestep Gravity (Sabit Zaman Adımlı Yerçekimi)

requestAnimationFrame 60 Hz'de çağrılır ama taş düşme hızı zaman bazlıdır. Kare hızı düşse bile oyun aynı hızda akar:

// dt = geçen milisaniye (max 64ms — sekme değişiminde patlamasın)
const dt = Math.min(64, now - state.lastTime);
state.dropTimer += dt;
if (state.dropTimer >= interval) {
  state.dropTimer = 0;
  stepDown();
}

2.2 SRS (Super Rotation System) + Wall Kick

Modern Tetris standardı. Bir taş duvara/dayanağa çarptığında 5 farklı offset denenir; biri boşsa rotasyon başarılı sayılır. J/L/S/T/Z için ayrı, I için ayrı tablo gerekir.

const KICKS_JLSTZ = {
  "0>1": [[0,0],[-1,0],[-1,1],[0,-2],[-1,-2]],
  // ... 8 yön kombinasyonu
};

2.3 Lock Delay (Kilit Gecikmesi)

Taş yere değdiğinde anında kilitlenmez; 500 ms bekleme + 15 kez sıfırlama hakkı vardır. Bu, oyuncuya "son anda kaydırma" şansı verir.

2.4 7-Bag Randomizer

Yedi taş karıştırılıp torbaya atılır, hepsi tükenmeden yenisi gelmez. Böylece en kötü senaryo (arka arkaya 13 S/Z) matematiksel olarak imkânsız hale gelir.

2.5 Aksiyon Soyutlaması (Action Abstraction)

Klavye de, ekran tuşu da, swipe da aynı fonksiyonu çağırır:

function performAction(action) {
  switch (action) {
    case "left":       move(-1); break;
    case "rotateCW":   tryRotate(1); break;
    case "hardDrop":   hardDrop(); break;
    // ...
  }
}

03 Görsel Katman & Canvas

3.1 Neden Canvas, DOM Değil?

3.2 Glow Efekti Nasıl Çalışıyor?

ctx.shadowColor = glow;
ctx.shadowBlur  = size * 0.6;   // hücre boyutuna orantılı
ctx.fillStyle   = gradient;
roundRect(ctx, x0, y0, w, h, r);
ctx.fill();

3.3 Ghost Piece (Hayalet Taş)

Aktif taşın düşeceği yeri ghostY() hesaplar; aynı matris alçak opaklıkla alt tarafta çizilir. Bu, oyuncunun hata payını azaltır — kullanılabilirlik kararıdır.

3.4 Particle & Screen Shake

Satır temizlendiğinde her hücreden 6 parçacık fışkırır; shake değeri canvas translate()'ine beslenir. Bunlar juice (oyun hissi) içindir.

04 Ses Mimarisi (Web Audio API)

4.1 Osilatör Tabanlı Ses

Hiçbir .mp3 / .wav yok. Her efekt bir osilatör + gain envelope:

const osc = ctx.createOscillator();
osc.type = "square";
osc.frequency.setValueAtTime(380, t0);
osc.frequency.exponentialRampToValueAtTime(520, t0 + dur);

const g = ctx.createGain();
g.gain.setValueAtTime(0.0001, t0);
g.gain.exponentialRampToValueAtTime(0.20, t0 + 0.008);

4.2 Autoplay Policy Uyumu

Tarayıcılar kullanıcı etkileşimi olmadan sesi bloke eder. Bu yüzden AudioContext lazy initialize edilir — sadece ilk tıklama/dokunuşta açılır.

4.3 Ses Efekti Türleri

05 Girdi Sistemi & Dokunmatik

5.1 DAS / ARR (Delayed Auto Shift / Auto Repeat Rate)

Klavye veya buton basılı tutulduğunda önce DAS (160 ms) beklenir, sonra ARR (50 ms) aralıklarla tekrarlanır. Bu, profesyonel oyunlardaki standarttır.

5.2 Pointer Events (Unified Input)

pointerdown / pointerup hem fare hem dokunmatik hem stylus'u kapsar. touchstart + mousedown ayrı ayrı dinlemeye gerek yok.

5.3 Swipe Algılama

if (Math.abs(dx) > threshold && Math.abs(dx) > Math.abs(dy)) {
  performAction(dx > 0 ? "right" : "left");
} else if (dy > threshold) {
  performAction("softDrop");
}

5.4 Passive vs Non-Passive Listeners

Scroll'u bloklamayan olaylar { passive: true } ile dinlenir → tarayıcı scroll thread'ini beklemez, FPS korunur.

06 Durum Yönetimi & Kalıcılık

6.1 Tek State Nesnesi

Tüm oyun state nesnesinde yaşar: grid, aktif taş, skor, seviye, partiküller, animasyon sayaçları. Bu, hata ayıklamayı kolaylaştırır — tek bir yerde bakar her şeyi görürsün.

6.2 Güvenli localStorage

function safeStorageGet(key, fallback) {
  try { return localStorage.getItem(key) ?? fallback; }
  catch (_) { return fallback; }
}

6.3 Versioned Keys

neon_tetris_v1_high gibi versiyonlu anahtarlar, ileride skor tablosu formatı değişirse eski verinin yeni kodu bozmasını engeller.

6.4 visibilitychange ile Auto-Pause

document.addEventListener("visibilitychange", () => {
  if (document.hidden && state.running && !state.paused) {
    togglePause();
  }
});

07 E-Ticarette Davranış Modelleri

// Oyun
state.score += (base * level) + comboBonus;

// E-ticaret (aynı iskelet)
order.total = items.reduce(fn) - coupon.value + shipping;

08 Sağlık & Röntgen Görüntüleme

// Kalp monitörü bip'i
tone({ freq: 880, type: "sine", dur: 0.08, gain: 0.3 });
// Kritik alarm (iki tonlu)
tone({ freq: 1200, dur: 0.15 });
tone({ freq: 900,  dur: 0.15, delay: 0.18 });

09 Diğer Sektörler

10 Kod Parçalarının Genel Kullanım Haritası

Aşağıdaki tablo, Tetris kodundaki her teknik bloğun hangi sektörlerde doğrudan yeniden kullanılabileceğini özetler.

Sonuç: Kod Neden Evrensel?

Tetris küçük görünür ama içinde gerçek zamanlı sistemlerin tüm temel problemlerini barındırır:

• Zaman yönetimi (fixed-timestep, lock delay)
• Uzaysal çarpışma (grid, wall kick)
• Kullanıcı girdisi (klavye, pointer, swipe)
• Durum yönetimi (state machine, persistence)
• Görsel render (canvas, DPR, glow)
• Ses (Web Audio, prosedürel)
• Geri bildirim (particle, toast, shake)
• Güvenlik & dayanıklılık (try/catch, cap, visibility)

Bu sekiz problem, hangi sektörde olursanız olun yazılımın omurgasıdır. Tetris'i anlamak, bu omurgayı anlamaktır.