🧠 لعبة الذاكرة

لعبة الذاكرة | تحدي ذاكرتك وذكائك :root { --primary-color: #f39c12; /* برتقالي */ --secondary-color: #2980b9; /* أزرق */ --light-color: #ecf0f1; --dark-color: #2c3e50; --success-color: #27ae60; --card-bg: #fff; --card-front-bg: #34495e; --border-radius: 10px; } body { font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: var(--light-color); color: var(--dark-color); display: flex; flex-direction: column; align-items: center; min-height: 100vh; } main { width: 100%; max-width: 800px; background: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: 0 5px 20px rgba(0,0,0,0.1); } h1 { color: var(--primary-color); text-align: center; } article { text-align: right; line-height: 1.7; margin-top: 40px; } .game-info { display: flex; justify-content: space-around; align-items: center; margin-bottom: 25px; background-color: #f9f9f9; padding: 15px; border-radius: var(--border-radius); font-size: 1.2em; } .game-info span { font-weight: bold; color: var(--primary-color); } .game-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; perspective: 1000px; /* لإعطاء تأثير ثلاثي الأبعاد للقلب */ } @media (max-width: 600px) { .game-board { grid-template-columns: repeat(3, 1fr); gap: 10px; } } .card { background-color: transparent; width: 100%; aspect-ratio: 1 / 1; /* للحفاظ على الشكل المربع */ cursor: pointer; position: relative; transform-style: preserve-3d; transition: transform 0.6s; } .card.is-flipped { transform: rotateY(180deg); } .card.is-matched { transform: scale(0.95); opacity: 0.7; cursor: default; } .card-face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; border-radius: var(--border-radius); display: flex; align-items: center; justify-content: center; } .card-face-front { background-color: var(--card-front-bg); color: var(--primary-color); font-size: 3em; font-weight: bold; } .card-face-back { background-color: var(--card-bg); transform: rotateY(180deg); } .card-face-back img { width: 90%; height: 90%; object-fit: cover; border-radius: calc(var(--border-radius) * 0.8); } .game-controls { text-align: center; margin-top: 30px; } #reset-btn { background-color: var(--secondary-color); color: white; padding: 12px 30px; font-size: 1.1em; border: none; border-radius: var(--border-radius); cursor: pointer; transition: transform 0.2s, background-color 0.3s; } #reset-btn:hover { transform: scale(1.05); } 🧠 لعبة الذاكرة الحركات: 0 الوقت: 00:00 إعادة اللعب هل ذاكرتك حادة؟ أثبت ذلك! مرحباً بك في لعبة الذاكرة الكلاسيكية، التحدي الممتع الذي ينشط عقلك ويختبر قوة ملاحظتك. الهدف بسيط: اقلب بطاقتين في كل مرة وحاول العثور على الأزواج المتطابقة. كلما وجدت تطابقاً، بقيت البطاقات مكشوفة. هل يمكنك كشف كل البطاقات بأقل عدد من الحركات وفي أسرع وقت ممكن؟ فوائد ألعاب الذاكرة: تنشيط الدماغ: تساعد هذه الألعاب على تحسين الذاكرة قصيرة المدى والتركيز. تمرين للملاحظة: تدرب عينيك على تمييز الأنماط والتفاصيل الدقيقة بسرعة. متعة لجميع الأعمار: تصميمها البسيط يجعلها مناسبة للأطفال والكبار على حد سواء. تخفيف التوتر: التركيز في اللعبة يمكن أن يكون وسيلة رائعة للاسترخاء وتصفية الذهن. استعد للتحدي، ابدأ اللعب الآن، وشارك نتيجتك مع أصدقائك! const memoryGameApp = { elements: { gameBoard: document.getElementById('game-board'), movesCountEl: document.getElementById('moves-count'), timerEl: document.getElementById('timer'), resetBtn: document.getElementById('reset-btn'), }, state: { // استبدل هذه الروابط بروابط صور من موقعك cardImages: [ 'https://picsum.photos/id/10/200', 'https://picsum.photos/id/20/200', 'https://picsum.photos/id/30/200', 'https://picsum.photos/id/40/200', 'https://picsum.photos/id/50/200', 'https://picsum.photos/id/60/200' ], cards: [], flippedCards: [], matchedPairs: 0, moves: 0, timerInterval: null, gameLocked: false, // لمنع قلب أكثر من بطاقتين }, init() { this.startGame(); this.elements.resetBtn.addEventListener('click', this.startGame.bind(this)); }, startGame() { this.resetState(); this.createGameBoard(); this.startTimer(); }, resetState() { clearInterval(this.state.timerInterval); this.state.gameLocked = false; this.state.flippedCards = []; this.state.matchedPairs = 0; this.state.moves = 0; this.elements.movesCountEl.textContent = '0'; this.elements.timerEl.textContent = '00:00'; }, createGameBoard() { const gameImages = [...this.state.cardImages, ...this.state.cardImages]; this.shuffle(gameImages); this.elements.gameBoard.innerHTML = ''; gameImages.forEach(imageSrc => { const card = this.createCardElement(imageSrc); this.elements.gameBoard.appendChild(card); }); }, createCardElement(imageSrc) { const card = document.createElement('div'); card.classList.add('card'); card.dataset.image = imageSrc; card.innerHTML = ` ? `; card.addEventListener('click', () => this.flipCard(card)); return card; }, shuffle(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]]; } }, flipCard(card) { if (this.state.gameLocked || card.classList.contains('is-flipped') || this.state.flippedCards.length >= 2) { return; } card.classList.add('is-flipped'); this.state.flippedCards.push(card); if (this.state.flippedCards.length === 2) { this.incrementMoves(); this.checkForMatch(); } }, incrementMoves() { this.state.moves++; this.elements.movesCountEl.textContent = this.state.moves; }, checkForMatch() { this.state.gameLocked = true; const [card1, card2] = this.state.flippedCards; const isMatch = card1.dataset.image === card2.dataset.image; if (isMatch) { this.handleMatch(card1, card2); } else { this.handleMismatch(card1, card2); } }, handleMatch(card1, card2) { setTimeout(() => { card1.classList.add('is-matched'); card2.classList.add('is-matched'); this.state.matchedPairs++; this.state.flippedCards = []; this.state.gameLocked = false; if (this.state.matchedPairs === this.state.cardImages.length) { this.endGame(); } }, 500); }, handleMismatch(card1, card2) { setTimeout(() => { card1.classList.remove('is-flipped'); card2.classList.remove('is-flipped'); this.state.flippedCards = []; this.state.gameLocked = false; }, 1200); }, startTimer() { let seconds = 0; this.state.timerInterval = setInterval(() => { seconds++; const mins = String(Math.floor(seconds / 60)).padStart(2, '0'); const secs = String(seconds % 60).padStart(2, '0'); this.elements.timerEl.textContent = `${mins}:${secs}`; }, 1000); }, endGame() { clearInterval(this.state.timerInterval); setTimeout(() => { alert(`🎉 تهانينا! لقد فزت في ${this.state.moves} حركة وخلال ${this.elements.timerEl.textContent}!`); }, 300); } }; document.addEventListener('DOMContentLoaded', () => memoryGameApp.init());