برمجة لعبة الذاكرة باستخدام html & css & javascript

كتابة كود لعبة الذاكرة باستخدام HTML و CSS و JavaScript رحلة ممتعة ومُثمرة تُتيح لك الإبداع وحلّ المشكلات وتعلم مهارات جديدة.

ملف index.html

شرح HTML:

DOCTYPE و html: تعريف مستند HTML وبداية العنصر الرئيسي.
head: يحتوي على بيانات تعريف المستند مثل الترميز (UTF-8)، إعدادات العرض (viewport)، والعنوان (title). كما يحتوي على رابط لملف CSS الخارجي.
body: يحتوي على عنوان اللعبة، عنصر لعرض المؤقت، وعنصر div يمثل لوحة اللعبة. كما يتم تضمين ملف JavaScript الخارجي.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لعبة الذاكرة</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>لعبة الذاكرة</h1>
    <div id="timer">الوقت: 0 ثانية</div>
    <div id="game-board" class="game-board"></div>
    <script src="script.js"></script>
</body>
</html>

ملف styles.css

شرح CSS:

body: تصميم الصفحة بحيث تكون العناصر في المنتصف عموديًا وأفقيًا، وخلفية رمادية فاتحة، وخط رئيسي هو Arial.
h1: تصميم العنوان بإضافة مسافة أسفل العنوان.
#timer: تصميم المؤقت بحجم خط 24px ومسافة أسفله.
.game-board: إنشاء شبكة 4×4 لبطاقات اللعبة، بحجم 100×100 بكسل لكل خلية ومسافة 10 بكسل بين الخلايا.
.card: تصميم البطاقات بلون خلفية أزرق، وحجم خط 24px، ونص أبيض، وحدود مستديرة، ومؤشر الفأرة يتحول إلى اليد عند المرور.
.card.hidden: نفس تصميم البطاقات الأساسية ولكن النص والخلفية بنفس اللون لإخفاء النص.
.card.matched: تصميم البطاقات المتطابقة بلون أخضر فاتح وتعطيل المؤشر.

				
					body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    margin-bottom: 20px;
}

#timer {
    font-size: 24px;
    margin-bottom: 20px;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-template-rows: repeat(4, 100px);
    gap: 10px;
}

.card {
    width: 100px;
    height: 100px;
    background-color: #1e90ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    cursor: pointer;
    border-radius: 10px;
}

.card.hidden {
    background-color: #1e90ff;
    color: #1e90ff;
    cursor: pointer;
}

.card.matched {
    background-color: #32cd32;
    cursor: default;
}

ملف script.js

1. الحدث DOMContentLoaded

				
					document.addEventListener('DOMContentLoaded', () => {

هذا الحدث يضمن أن الكود داخل الوظيفة سيتم تشغيله فقط بعد أن يتم تحميل DOM بالكامل.

2. تعريف العناصر والمتغيرات

				
					    const gameBoard = document.getElementById('game-board');
    const timerElement = document.getElementById('timer');
    const cards = [
        '🍎', '🍌', '🍒', '🍇', '🍋', '🍊', '🍐', '🍉',
        '🍎', '🍌', '🍒', '🍇', '🍋', '🍊', '🍐', '🍉'
    ];

gameBoard و timerElement هما عناصر HTML للوصول إلى لوحة اللعبة والموقت.
cards هي مصفوفة تحتوي على رموز الفواكه، مع تكرار كل رمز مرتين لخلق الأزواج.

3. متغيرات الحالة

				
					    let firstCard = null;
    let secondCard = null;
    let lockBoard = false;
    let pairsFound = 0;
    let startTime;
    let timerInterval;

firstCard و secondCard يحتفظان بالبطاقات المكشوفة حاليًا.
lockBoard يستخدم لمنع النقرات أثناء فحص التطابق.
pairsFound هو عداد للأزواج المطابقة.
startTime و timerInterval يستخدمان لإدارة المؤقت.

4. دالة startTimer

				
					    function startTimer() {
        startTime = Date.now();
        timerInterval = setInterval(() => {
            const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
            timerElement.textContent = `الوقت: ${elapsedTime} ثانية`;
        }, 1000);
    }

تبدأ المؤقت بتسجيل الوقت الحالي في startTime.
تحدث النص داخل timerElement كل ثانية لعرض الوقت المستغرق.

5. دالة stopTimer

				
					    function stopTimer() {
        clearInterval(timerInterval);
    }

توقف المؤقت عن طريق إيقاف الفاصل الزمني المحدد في timerInterval.

6. دالة shuffle

				
					    function 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]];
        }
        return array;
    }

تقوم بخلط مصفوفة البطاقات باستخدام خوارزمية Fisher-Yates.

7. دالة createBoard

				
					    function createBoard() {
        const shuffledCards = shuffle(cards);
        shuffledCards.forEach((card, index) => {
            const cardElement = document.createElement('div');
            cardElement.classList.add('card', 'hidden');
            cardElement.dataset.card = card;
            cardElement.addEventListener('click', () => revealCard(cardElement));
            gameBoard.appendChild(cardElement);
        });
        startTimer();
    }

تقوم بإنشاء البطاقات في لوحة اللعبة وتوزيعها بشكل عشوائي.
تضيف مستمعًا للحدث click لكل بطاقة لاستدعاء دالة revealCard.
تبدأ المؤقت عند إنشاء اللوحة.

8. دالة revealCard

				
					    function revealCard(cardElement) {
        if (lockBoard || cardElement === firstCard || cardElement.classList.contains('matched')) return;

        cardElement.classList.remove('hidden');
        cardElement.textContent = cardElement.dataset.card;

        if (!firstCard) {
            firstCard = cardElement;
        } else {
            secondCard = cardElement;
            lockBoard = true;
            checkForMatch();
        }
    }

تكشف البطاقة عند النقر إذا لم يكن هناك عملية فحص تطابق جارية (lockBoard) ولم تكن البطاقة هي نفسها التي تم النقر عليها أولاً.
تحدد البطاقات الأولى والثانية المكشوفة وتبدأ عملية فحص التطابق إذا كانت البطاقة الثانية قد انكشفت.

9. دالة checkForMatch

				
					    function checkForMatch() {
        if (firstCard.dataset.card === secondCard.dataset.card) {
            firstCard.classList.add('matched');
            secondCard.classList.add('matched');
            pairsFound++;
            resetBoard();
            if (pairsFound === cards.length / 2) {
                stopTimer();
                setTimeout(() => alert(`تهانينا! لقد فزت باللعبة! الوقت المستغرق: ${Math.floor((Date.now() - startTime) / 1000)} ثانية`), 500);
            }
        } else {
            setTimeout(() => {
                firstCard.classList.add('hidden');
                secondCard.classList.add('hidden');
                firstCard.textContent = '';
                secondCard.textContent = '';
                resetBoard();
            }, 1000);
        }
    }

تتحقق من تطابق البطاقات المكشوفة.
إذا تطابقت، تقوم بإضافة فئة matched لتعطيلها وزيادة عداد الأزواج المطابقة (pairsFound).
إذا اكتمل عدد الأزواج، توقف المؤقت وتعرض رسالة تهنئة.
إذا لم تتطابق، تخفي البطاقات مرة أخرى بعد مهلة زمنية قصيرة.

10. دالة resetBoard

				
					    function resetBoard() {
        [firstCard, secondCard] = [null, null];
        lockBoard = false;
    }

تعيد تعيين البطاقات المكشوفة وتسمح بالنقرات الجديدة.

11. استدعاء createBoard

				
					    createBoard();
});

تبدأ اللعبة بإنشاء لوحة اللعبة وبدء المؤقت.

موارد إضافية:

JavaScript for Beginners: https://www.freecodecamp.org/news/learn-javascript-for-beginners/ – دورة مجانية لتعلم جافا سكريبت من موقع freeCodeCamp.

Post Views: 2٬204