Memory Card ReactJs Game

لعبة Memory Card هي تطبيق ويب تفاعلي وممتع، تم تطويره باستخدام مكتبة React مع دمج مكتبة Framer Motion لإضافة حركات ديناميكية (Animations) سلسة وجذابة لعناصر اللعبة. تم تنفيذ هذا المشروع كجزء من منهج The Odin Project لتطبيق المهارات المكتسبة عمليًا، والالتزام بأفضل ممارسات تطوير واجهات المستخدم. الميزات التقنية: ️ React: تم استخدام المزايا الحديثة مثل useState، useEffect، وuseRef للتحكم في حالة التطبيق، التفاعلات، والتحكم في الصوت والفيديو. ️ Framer Motion: لإضافة تحولات سلسة لعناصر اللعبة، مما يضفي طابعًا احترافيًا على تجربة المستخدم. تجربة صوتية ومرئية: تضمين موسيقى خلفية قابلة للتشغيل/الإيقاف، وأصوات تفاعلية عند النقر على العناصر، إلى جانب فيديو خلفي يغطي الشاشة بالكامل. Pixabay API: تم استخدامه لجلب الصور بطريقة ديناميكية مما يضيف تنوعًا بصريًا لكل تجربة لعب. ? منطق اللعبة: بسيط وممتع، يعتمد على اختبار ذاكرة اللاعب، حيث يُطلب منه عدم تكرار اختيار نفس الصورة مرتين. شاشة تحميل مخصصة مع مؤثرات بصرية لجعل تجربة الانتظار أكثر متعة. توافقية عالية مع مختلف الأجهزة والمتصفحات، وتفاعل كامل مع أحداث المستخدم (النقر، اللمس، ضغط المفاتيح) لتشغيل الأصوات بسلاسة. المهارات المكتسبة والمستخدمة في المشروع: تصميم تجربة مستخدم جذابة وسلسة. التعامل مع حالة التحميل والانتقال التدريجي داخل الواجهة باستخدام AnimatePresence. التعامل مع ملفات الوسائط المتعددة (صوت وفيديو) والتحكم بتشغيلها برمجياً. تنظيم المشروع بطريقة قابلة للتوسعة والصيانة عبر فصل المكونات (Components). استخدام واجهات برمجة التطبيقات (APIs) والتعامل مع البيانات الخارجية. تطبيق أنماط CSS مخصصة (بما في ذلك التحريك والظل) لخلق جو بصري ممتع.