عرض مباشر: - لعبة الرموز التعبيرية

الرابط المباشر : https://emojigame1.netlify.app/
في هذا التدريب، دعونا نبني لعبة الرموز التعبيرية

الرجوع إلى الصورة أدناه:

راجع الرابط لفهم التطبيق - https://assets.ccbp.in/frontend/content/react-js/emoji-game-output.gif -

ملفات التصميم

صغير جدًا (الحجم <576 بكسل)، صغير (الحجم >= 576 بكسل) - الإخراج
صغير جدًا (الحجم < 576 بكسل)، صغير (الحجم > = 576 بكسل) - فاز باللعبة
صغير جدًا (الحجم < 576 بكسل)، صغير (الحجم > = 576 بكسل) - خسارة اللعبة
متوسط (الحجم >= 768 بكسل)، كبير (الحجم >= 992 بكسل) وكبير جدًا (الحجم >= 1200 بكسل) - الإخراج
متوسط (الحجم >= 768 بكسل)، كبير (الحجم >= 992 بكسل) وكبير جدًا (الحجم >= 1200 بكسل) - فاز باللعبة
متوسط (الحجم >= 768 بكسل)، كبير (الحجم >= 992 بكسل) وكبير جدًا (الحجم >= 1200 بكسل) - خسارة اللعبة

تعليمات إعداد المشروع

قم بتنزيل التبعيات عن طريق تشغيل npm install
ابدأ تشغيل التطبيق باستخدام npm start

تعليمات إنجاز المشروع

إضافة وظيفة

يجب أن يحتوي التطبيق على الوظائف التالية

يجب أن تكون النتيجة والنتيجة الإجمالية للعبة الحالية 0 في البداية.
عند النقر على رمز تعبيري
- إذا كان الرمز التعبيري الذي تم النقر عليه ليس هو نفسه أي من الرموز التعبيرية التي تم النقر عليها سابقًا، فيجب زيادة النتيجة بمقدار 1 .
- إذا تم النقر على جميع الرموز التعبيرية مرة واحدة بالضبط
  - يجب أن يتم عرض حالة اللعبة بالإضافة إلى أفضل نتيجة وزر التشغيل مرة أخرى كما هو موضح في ملف التصميم (اللعبة الخاصة) .
  - يجب أن تكون أفضل نتيجة مساوية لأعلى نتيجة .
- إذا كان الرمز التعبيري الذي تم النقر عليه هو نفسه أي من الرموز التعبيرية التي تم النقر عليها مسبقًا
  - يجب أن يتم عرض حالة اللعبة بالإضافة إلى النتيجة الحالية وزر التشغيل مرة أخرى كما هو موضح في ملف التصميم (خسارة اللعبة) .
  - إذا كانت النتيجة التي تم تحقيقها في اللعبة الحالية أعلى من النتائج السابقة، فيجب تحديث أعلى نتيجة وفقًا لذلك.
عند النقر على زر التشغيل مرة أخرى ، يجب أن نكون قادرين على لعب اللعبة مرة أخرى.
يجب أن يقوم زر التشغيل مرة أخرى بإعادة ضبط اللعبة والنتيجة ولكن ليس قيمة أعلى نتيجة .
يتم تمرير قائمة الرموز التعبيرية إلى مكون EmojiGame كقائمة emojisList الداعمة في شكل كائن مصفوفة.
سيكون لكل كائن تعبيري الخصائص التالية
مفتاح نوع البيانات
بطاقة تعريف رقم
com.emojiName خيط
com.emojiUrl خيط
يجب استخدام قيمة id المفتاح في كائن الرموز التعبيرية كمفتاح لمكون EmojiCard .
يجب استخدام قيمة emojiName الرئيسية في كائن emoji كنص بديل لصورة emoji .
مهمتك هي استكمال تنفيذ
- src/components/EmojiGame/index.js
- src/components/EmojiGame/index.css
- src/components/NavBar/index.js
- src/components/NavBar/index.css
- src/components/EmojiCard/index.js
- src/components/EmojiCard/index.css
- src/components/WinOrLoseCard/index.js
- src/components/WinOrLoseCard/index.css

نصائح سريعة

تقوم الخاصية cursor CSS بتعيين نوع مؤشر الماوس، إن وجد، ليظهر عندما يكون مؤشر الماوس فوق عنصر ما. استخدم مؤشر خاصية CSS مع pointer القيمة للإشارة إلى الارتباط. انقر فوق هذا لمعرفة المزيد.
المخطط التفصيلي هو خط يتم رسمه حول عنصر خارج الحدود. تقوم الخاصية المختصرة للمخطط التفصيلي CSS بتعيين كافة خصائص المخطط التفصيلي. استخدم outline خاصية CSS مع القيمة none لإخفاء كافة خصائص المخطط التفصيلي. انقر فوق هذا لمعرفة المزيد.

موارد

الصور

https://assets.ccbp.in/frontend/react-js/game-logo-img.png
https://assets.ccbp.in/frontend/react-js/face-with-stuck-out-tongue-img.png
https://assets.ccbp.in/frontend/react-js/face-with-head-bandage-img.png
https://assets.ccbp.in/frontend/react-js/face-with-hugs-img.png
https://assets.ccbp.in/frontend/react-js/face-with-laughing-img.png
https://assets.ccbp.in/frontend/react-js/face-with-laughing-with-hand-infront-mouth-img.png
https://assets.ccbp.in/frontend/react-js/face-with-mask-img.png
https://assets.ccbp.in/frontend/react-js/face-with-silence-img.png
https://assets.ccbp.in/frontend/react-js/face-with-stuck-out-tongue-and-winking-eye-img.png
https://assets.ccbp.in/frontend/react-js/grinning-face-with-sweat-img.png
https://assets.ccbp.in/frontend/react-js/smiling-face-with-heart-eyes-img.png
https://assets.ccbp.in/frontend/react-js/grinning-face-img.png
https://assets.ccbp.in/frontend/react-js/smiling-face-with-star-eyes-img.png
https://assets.ccbp.in/frontend/react-js/won-game-img.png
https://assets.ccbp.in/frontend/react-js/lose-game-img.png