Merhaba bugün biraz ChatGPT ile uğraşayım dedim ve kendisinden Html, CSS, JavaScript kodları ile ufak başka yerde pek olmayan bir oyun üretmesini istedim ve sonuç olarak bana aşağıdaki oyunu hazırladı. Sizce nasıl olmuş?

Ekran Görüntüsü

Deneme demo için tıklayınız.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Renk Seçme Oyunu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- YENİDEN OYNA BUTONU -->
  <a class="btn-top-right" href="index.html">↻ Yeniden Oyna</a>

  <div class="game-wrapper" id="game">
    <h1>Hangi Renk <span id="target-color"></span>?</h1>

    <!-- 8 seçenek için radio -->
    <input type="radio" id="a" name="pick">
    <input type="radio" id="b" name="pick">
    <input type="radio" id="c" name="pick">
    <input type="radio" id="d" name="pick">
    <input type="radio" id="e" name="pick">
    <input type="radio" id="f" name="pick">
    <input type="radio" id="g" name="pick">
    <input type="radio" id="h" name="pick">

    <!-- Renk kutuları -->
    <div class="game-board" id="boxes">
      <!-- JavaScript ile doldurulacak -->
    </div>

    <!-- Mesajlar -->
    <div class="message" id="win">🎉 Doğru Seçim! Kazandın!</div>
    <div class="message" id="lose">💀 Yanlış Renk. Eksi Puan!</div>
  </div>

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

* {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: #121212;
  color: white;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

h1 {
  margin-bottom: 10px;
  color: #00ffcc;
  text-align: center;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(4, 80px);
  gap: 15px;
  margin-top: 20px;
}

.box {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  transition: transform 0.2s ease;
  cursor: pointer;
  border: 2px solid #fff;
}

.box:hover {
  transform: scale(1.05);
}

.message {
  display: none;
  margin-top: 30px;
  font-size: 20px;
  text-align: center;
}

.show {
  display: block;
}

input[type="radio"] {
  display: none;
}

.btn-top-right {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 8px 16px;
  background: #00ffcc;
  color: #121212;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  z-index: 1000;
}

.btn-top-right:hover {
  background: #00ccaa;
}

const renkler = [
  { isim: "YEŞİL", kod: "#00ff00" },
  { isim: "SARI", kod: "#ffcc00" },
  { isim: "MAVİ", kod: "#0066ff" },
  { isim: "PEMBE", kod: "#ff00aa" },
  { isim: "TURUNCU", kod: "#ff6600" },
  { isim: "MOR", kod: "#9900cc" },
  { isim: "GRİ", kod: "#888888" },
  { isim: "KIRMIZI", kod: "#ff3333" }
];

let skor = 0;

// Skoru gösteren alanı oluştur
const gameWrapper = document.getElementById("game");
const skorEl = document.createElement("div");
skorEl.id = "score";
skorEl.style.cssText = "font-size:24px; margin-top:20px; text-align:center; color:#00ffcc;";
skorEl.textContent = `Skor: ${skor}`;
gameWrapper.appendChild(skorEl);

// Oyun kurulum fonksiyonu
function oyunKur() {
  // Doğru rengi seç
  const dogru = renkler[Math.floor(Math.random() * renkler.length)];
  document.getElementById("target-color").innerHTML = `<strong style="color:${dogru.kod}; text-transform:uppercase">${dogru.isim}</strong>`;

  // Renkleri karıştır
  const karisik = [...renkler];
  for (let i = karisik.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [karisik[i], karisik[j]] = [karisik[j], karisik[i]];
  }

  // Kutuları oluştur
  const kutular = document.getElementById("boxes");
  kutular.innerHTML = ""; // Önce kutuları temizle

  karisik.forEach((renk, index) => {
    const harf = String.fromCharCode(97 + index); // 'a', 'b', ...
    const label = document.createElement("label");
    label.className = "box";
    label.style.background = renk.kod;
    label.setAttribute("for", harf);
    label.dataset.renk = renk.isim;

    kutular.appendChild(label);
  });

  // Radio butonları temizle ve ayarla
  const radios = document.querySelectorAll('input[type="radio"]');
  radios.forEach(r => r.checked = false);

  // Mesajları gizle
  document.getElementById("win").classList.remove("show");
  document.getElementById("lose").classList.remove("show");

  // Olay dinleyicileri
  radios.forEach((r, i) => {
    r.onchange = () => {
      const label = document.querySelector(`label[for="${r.id}"]`);
      const secilen = label.dataset.renk;
      if (secilen === dogru.isim) {
        document.getElementById("win").classList.add("show");
        document.getElementById("lose").classList.remove("show");
        skor++;
      } else {
        document.getElementById("lose").classList.add("show");
        document.getElementById("win").classList.remove("show");
        skor--;
      }
      skorEl.textContent = `Skor: ${skor}`;

      // 1 saniye sonra yeni tur başlat
      setTimeout(oyunKur, 1000);
    };
  });
}

// İlk oyunu başlat
oyunKur();