Dikkat ve Konsantrasyon Oyunu /* Genel Sayfa Stilleri */ body { font-family: 'Arial', 'Helvetica Neue', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background-color: #dfe6e9; /* Açık gri-mavi */ color: #2d3436; /* Koyu gri */ padding: 20px; box-sizing: border-box; } /* Oyun Konteyneri */ #game-container { background-color: #ffffff; padding: 25px 30px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); width: 100%; max-width: 600px; /* Oyun alanı genişliği */ text-align: center; } h1 { color: #0984e3; /* Parlak mavi */ margin-bottom: 15px; font-size: 2em; } /* Talimat ve Bilgi Alanı */ #info-area { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 10px; background-color: #f5f6fa; border-radius: 6px; } #instruction-text, #score-display, #timer-display { font-size: 1.1em; font-weight: bold; color: #555; } #instruction-text { color: #d63031; /* Talimat için kırmızımsı renk */ } /* Oyun Alanı */ #game-board { width: 100%; height: 400px; /* Oyun alanı yüksekliği */ background-color: #f0f3f4; /* Biraz daha açık oyun alanı */ border: 2px solid #b2bec3; border-radius: 8px; position: relative; /* İçindeki öğeler için referans noktası */ overflow: hidden; /* Taşan öğeleri gizle */ cursor: pointer; /* Tıklanabilir olduğunu belirt */ } /* Şekiller (JavaScript ile oluşturulacak) */ .shape { position: absolute; border-radius: 4px; /* Genel köşe yuvarlaklığı */ cursor: pointer; transition: transform 0.1s ease-out, box-shadow 0.1s ease-out; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; /* Şekil içindeki metin (opsiyonel) */ } .shape:hover { transform: scale(1.1); box-shadow: 0 0 10px rgba(0,0,0,0.3); } .square { /* Şekil boyutları JS'de ayarlanacak */ } .circle { border-radius: 50% !important; /* Daire için tam yuvarlaklık */ } /* Başlat ve Tekrar Oyna Butonları */ #start-button, #play-again-button { background-color: #00b894; /* Yeşil */ color: white; border: none; padding: 12px 25px; margin-top: 20px; border-radius: 6px; cursor: pointer; font-size: 1.1em; transition: background-color 0.25s ease; } #start-button:hover, #play-again-button:hover { background-color: #008265; /* Koyu yeşil */ } #play-again-button { display: none; /* Başlangıçta gizli */ background-color: #6c5ce7; /* Mor */ } #play-again-button:hover { background-color: #5246b8; /* Koyu mor */ } /* Geri Bildirim */ .feedback-correct { animation: flash-green 0.3s ease-out; } .feedback-incorrect { animation: flash-red 0.3s ease-out; } @keyframes flash-green { 0%, 100% { box-shadow: 0 0 0px #2ecc71; } 50% { box-shadow: 0 0 15px 5px #2ecc71; } } @keyframes flash-red { 0%, 100% { box-shadow: 0 0 0px #e74c3c; } 50% { box-shadow: 0 0 15px 5px #e74c3c; } } /* Responsive Tasarım */ @media (max-width: 600px) { #game-container { padding: 20px 15px; } h1 { font-size: 1.7em; } #info-area { flex-direction: column; gap: 8px; margin-bottom: 15px; } #instruction-text, #score-display, #timer-display { font-size: 1em; } #game-board { height: 300px; /* Mobil için daha küçük oyun alanı */ } #start-button, #play-again-button { font-size: 1em; padding: 10px 20px; } } Hedefi Bul! 🎯 Hazır mısın? Skor: 0 Süre: 30s Başla Tekrar Oyna const instructionText = document.getElementById('instruction-text'); const scoreDisplay = document.getElementById('score-display'); const timerDisplay = document.getElementById('timer-display'); const gameBoard = document.getElementById('game-board'); const startButton = document.getElementById('start-button'); const playAgainButton = document.getElementById('play-again-button'); const gameDuration = 30; // Saniye cinsinden oyun süresi const shapes = ['square', 'circle']; const colors = [ { name: 'Kırmızı', value: '#e74c3c' }, { name: 'Mavi', value: '#3498db' }, { name: 'Yeşil', value: '#2ecc71' }, { name: 'Sarı', value: '#f1c40f' }, { name: 'Mor', value: '#9b59b6' } ]; const numItems = 15; // Ekranda görünecek toplam öğe sayısı const itemSizeMin = 30; // Piksel const itemSizeMax = 60; // Piksel let score = 0; let timeLeft = gameDuration; let gameInterval = null; let currentTarget = null; let isGameRunning = false; startButton.addEventListener('click', startGame); playAgainButton.addEventListener('click', startGame); function startGame() { isGameRunning = true; score = 0; timeLeft = gameDuration; updateScoreDisplay(); updateTimerDisplay(); startButton.style.display = 'none'; playAgainButton.style.display = 'none'; gameBoard.innerHTML = ''; // Önceki şekilleri temizle generateNewTargetAndItems(); gameInterval = setInterval(() => { timeLeft--; updateTimerDisplay(); if (timeLeft 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [itemsToPlace[i], itemsToPlace[j]] = [itemsToPlace[j], itemsToPlace[i]]; } // Karıştırılmış öğeleri oyun alanına yerleştir itemsToPlace.forEach(itemData => { createAndPlaceItem(itemData); }); } function createAndPlaceItem(itemData) { const itemElement = document.createElement('div'); itemElement.classList.add('shape', itemData.shape); itemElement.style.backgroundColor = itemData.color; itemElement.style.width = `${itemData.size}px`; itemElement.style.height = `${itemData.size}px`; // Çakışmayı önlemek için basit bir deneme (çok gelişmiş değil) let attempts = 0; let x, y; do { x = Math.random() * (gameBoard.offsetWidth - itemData.size); y = Math.random() * (gameBoard.offsetHeight - itemData.size); attempts++; } while (checkOverlap(x, y, itemData.size) && attempts < 50) // 50 denemeden sonra çakışsa da yerleştir itemElement.style.left = `${x}px`; itemElement.style.top = `${y}px`; itemElement.dataset.isTarget = itemData.isTarget; // Hedef mi değil mi? itemElement.addEventListener('click', handleItemClick); gameBoard.appendChild(itemElement); } // Basit çakışma kontrolü (performans için çok optimize değil) function checkOverlap(x, y, size) { const items = gameBoard.getElementsByClassName('shape'); for (let item of items) { const rect1 = { x: x, y: y, width: size, height: size }; const rect2 = { x: parseFloat(item.style.left), y: parseFloat(item.style.top), width: parseFloat(item.style.width), height: parseFloat(item.style.height) }; if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y) { return true; // Çakışma var } } return false; // Çakışma yok } function handleItemClick(event) { if (!isGameRunning) return; const clickedItem = event.target; // Eğer tıklanan shape içindeki bir span ise (opsiyonel metin için), ana shape'i al const actualItem = clickedItem.classList.contains('shape') ? clickedItem : clickedItem.closest('.shape'); if (!actualItem) return; if (actualItem.dataset.isTarget === 'true') { score++; updateScoreDisplay(); // Animasyon için sınıf ekle, sonra kaldır actualItem.classList.add('feedback-correct'); setTimeout(() => actualItem.classList.remove('feedback-correct'), 300); generateNewTargetAndItems(); // Yeni hedef ve şekiller } else { // Yanlış tıklama için de geri bildirim actualItem.classList.add('feedback-incorrect'); setTimeout(() => actualItem.classList.remove('feedback-incorrect'), 300); // İsteğe bağlı: Yanlış tıklamada puan düşürme // score = Math.max(0, score - 1); // updateScoreDisplay(); } } function updateScoreDisplay() { scoreDisplay.textContent = `Skor: ${score}`; } function updateTimerDisplay() { timerDisplay.textContent = `Süre: ${timeLeft}s`; }