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.
Ekran Görüntüsü
Deneme demo için tıklayınız.
Kodlar;
<!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(); 
