لعبة ذاكرة تفاعلية احترافية مبنية بـ React وTypeScript مع نظام تسجيل وترتيب اللاعبين

قمت بتطوير لعبة ذاكرة تفاعلية (Memory Card Game) متكاملة باستخدام React 19.1 + TypeScript + Vite، مع تصميم حديث وتفاعل سلس مناسب لجميع الأجهزة.

اللعبة تحتوي على مستويات متعددة، نظام تتبع لحظي للأداء، ولوحة متصدرين (Leaderboard) لحفظ نتائج اللاعبين وترتيبهم.

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

? نظام تسجيل بسيط للمستخدمين لتخصيص التجربة وتتبع النتائج

? 3 مستويات صعوبة:

Easy — شبكة 2×2

Medium — شبكة 4×4

Hard — شبكة 6×6

⏱️ تتبع لحظي للعبة يسجل التحركات والوقت تلقائيًا

? نظام Leaderboard دائم يستخدم Local Storage مع ترتيب ذكي:

أولًا حسب عدد التحركات (الأقل أفضل)

ثانيًا حسب الوقت (الأسرع أفضل)

? إحصائيات كاملة بعد كل جولة تشمل: المستوى، عدد التحركات، الوقت، والترتيب

? واجهة متجاوبة وحديثة تناسب الهاتف والتابلت والكمبيوتر

? شاشة إنهاء اللعبة مع خيار إعادة اللعب وإظهار الأداء

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

React 19.1.0 + TypeScript

Vite 7.0.0

React Router DOM 7.6.3

ESLint لضمان جودة الكود

هيكلة المشروع:

صفحة تسجيل الدخول وإدخال اسم اللاعب

صفحة اللعب بواجهة بطاقات تفاعلية

صفحة لوحة المتصدرين (Leaderboard) لعرض أفضل النتائج

شريط تنقل يحتوي على أدوات التحكم الرئيسية

شاشة تلخيص نتائج اللعب بعد إنهاء الجولة

جودة الكود:

كتابة كود قوي وآمن باستخدام TypeScript

استخدام Context API لإدارة الحالة

تطوير Custom Hooks للمنطق الأساسي للعبة

مكونات منظمة وقابلة لإعادة الاستخدام

تطبيق معايير linting وأفضل الممارسات