🧠 “Kod + Mantık + Eğlence+ JavaScript”

JavaScript bazen insanı sinirlendiren eski sevgili, bazen de seni her gün şaşırtan tatlı bir partner gibidir.
Ama bugün…
JavaScript ile 30 satırda mini bir oyun yapacağız ve sen:

“Ya cidden 30 satır mı? Şaka mı bu?”
diyeceksin.

Oyun türümüz:

👉 Reaction Game (Refleks Oyunu)

Ekrandaki kutu rasgele bir anda yeşile dönüyor, sen de ne kadar hızlı tıkladığını ölçüyorsun.
Ve evet… Bunu 30 satırda yapıyoruz!

🚀 1) Oyunun Mantığı — 30 Satırın Arkasındaki Küçük Beyin Cerrahisi

Bu oyunda 3 ana olay var:

✔️ 1. Hazırlık

Kutumuz gri renkte. “Henüz tıklama” modunda.

✔️ 2. Bekleme

JavaScript beklediğini belli etmeyi sever.
setTimeout() ile kutuyu rastgele bir süre sonra yeşile dönüştürüyoruz.

✔️ 3. Refleks Ölçümü

Kutu yeşile dönünce sen tıklıyorsun → timestamp alıyoruz → süre hesaplıyoruz.

Bu kadar.
Oyunda gizli bir NASA teknolojisi yok.

🧩 2) HTML: 7 Satırda Sahne Kurulumu

Aşko oyunun sahnesi bu kadar basit:

&lt;div id="box">Tıkla!&lt;/div>
&lt;p id="result">&lt;/p>

📌 İPUCU:
Oyunu minimal tutmak en güzeli. “Less HTML, more magic.”

🎨 3) CSS: Kutuyu Biraz Şekillendirelim (Sadece Süs)

Kodumuz 30 satır JS’te, CSS’i istediğin kadar şımartabilirsin 😘

#box {
  width: 200px;
  height: 200px;
  background: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;
  cursor: pointer;
  border-radius: 20px;
}

💡 Tip:
Kutu ne kadar “çekici” görünürse refleksin o kadar artar.
(Bilimsel değildir ama ben uydurdum.)

⚙️ 4) 30 Satırlık JavaScript Efsanesi

İşte oyunun tamamı.
Yemin ederim say — 30 satır 👇

let box = document.getElementById("box");
let result = document.getElementById("result");

let startTime, endTime;
let clickable = false;

function startGame() {
  box.style.background = "gray";
  box.textContent = "Hazır ol...";
  clickable = false;

  let delay = Math.random() * 3000 + 1000;

  setTimeout(() => {
    box.style.background = "green";
    box.textContent = "Tıkla!";
    startTime = Date.now();
    clickable = true;
  }, delay);
}

box.onclick = () => {
  if (!clickable) {
    result.textContent = "Çok erken tıkladın";
    return;
  }

  endTime = Date.now();
  let reaction = endTime - startTime;
  result.textContent = `Refleks Süresi: ${reaction} ms 🔥`;
  startGame();
};

startGame();

🧠 5) Kodları Tek Tek Çözelim (Üniversite Dersi Modu)

🎯 1) Rastgele bekleme süresi

let delay = Math.random() * 3000 + 1000;

JavaScript:

“Hahah tıkladın tıkladın, sürprizli bir gecikme geliyor.”

Bu kod:

Minimum 1 saniye
Maximum 4 saniye
bekletir.

🎯 2) Kutuyu “tıklanabilir” yapma

clickable = true;

JavaScript’te oyun yaparken state kavramı çok önemlidir.
Bu boolean, “şu an tıklayabilirsin bro” mantığını yönetir.

🎯 3) Refleks ölçümü

let reaction = endTime - startTime;

Daha profesyonel yapmak istersen:

ortalama refleks
en hızlı refleks
rekor tablosu
ekleyebilirsin.

💥 6) Oyunu Geliştirmek İçin 10 Çılgın Fikir

Çünkü yazılımcılar bir şey çalışınca asla orada bırakmaz:

🌟 1. Kutu her tıklamada yer değiştirsin

(Hem oyun zorlaşır hem sinir bozucu.)

🌟 2. Arka plana animasyon ekle

CSS ile:
transition: background 0.3s;

🌟 3. “Erken tıklama” için ses efekti ekle

Kutu sana diss atsın mesela:

“Hey hey hey sakin ol şampiyon.”

🌟 4. Kutu rengini kırmızı → sarı → yeşil animasyonlu değiştir

“3…2…1… GO!” efekti.

🌟 5. Mobil uyumlu hale getir

Dokunmatik tıklamaları ekle.

🌟 6. Puan sistemi yap

Her iyi reaksiyon = +10 puan
Yavaşsan = 0 😔

🌟 7. Sayaç ekle

30 saniyelik challenge modu.

🌟 8. Kutu büyüyüp küçülsün

CSS transform: scale() manyak bir şey.

🌟 9. Başlangıç ekranı koy

“Başla” butonu.

🌟 10. Çılgın mod

Kutu random renk, random boyut, random pozisyon.
Tam bir kaos.
(Çok eğlenceli.)

❤️ 7) Bu Oyun Neden Muhteşem Bir Öğrenme Aracı?

Çünkü sadece 30 satırda şu konuları öğreniyorsun:

✔ setTimeout()
✔ Math.random()
✔ DOM manipülasyonu
✔ State yönetimi
✔ Event handling
✔ Zaman ölçümü (Date.now())
✔ Oyun döngüsü mantığı
✔ UI feedback (renk, text değişimi)

Sana gizli bir şey söyleyeyim :

Bu 30 satır, seni JavaScript’e CRUSH eder.

🎮 30 Satırda Mini Bir JavaScript Oyun Yapıyoruz!