لعبة الذاكرة التفاعلية بواجهة عصرية

تطوير لعبة ذاكرة تفاعلية وكاملة تعمل مباشرة على متصفح الويب. اللعبة مصممة لاختبار وتقوية الذاكرة البصرية لدى اللاعبين من خلال مطابقة أزواج من الرموز التعبيرية (Emojis) المتشابهة. تم بناء المشروع بالكامل باستخدام تقنيات الويب الأساسية (HTML, CSS, JavaScript) بدون الاعتماد على أي مكتبات أو أطر عمل خارجية، مما يجعله مثالياً لعرض المهارات الأساسية في تطوير الويب.

الميزات الأساسية للمشروع:

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

توزيع عشوائي للبطاقات: يتم خلط البطاقات تلقائياً في بداية كل جولة لضمان تجربة لعب جديدة ومختلفة في كل مرة.

مؤقت زمني تنازلي: تضيف اللعبة عنصر التحدي من خلال مؤقت زمني مدته 5 دقائق، مما يتطلب من اللاعب إنهاء اللعبة قبل نفاد الوقت.

عداد للحركات: يتم حساب عدد المحاولات (الحركات) التي يقوم بها اللاعب للعثور على جميع الأزواج المتطابقة.

تأثيرات حركية جذابة: تأثير قلب البطاقة بشكل ثلاثي الأبعاد وسلس عند النقر عليها، مما يحسن من التجربة البصرية للعبة.

شاشة نهاية اللعبة: عند الفوز أو انتهاء الوقت، تظهر نافذة منبثقة (Overlay) تعرض النتيجة النهائية، وعدد الحركات، وتقييم بالأداء على شكل نجوم.

إمكانية إعادة اللعب: زر "العب مرة أخرى" يسمح بإعادة تحميل اللعبة بسهولة لبدء تحدٍ جديد.

التقنيات والأكواد المستخدمة:

HTML5:

لـ بناء الهيكل الأساسي لصفحة اللعبة، بما في ذلك حاوية اللعبة، لوحة البطاقات، وشاشة عرض النتائج النهائية.

CSS3:

لتصميم الواجهة بشكل جذاب وعصري، مع استخدام تقنيات متقدمة مثل:

CSS Grid Layout: لتنظيم شبكة عرض البطاقات بشكل منظم ومتناسق.

CSS Transitions & Transforms: لإنشاء تأثيرات القلب (flip) والحركة السلسة للبطاقات عند النقر عليها (transform: rotateY(180deg)).

Flexbox: لتوسيط العناصر داخل الحاويات مثل شاشة النتائج.

JavaScript (Vanilla JS):

لبرمجة منطق اللعبة (Game Logic) بالكامل، ويشمل ذلك:

DOM Manipulation: للتحكم في عناصر الصفحة، وإنشاء البطاقات ديناميكياً، وتحديث النصوص (مثل الوقت والحركات).

Event Handling: للاستجابة لنقرات المستخدم على البطاقات (addEventListener) وبدء اللعبة.

Arrays & Functions: لتخزين بيانات البطاقات، خلطها، وتنظيم الكود في دوال قابلة لإعادة الاستخدام.

Timers (setInterval, setTimeout): للتحكم في المؤقت الزمني التنازلي، وتأخير قلب البطاقات غير المتطابقة مرة أخرى.