Memory Game

1. نوع العمل

تطبيق ويب (Web Application) تعليمي وترفيهي من نوع "العاب المتصفح"، يتميز بواجهة مستخدم متجاوبة (Responsive Design) وتجربة مستخدم سلسة تعتمد على المنطق البرمجي.

2. الميزات الأساسية

نظام المؤقت (Timer): يحسب الوقت المستغرق بالثواني منذ لحظة الضغط على "Start Game" لتشجيع المستخدم على إنهاء اللعبة في أسرع وقت.

شريط التقدم (Progress Bar): شريط تفاعلي يعرض نسبة الإنجاز (Status) بناءً على عدد الأزواج التي تم العثور عليها.

مؤثرات صوتية: يتضمن التطبيق أصواتاً تفاعلية عند قلب الكروت، عند المطابقة الصحيحة، عند الخطأ، وعند الفوز النهائي.

لوحة تحكم ديناميكية: يتم توزيع الكروت بشكل عشوائي في كل مرة تبدأ فيها اللعبة لضمان عدم تكرار النمط.

تصميم جذاب: واجهة عصرية تعتمد على تدرجات الألوان (Radial Gradients) وتأثيرات قلب الكروت ثلاثية الأبعاد (3D Flip Animation).

3. طريقة التنفيذ (التقنيات المستخدمة)

تم تنفيذ المشروع باستخدام بنية برمجية حديثة تضمن الكفاءة والقابلية للتوسع:

HTML5 & Bootstrap: لبناء الهيكل التنظيمي للعبة وتنسيق العناصر بشكل متجاوب يتناسب مع مختلف الشاشات.

CSS3: لإضافة اللمسات الجمالية، حيث استُخدمت خاصية transform-style: preserve-3d و backface-visibility لعمل تأثير قلب الكروت الواقعي.

TypeScript: هي اللغة الأساسية المستخدمة لكتابة المنطق البرمجي (Logic)، مما يوفر بيئة برمجية قوية (Strongly Typed) تقلل من الأخطاء وتسهل إدارة الحالة (State) مثل تتبع الكروت المقلوبة والمطابقة.

المنطق البرمجي (Game Logic): * يتم استخدام مصفوفة تحتوي على مسارات الصور.

تُستخدم دالة sort(() => Math.random() - 0.5) لخلط الكروت عشوائياً.

يتم التحقق من تطابق الكرتين عند كل محاولة، وفي حال عدم التطابق يتم قفل اللوحة (Lock Board) لفترة وجيزة قبل إعادة قلب الكروت.