Psikolojik Kavramlar Hafıza Oyunu /* Genel Sayfa Stilleri */ body { font-family: 'Poppins', sans-serif; /* Modern ve okunaklı font */ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background-color: #6a89cc; /* Sakin mavi tonu */ color: #333; padding: 20px; box-sizing: border-box; } /* Oyun Konteyneri */ #game-container { background-color: #f8f9fa; padding: 25px 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); width: 100%; max-width: 700px; /* Daha geniş kartlar için */ text-align: center; } h1 { color: #34495e; /* Koyu arduvaz mavisi */ margin-bottom: 10px; font-size: 2.1em; } /* Bilgi Alanı (Skor, Deneme Sayısı) */ #info-panel { display: flex; justify-content: space-around; align-items: center; margin-bottom: 25px; padding: 12px; background-color: #e9ecef; border-radius: 8px; font-size: 1.1em; } #info-panel span { font-weight: 600; color: #495057; } /* Oyun Tahtası (Kartlar için Grid) */ #game-board { display: grid; /* Sütun sayısı JS tarafından ayarlanacak */ gap: 12px; /* Kartlar arası boşluk */ perspective: 1000px; /* 3D çevirme efekti için */ } /* Kart Stilleri */ .card-container { background-color: transparent; width: 100%; /* Grid'e göre ayarlanacak */ aspect-ratio: 3 / 2; /* Kart en/boy oranı (içerik için daha geniş) */ cursor: pointer; } .card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.7s; transform-style: preserve-3d; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .card-container.flipped .card-inner { transform: rotateY(180deg); } .card-front, .card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; overflow-wrap: break-word; /* Uzun kelimeleri kır */ word-break: break-word; } .card-front { background: linear-gradient(135deg, #8e44ad, #c0392b); /* Canlı gradient */ color: white; font-size: 2em; /* Soru işareti veya desen için */ } .card-front::after { content: '?'; /* Veya bir ikon fontu ile desen */ } .card-back { background-color: #ffffff; color: #333; transform: rotateY(180deg); font-size: 0.85em; /* İçerik için uygun boyut */ line-height: 1.4; } .card-back p { margin: 0; } .card-container.matched .card-inner { transform: rotateY(180deg); /* Eşleşenler açık kalsın */ opacity: 0.7; /* Eşleştiğini belirtmek için hafif soluk */ box-shadow: 0 0 15px #2ecc71; /* Yeşil parlama */ } .card-container.matched .card-front, .card-container.matched .card-back { border: 2px solid #2ecc71; } /* Reset Butonu */ #reset-button { background-color: #e74c3c; /* Kırmızı */ color: white; border: none; padding: 12px 25px; margin-top: 25px; border-radius: 8px; cursor: pointer; font-size: 1.05em; transition: background-color 0.25s ease; } #reset-button:hover { background-color: #c0392b; /* Koyu kırmızı */ } /* Tamamlanma Mesajı */ #completion-message { margin-top: 20px; font-size: 1.3em; color: #27ae60; /* Başarı yeşili */ font-weight: bold; display: none; /* Başlangıçta gizli */ } /* Responsive Tasarım */ @media (max-width: 600px) { #game-container { padding: 20px 15px; } h1 { font-size: 1.8em; } #info-panel { font-size: 0.95em; flex-direction: column; gap: 5px;} .card-back { font-size: 0.75em; padding: 8px; } #game-board { gap: 8px; } } @media (max-width: 400px) { .card-back { font-size: 0.65em; padding: 5px;} } Hafıza Kartları Deneme: 0 Eşleşen: 0 / 0 Yeniden Başla Tebrikler! Tüm kartları eşleştirdiniz! const gameBoard = document.getElementById('game-board'); const attemptsCountDisplay = document.getElementById('attempts-count'); const matchesFoundDisplay = document.getElementById('matches-found'); const resetButton = document.getElementById('reset-button'); const completionMessage = document.getElementById('completion-message'); const concepts = [ { id: 1, term: "Empati", definition: "Kendini başkasının yerine koyarak duygularını anlama becerisi." }, { id: 2, term: "Stres Yönetimi", definition: "Baskı ve gerginlikle başa çıkma teknikleri ve stratejileri." }, { id: 3, term: "Öz-Farkındalık", definition: "Kendi düşünce, duygu ve davranışlarını tanıma ve anlama." }, { id: 4, term: "Motivasyon", definition: "Bir hedefi başarmak için içsel veya dışsal olarak harekete geçiren güç." }, { id: 5, term: "Problem Çözme", definition: "Zorlukların üstesinden gelmek için etkili yollar bulma süreci." }, { id: 6, term: "Pozitif Psikoloji", definition: "İnsanların iyi oluşunu ve mutluluğunu artıran faktörlere odaklanan bilim dalı." } ]; // 6 çift = 12 kart let cardsArray = []; let flippedCards = []; // En fazla 2 kart tutar let matchedPairs = 0; let attempts = 0; let totalPairs = concepts.length; let isChecking = false; // Kartlar kontrol edilirken başka tıklamayı engelle resetButton.addEventListener('click', initializeGame); function createCardElement(cardData) { const cardContainer = document.createElement('div'); cardContainer.classList.add('card-container'); cardContainer.dataset.cardId = cardData.id; // Eşleştirme için benzersiz ID (örn: "1_term", "1_def") cardContainer.dataset.pairId = cardData.pairId; // Hangi çifte ait olduğunu belirtir const cardInner = document.createElement('div'); cardInner.classList.add('card-inner'); const cardFront = document.createElement('div'); cardFront.classList.add('card-front'); const cardBack = document.createElement('div'); cardBack.classList.add('card-back'); const contentP = document.createElement('p'); contentP.textContent = cardData.text; cardBack.appendChild(contentP); cardInner.appendChild(cardFront); cardInner.appendChild(cardBack); cardContainer.appendChild(cardInner); cardContainer.addEventListener('click', () => flipCard(cardContainer, cardData)); return cardContainer; } function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } function initializeGame() { attempts = 0; matchedPairs = 0; flippedCards = []; isChecking = false; gameBoard.innerHTML = ''; completionMessage.style.display = 'none'; updateInfoPanel(); // Kartları oluştur ve karıştır cardsArray = []; concepts.forEach(concept => { cardsArray.push({ id: `${concept.id}_term`, pairId: concept.id, text: concept.term, type: 'term' }); cardsArray.push({ id: `${concept.id}_def`, pairId: concept.id, text: concept.definition, type: 'definition' }); }); shuffleArray(cardsArray); // Kartları oyun tahtasına ekle const numColumns = cardsArray.length === 12 ? 4 : (cardsArray.length === 8 ? 4 : 3) ; // 12 kart için 4x3, 8 kart için 4x2 gameBoard.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`; cardsArray.forEach(cardData => { const cardElement = createCardElement(cardData); gameBoard.appendChild(cardElement); }); } function flipCard(cardElement, cardData) { if (isChecking || cardElement.classList.contains('flipped') || cardElement.classList.contains('matched')) { return; // Zaten çevrilmiş, eşleşmiş veya kontrol ediliyorsa işlem yapma } cardElement.classList.add('flipped'); flippedCards.push({ element: cardElement, data: cardData }); if (flippedCards.length === 2) { isChecking = true; // Kontrol başlarken başka tıklama olmasın attempts++; updateInfoPanel(); checkForMatch(); } } function checkForMatch() { const card1 = flippedCards[0]; const card2 = flippedCards[1]; if (card1.data.pairId === card2.data.pairId) { // Eşleşme var matchedPairs++; updateInfoPanel(); card1.element.classList.add('matched'); card2.element.classList.add('matched'); flippedCards = []; // Seçili kartları temizle isChecking = false; if (matchedPairs === totalPairs) { completionMessage.style.display = 'block'; } } else { // Eşleşme yok setTimeout(() => { card1.element.classList.remove('flipped'); card2.element.classList.remove('flipped'); flippedCards = []; // Seçili kartları temizle isChecking = false; }, 1200); // Kartların görünmesi için biraz bekle } } function updateInfoPanel() { attemptsCountDisplay.textContent = `Deneme: ${attempts}`; matchesFoundDisplay.textContent = `Eşleşen: ${matchedPairs} / ${totalPairs}`; } // Oyunu Başlat initializeGame();