Memory Game

قمت بتطوير لعبة ذاكرة تفاعلية ثنائية اللاعبين باستخدام HTML5 وCSS3 وJavaScript دون الاعتماد على أي مكتبات أو أطر عمل خارجية، مع التركيز على تقديم تجربة استخدام سلسة وتصميم متجاوب يعمل بكفاءة على مختلف الأجهزة.

تعتمد اللعبة على نظام متكامل لإدارة مجريات اللعب، حيث يتم خلط البطاقات عشوائيًا عند بداية كل جولة باستخدام خوارزمية Fisher–Yates، وإدارة أدوار اللاعبين، وحساب النقاط تلقائيًا، والتحقق من تطابق البطاقات، وإعلان الفائز فور انتهاء اللعبة.

تم الاهتمام بتجربة المستخدم من خلال إضافة مؤثرات بصرية ثلاثية الأبعاد (3D Flip Animation)، ومؤثرات صوتية عند النجاح أو الخطأ، ومنع النقرات المتعددة أثناء مقارنة البطاقات لضمان سير اللعبة بشكل صحيح، بالإضافة إلى إمكانية إعادة تشغيل اللعبة في أي وقت مع إعادة ترتيب البطاقات تلقائيًا.

كما يتضمن المشروع وضعًا اختياريًا للعب ضد الذكاء الاصطناعي، حيث تم دمج Google Gemini API لإنشاء خصم ذكي يستطيع تذكر البطاقات التي تم كشفها واتخاذ قراراته بناءً على المعلومات المتاحة، مع توفير آلية احتياطية تضمن استمرار اللعبة في حالة تعذر الاتصال بخدمة الذكاء الاصطناعي.

أبرز المميزات

لعبة ثنائية اللاعبين.

إمكانية اللعب ضد الذكاء الاصطناعي.

خلط البطاقات عشوائيًا في كل جولة.

مؤثرات قلب ثلاثية الأبعاد (3D Flip).

نظام متكامل لإدارة الأدوار.

حساب النقاط تلقائيًا.

إعلان الفائز عند انتهاء اللعبة.

مؤثرات صوتية عند التطابق أو الخطأ.

منع التفاعل أثناء مقارنة البطاقات.

تصميم متجاوب مع الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر.

إمكانية إعادة تشغيل اللعبة بضغطة واحدة.

التقنيات المستخدمة

HTML5

CSS3

JavaScript (ES6)

Google Gemini API

يعكس هذا المشروع خبرتي في تطوير تطبيقات الويب التفاعلية، والتعامل مع الـ DOM، وإدارة حالة التطبيق (State Management)، وتطبيق الخوارزميات، وإنشاء واجهات مستخدم احترافية ومتجاوبة، بالإضافة إلى دمج خدمات الذكاء الاصطناعي داخل تطبيقات الويب.