Gün 6-7: Büyük Proje — Sanal Evcil Hayvan (Baştan Sona) — 7 Günde Yap-Boz

Büyük Gün: Her Şeyi Birleştir

Bugün bütün maceranın zirvesine geldik. Şimdiye kadar Bıdık’a tek tek güçler verdik. Bugün hepsini tek bir projede birleştirip Sanal Evcil Hayvan Bakıcısı oyununu baştan sona bitireceğiz.

Hatırlatma — şu güçlerin hepsi hazır:

R — Kurallar: CLAUDE.md (4. ders), hafıza (5. ders), plan modu (6. ders).
A — Beceri: yetenek kartları (7. ders), MCP/Playwright gözü (8. ders), yardımcılar (9. ders).
M — Harita: requirements.md + features/ (10. ders), /siradaki-ozellik komutu (11. ders), akıllı akış + hook (12. ders).
P — Kanıt: /prove komutu, izin kalkanı (13. ders).

Şimdi bu güçleri kullanıp haritadaki dört durağı tek tek bitireceğiz.

İnşaat Ritmi (Her Özellik İçin Aynı)

Her durakta aynı ritmi kuracağız:

Plan modunu aç (Shift + Tab) ve /siradaki-ozellik yaz.
Bıdık dosyayı okur, kodu yazar, test eder, kanıt getirir.
Sen ekran görüntülerine bak, kabul kriteri sağlandı mı kontrol et.
Tamam ise “imzalandı” de, haritadaki kutuyu yeşile boya.
Sıradaki durağa geç.

İmza atmak = haritadaki kutu yeşil. Bu ritim seni hem motive eder hem de nerede olduğunu gösterir.

Durak 1: Temel Oyun

İlk özelliği yap. Bıdık’a şunu ver:

/siradaki-ozellik

Bıdık features/01-temel-oyun.md’i okuyacak: hayvan, üç çubuk (Açlık, Mutluluk, Enerji), üç buton (Besle, Oyna, Uyut). Kodu yazacak, Playwright ile test edecek, kanıt getirecek. Kontrol et, imzala.

Bitti mi? Besle açlığı azaltıyor, Oyna mutluluğu artırıyor, Uyut enerjiyi artırıyor. ✓

Durak 2: Zamanla Azalma

/siradaki-ozellik

Bıdık features/02-zamanla-azalma.md’i yapacak: çubuklar her birkaç saniyede yavaşça azalsın (hayvan acıkır, sıkılır, yorulur). Kanıtlat.

Bitti mi? Hiçbir şey yapmadan beklersen çubuklar yavaşça düşüyor. ✓

Durak 3: Hafızada Sakla

/siradaki-ozellik

Bıdık features/03-hafizada-sakla.md’i yapacak: oyun durumu tarayıcının hafızasında saklansın (localStorage). Kanıtlat.

Bitti mi? Sayfayı kapatıp açınca çubuklar kaldığı yerden devam ediyor. ✓

Durak 4: Ruh Hali

/siradaki-ozellik

Bıdık features/04-ruh-hali.md’i yapacak: çubuklara göre hayvanın yüzü değişsin (mutlu 😺, normal 🙂, üzgün 😿). Kanıtlat.

Bitti mi? Çubuklar düşünce emoji üzgüne, yükselince mutluya dönüyor. ✓

Tüm Harita Yeşil!

Dört durak da bitti. Şimdi /loop veya elle hepsini bir kez daha kanıtlat:

/prove features/01-temel-oyun.md
/prove features/02-zamanla-azalma.md
/prove features/03-hafizada-sakla.md
/prove features/04-ruh-hali.md

Hepsi yeşilse — tebrikler, oyunun bitti! Tarayıcıyı aç ve oyna: hayvanı besle, oynat, uyut; bir süre bekle, çubukların düştüğünü gör; sayfayı kapatıp aç, durumun korunduğunu gör.

Elinde Tam Yedek Olsun: Çalışan Kodun Tamamı

Bazen bir adım takılabilir ya da Bıdık bir yeri farklı yapabilir. Sorun değil! Aşağıda oyunun çalışan tam hali var — üç dosya. İstersen Bıdık’a “kodumu tam olarak buna benzet” diyebilir ya da bu kodu doğrudan kopyalayıp tarayıcıda açabilirsin. Üç dosyayı aynı klasöre koy, index.html’e çift tıkla, oyun çalışır.

index.html

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sanal Evcil Hayvan Bakıcısı</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 id="baslik">Merhaba, ben Paşa!</h1>
    <div id="hayvan" class="pet">🐶</div>

    <div class="cubuklar">
      <div class="satir">
        <span>Açlık</span>
        <div class="bar"><div id="aclikBar" class="dolgu aclik"></div></div>
      </div>
      <div class="satir">
        <span>Mutluluk</span>
        <div class="bar"><div id="mutlulukBar" class="dolgu mutluluk"></div></div>
      </div>
      <div class="satir">
        <span>Enerji</span>
        <div class="bar"><div id="enerjiBar" class="dolgu enerji"></div></div>
      </div>
    </div>

    <div class="butonlar">
      <button id="besleBtn">Besle 🍖</button>
      <button id="oynaBtn">Oyna 🎾</button>
      <button id="uyutBtn">Uyut 😴</button>
    </div>

    <script src="app.js"></script>
  </body>
</html>

style.css

body {
  background: #ede7f6;
  font-family: sans-serif;
  text-align: center;
  margin: 0;
  padding: 24px;
}
h1 { color: #6a1b9a; font-size: 40px; }
.pet { font-size: 120px; margin: 12px; }

.cubuklar { max-width: 360px; margin: 0 auto; }
.satir { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.satir span { width: 80px; text-align: right; font-weight: bold; color: #4a148c; }
.bar {
  flex: 1;
  height: 22px;
  background: #d1c4e9;
  border-radius: 12px;
  overflow: hidden;
}
.dolgu {
  height: 100%;
  width: 50%;
  border-radius: 12px;
  transition: width 0.3s ease;
}
.aclik { background: #ef5350; }
.mutluluk { background: #ffca28; }
.enerji { background: #66bb6a; }

.butonlar { margin-top: 20px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
button {
  font-size: 18px;
  padding: 12px 20px;
  border: none;
  border-radius: 16px;
  background: #7e57c2;
  color: white;
  cursor: pointer;
  transition: transform 0.1s ease;
}
button:active { transform: scale(0.92); }

app.js

// Oyun durumu: 0-100 arası üç çubuk
let durum = JSON.parse(localStorage.getItem("pasaDurum")) || {
  aclik: 50,      // düşük = aç (kötü), yüksek = tok (iyi)
  mutluluk: 50,
  enerji: 50,
};

function kaydet() {
  localStorage.setItem("pasaDurum", JSON.stringify(durum));
}

function sinirla(x) {
  return Math.max(0, Math.min(100, x));
}

function ciz() {
  document.getElementById("aclikBar").style.width = durum.aclik + "%";
  document.getElementById("mutlulukBar").style.width = durum.mutluluk + "%";
  document.getElementById("enerjiBar").style.width = durum.enerji + "%";

  // Ruh hali: ortalamaya göre yüz değişir
  const ortalama = (durum.aclik + durum.mutluluk + durum.enerji) / 3;
  let yuz = "🐶";
  if (ortalama < 30) yuz = "😿";
  else if (ortalama < 60) yuz = "🙂";
  else yuz = "😺";
  document.getElementById("hayvan").textContent = yuz;

  kaydet();
}

document.getElementById("besleBtn").onclick = () => {
  durum.aclik = sinirla(durum.aclik + 15);
  ciz();
};
document.getElementById("oynaBtn").onclick = () => {
  durum.mutluluk = sinirla(durum.mutluluk + 15);
  durum.enerji = sinirla(durum.enerji - 5); // oynamak biraz yorar
  ciz();
};
document.getElementById("uyutBtn").onclick = () => {
  durum.enerji = sinirla(durum.enerji + 20);
  ciz();
};

// Zamanla azalma: her 3 saniyede çubuklar yavaşça düşer
setInterval(() => {
  durum.aclik = sinirla(durum.aclik - 2);
  durum.mutluluk = sinirla(durum.mutluluk - 1);
  durum.enerji = sinirla(durum.enerji - 1);
  ciz();
}, 3000);

ciz(); // başlangıçta çiz

Bu kod, dört özelliğin de bittiği çalışan bir oyundur: üç buton, üç çubuk, zamanla azalma, hafızada saklama, ruh hali. Bıdık’la yaptığın oyun bundan biraz farklı görünebilir — bu tamamen normaldir. İkisi de doğru.

Karşılaşabileceğin Durumlar

Tüm özellikler ilk seferde mükemmel olmayabilir. Sorun değil. Bu kursta başardığın şey:

Bir projeyi sıfırdan planlamak.
Bıdık’ı kurallar, hafıza, yetenek kartları, alet çantası, yardımcılarla donatmak.
Harita çizmek ve onu komutlara (/siradaki-ozellik, /prove) dönüştürmek.
Her özelliği kanıtla bitirmek.

Gerçek yazılımcılar bile her projeyi tam bitirmez. Önemli olan nasıl düşündüğün ve nasıl çalıştığın. Süreç, sonuçtan önemlidir.

Kontrol Noktası ✅

Dört özelliği de (features/01–04) sırayla yaptım ve kanıtladım.
Haritadaki dört kutuyu da yeşile boyadım.
Çalışan oyunu kendi gözümle test ettim: besle/oyna/uyut, zamanla azalma, hafıza, ruh hali.
Tam kodun yedeğini elimde tutuyorum (üç dosya).

Bugün Ne Öğrendin?

Bütün RAMP + Claude CLI güçlerini tek bir projede birleştirdin.
Haritayı /siradaki-ozellik ve /prove ile durak durak bitirdin.
Çalışan bir oyunu kanıtla doğruladın ve kendi gözünle test ettin.
Bir projeyi sıfırdan çalışır hale getirmenin tüm yolunu gördün.

Ebeveyn Notu

Bu ders kursun zirvesidir; iki güne yayılabilir. Çocuğunuz öğrendiği her aracı tek bir üründe birleştirir — bu, parçalardan bütüne giden en değerli öğrenme adımıdır. Ders sonundaki tam kod (üç dosya), bir “güvenlik ağı”dır: Bıdık bir adımda farklı davranırsa veya takılırsa, çocuğunuz bu kodu kopyalayıp çalışan oyunu görebilir ve motivasyonunu korur. Tüm özelliklerin bitmesi şart değildir; süreci tamamlamak (plan → inşaat → kanıt) başlı başına başarıdır. Çocuğunuzun emeğini ve sürecini takdir edin, yalnızca sonucu değil.

Etkinlik (Elle Yapılacak)

Çocuğunuz tüm ekran görüntülerini ve haritayı bir araya getirsin; dört kutu da yeşil olsun.
Çalışan oyunu birlikte oynayın: hayvanı bir süre bilerek ihmal edin (çubukların düşüp yüzün üzülmesini görün), sonra besleyip oynatıp mutlu edin.
Çocuğunuz oyununa son bir dokunuş için bir fikir bulsun (yeni bir buton, yeni bir renk, yeni bir hayvan) ve Bıdık’a yaptırsın — kendi yaratıcılığını eklesin.

Yarın

Yarın mezuniyet günü: küçük bir seremoni, RAMP ve Claude CLI’ın tüm komutlarını tek sayfada toplayan bir komut defteri (cheat-sheet), ve oturumlar arası devam etmenin yolu (resume). Yarın Yap-Boz Ustası unvanını alıyorsun!