index.html #4
Description
<title>Matematik Flashcard Oyunu</title>
<style>
/* TEMEL STİLLER */
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
padding: 20px;
margin: 0;
transition: background-color 0.5s ease;
box-sizing: border-box;
}
h1 {
color: #4a4a4a;
margin-bottom: 20px;
margin-top: 150px;
}
/* PUANLAMA SİSTEMİ STİLLERİ */
#skor-tablosu-container {
position: fixed;
top: 15px;
left: 15px;
right: 15px;
display: flex;
justify-content: space-between;
align-items: flex-start;
width: calc(100% - 30px);
z-index: 100;
}
.skor-grup {
background-color: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center;
width: 180px;
}
.skor-grup h2 {
margin: 0 0 10px 0;
font-size: 18px;
color: #333;
}
.skor-grup .puan {
font-size: 28px;
font-weight: bold;
margin-bottom: 15px;
}
#puan1 { color: #3498db; }
#puan2 { color: #e74c3c; }
.buton-grup button {
padding: 8px 12px;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: bold;
color: white;
cursor: pointer;
transition: opacity 0.3s ease, background-color 0.3s;
margin: 0 5px;
}
.buton-grup button:hover:not(:disabled) {
opacity: 0.8;
}
.buton-grup button:disabled {
background-color: #bdc3c7;
cursor: not-allowed;
opacity: 0.6;
}
.dogru-btn { background-color: #2ecc71; }
.yanlis-btn { background-color: #e74c3c; }
/* KART STİLLERİ */
#grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
width: 90%;
max-width: 900px;
}
.card-container {
perspective: 1000px;
width: 100%;
height: 150px;
position: relative;
}
.card {
width: 100%;
height: 100%;
position: relative;
transition: transform 0.6s;
transform-style: preserve-3d;
cursor: pointer;
}
.card.is-flipped { transform: rotateY(180deg); }
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
padding: 10px;
transition: background-color 0.5s ease;
}
.card-front {
background-color: #ffffff;
color: #2c3e50;
}
.card-back {
color: white;
transform: rotateY(180deg);
}
body.seviye-kolay { background-color: #f0f4f8; }
.seviye-kolay .card-front { border: 2px solid #3498db; }
.seviye-kolay .card-back { background-color: #3498db; }
body.seviye-orta { background-color: #f0f8f4; }
.seviye-orta .card-front { border: 2px solid #2ecc71; }
.seviye-orta .card-back { background-color: #2ecc71; }
body.seviye-zor { background-color: #f8f0f0; }
.seviye-zor .card-front { border: 2px solid #e74c3c; }
.seviye-zor .card-back { background-color: #e74c3c; }
/* KONFETİ STİLLERİ */
.confetti {
position: fixed;
width: 10px;
height: 10px;
background-color: #f00;
opacity: 0.7;
animation: fall 5s linear forwards;
top: -20px;
}
@keyframes fall {
to { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}
</style>
<div id="skor-tablosu-container">
<div class="skor-grup">
<h2>Grup 1</h2>
<p id="puan1" class="puan">0</p>
<div class="buton-grup">
<button id="grup1-dogru" class="dogru-btn">+10</button>
<button id="grup1-yanlis" class="yanlis-btn">-5</button>
</div>
</div>
<div class="skor-grup">
<h2>Grup 2</h2>
<p id="puan2" class="puan">0</p>
<div class="buton-grup">
<button id="grup2-dogru" class="dogru-btn">+10</button>
<button id="grup2-yanlis" class="yanlis-btn">-5</button>
</div>
</div>
</div>
<h1 id="seviye-baslik">Seviye: Kolay</h1>
<div id="grid-container"></div>
<script>
const gridContainer = document.getElementById('grid-container');
const seviyeBaslik = document.getElementById('seviye-baslik');
const puan1Display = document.getElementById('puan1');
const puan2Display = document.getElementById('puan2');
const puanButonlari = document.querySelectorAll('.buton-grup button');
let mevcutSeviye = 'kolay';
let acilanKartSayisi = 0;
let confettiInterval;
let puanGrup1 = 0;
let puanGrup2 = 0;
const KART_SAYISI = 8;
let zIndexCounter = 10;
let puanlamaBekleniyor = false; // YENİ: Kart seçimini kilitlemek için kontrol
// --- BUTON VE PUANLAMA FONKSİYONLARI ---
function puanButonlariniAktiflestir(aktif) {
puanButonlari.forEach(button => {
button.disabled = !aktif;
});
}
function skorlariEkranaYaz() {
puan1Display.textContent = puanGrup1;
puan2Display.textContent = puanGrup2;
}
function puanGuncelle(grup, artis) {
if (grup === 1) puanGrup1 += artis;
else if (grup === 2) puanGrup2 += artis;
skorlariEkranaYaz();
puanButonlariniAktiflestir(false);
puanlamaBekleniyor = false; // YENİ: Kilidi aç, yeni kart seçilebilir
if (acilanKartSayisi === KART_SAYISI) {
seviyeAtlamaKontrolu();
}
}
document.getElementById('grup1-dogru').addEventListener('click', () => puanGuncelle(1, 10));
document.getElementById('grup1-yanlis').addEventListener('click', () => puanGuncelle(1, -5));
document.getElementById('grup2-dogru').addEventListener('click', () => puanGuncelle(2, 10));
document.getElementById('grup2-yanlis').addEventListener('click', () => puanGuncelle(2, -5));
// --- KONFETİ FONKSİYONLARI ---
function startConfetti() {
const colors = ['#e74c3c', '#f1c40f', '#3498db', '#2ecc71', '#9b59b6', '#1abc9c'];
confettiInterval = setInterval(() => {
const confetti = document.createElement('div');
confetti.classList.add('confetti');
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
const size = Math.random() * 8 + 6;
confetti.style.width = size + 'px';
confetti.style.height = size + 'px';
confetti.style.animationDuration = (Math.random() * 3 + 2) + 's';
document.body.appendChild(confetti);
setTimeout(() => confetti.remove(), 5000);
}, 100);
}
function stopConfetti() {
clearInterval(confettiInterval);
document.querySelectorAll('.confetti').forEach(c => c.remove());
}
// --- OYUN MEKANİĞİ FONKSİYONLARI ---
function soruUret(seviye) {
let maxSayi;
if (seviye === 'kolay') maxSayi = 5;
else if (seviye === 'orta') maxSayi = 10;
else maxSayi = 20;
let pay1 = Math.floor(Math.random() * maxSayi) + 1;
let payda1 = Math.floor(Math.random() * maxSayi) + 1;
let pay2 = Math.floor(Math.random() * maxSayi) + 1;
let payda2 = (seviye === 'kolay') ? payda1 : Math.floor(Math.random() * maxSayi) + 1;
const islem = Math.random() < 0.5 ? '+' : '-';
if (islem === '-' && (pay1 * payda2 < pay2 * payda1)) {
[pay1, pay2] = [pay2, pay1];
[payda1, payda2] = [payda2, payda1];
}
const soruMetni = `( ${pay1} / ${payda1} ) ${islem} ( ${pay2} / ${payda2} )`;
let cevapPay = (islem === '+') ? (pay1 * payda2) + (pay2 * payda1) : (pay1 * payda2) - (pay2 * payda1);
let cevapPayda = payda1 * payda2;
const ebob = (a, b) => b === 0 ? a : ebob(b, a % b);
const bolen = ebob(Math.abs(cevapPay), Math.abs(cevapPayda));
const sadeCevapPay = cevapPay / bolen;
const sadeCevapPayda = cevapPayda / bolen;
let cevapMetni = (sadeCevapPayda === 1) ? `${sadeCevapPay}` : (sadeCevapPay === 0) ? "0" : `${sadeCevapPay} / ${sadeCevapPayda}`;
return { soru: soruMetni, cevap: cevapMetni };
}
function kartlariYukle(seviye, puanlariSifirla = false) {
stopConfetti();
puanButonlariniAktiflestir(false);
puanlamaBekleniyor = false;
zIndexCounter = 10;
gridContainer.innerHTML = '';
acilanKartSayisi = 0;
mevcutSeviye = seviye;
seviyeBaslik.textContent = `Seviye: ${seviye.charAt(0).toUpperCase() + seviye.slice(1)}`;
document.body.className = 'seviye-' + seviye;
if (puanlariSifirla) {
puanGrup1 = 0;
puanGrup2 = 0;
}
skorlariEkranaYaz();
const secilenSorular = Array.from({ length: KART_SAYISI }, () => soruUret(seviye));
secilenSorular.forEach(({ soru, cevap }) => {
const cardContainer = document.createElement('div');
cardContainer.className = 'card-container';
cardContainer.innerHTML = `
<div class="card">
<div class="card-face card-front">${soru}</div>
<div class="card-face card-back">${cevap}</div>
</div>
`;
gridContainer.appendChild(cardContainer);
const cardElement = cardContainer.querySelector('.card');
cardElement.addEventListener('click', () => {
// DÜZELTME: Puanlama bekleniyorsa başka kart çevirme
if (puanlamaBekleniyor) {
alert("Lütfen önce mevcut soru için puan verin!");
return;
}
if (cardElement.classList.contains('is-flipped')) return;
cardContainer.style.zIndex = zIndexCounter++;
cardElement.classList.add('is-flipped');
puanButonlariniAktiflestir(true);
puanlamaBekleniyor = true; // YENİ: Kilidi aktif et
acilanKartSayisi++;
});
});
}
function seviyeAtlamaKontrolu() {
setTimeout(() => {
startConfetti();
let sonrakiSeviye = '';
let beklemeSuresi = 5000;
setTimeout(() => {
if (mevcutSeviye === 'zor') {
let kazananMesaji = '';
if (puanGrup1 > puanGrup2) kazananMesaji = `Grup 1, ${puanGrup1} puanla kazandı!`;
else if (puanGrup2 > puanGrup1) kazananMesaji = `Grup 2, ${puanGrup2} puanla kazandı!`;
else kazananMesaji = `Oyun ${puanGrup1} puanla berabere bitti!`;
alert(`🏆 OYUN BİTTİ! 🏆\n\n${kazananMesaji}`);
const onay = confirm("Yeni bir oyuna başlamak ister misin?");
if (onay) kartlariYukle('kolay', true);
else stopConfetti();
} else {
if (mevcutSeviye === 'kolay') sonrakiSeviye = 'orta';
else if (mevcutSeviye === 'orta') sonrakiSeviye = 'zor';
const mesaj = `Tebrikler! Bir sonraki seviyeye (${sonrakiSeviye}) geçmek ister misin?`;
const onay = confirm(mesaj);
if (onay) kartlariYukle(sonrakiSeviye, false);
else kartlariYukle(mevcutSeviye, true);
}
}, beklemeSuresi);
}, 500);
}
// OYUNU BAŞLAT
kartlariYukle('kolay', true);
</script>