تطوير لعبة النرد "Pig Game"
Budget: $15 – $25 USD
لعبة النرد لشخصين (Two Player Dice Game / Pig Game)
نبذة عن المشروع
مشروع واجهة أمامية (Front-end) للعبة نرد كلاسيكية تُعرف بـ"Pig Game"، مصممة للعب بين شخصين على نفس الجهاز. التصميم (HTML + CSS) جاهز بالكامل تقريبًا، والمطلوب هو كتابة منطق اللعبة بالجافاسكريبت (JavaScript) لتفعيلها بالكامل.
الملفات المتوفرة حاليًا
ملف HTML يحتوي على هيكل الصفحة (لاعبين: You / Me، أزرار Roll Dice و Hold و New Game)
ملف CSS يحتوي على كامل التنسيقات والتصميم (خلفيات، تدرجات ألوان، تأثيرات، تجاوب مع الشاشات الصغيرة)
6 صور لتمثيل أوجه النرد من 1 إلى 6 (point1.jpg إلى point6.jpg)
ملاحظة مهمة: أسماء الملفات المرفوعة غير متطابقة مع محتواها (محتوى HTML موجود داخل ملف باسم css، والعكس، وملف الجافاسكريبت شبه فارغ). يُفضّل توضيح هذه النقطة للفريلانسر ليقوم بترتيب الملفات بأسمائها الصحيحة أولًا قبل البدء.
المطلوب تنفيذه (الجافاسكريبت)
زر Roll Dice ():
توليد رقم عشوائي بين 1 و6
عرض صورة النرد المطابقة (point1.jpg → point6.jpg)
إذا كان الرقم = 1: تصفير النقاط الحالية (Current Score) وتبديل الدور للاعب الآخر
إذا لم يكن 1: إضافة الرقم إلى Current Score
زر Hold ():
إضافة Current Score إلى رصيد اللاعب (Player Score)
تصفير Current Score
تبديل الدور للاعب الآخر
التحقق: إذا وصل رصيد اللاعب إلى 100 (أو رقم يحدَّد لاحقًا) → إعلان الفوز
زر New Game ():
تصفير كل النقاط (Player Score / Current Score لكلا اللاعبين)
إعادة تفعيل اللاعب الأول
إخفاء صورة النرد
تبديل الدور (Active Player):
إضافة/إزالة كلاس active بين قسم .left و.right بحسب اللاعب الحالي
حالة الفوز:
عرض رسالة أو تأثير بصري عند فوز أحد اللاعبين
تعطيل زر Roll/Hold حتى الضغط على New Game
ملاحظة على التصميم
القسم الأيمن (.right / Me) في HTML الحالي لا يحتوي على أزرار تحكم أو صورة نرد — يجب على الفريلانسر إضافتها بنفس نمط القسم الأيسر حتى تعمل اللعبة لشخصين بشكل كامل ومتماثل.
المخرجات المطلوبة (Deliverables)
كود جافاسكريبت كامل وموثّق بتعليقات بسيطة
أي تعديلات ضرورية على HTML لإضافة عناصر القسم الأيمن الناقصة
ملف يعمل مباشرة بفتح index.html بدون أي أخطاء في الكونسول
توافق مع نفس التصميم الحالي بدون تغييره
نبذة عن المشروع
مشروع واجهة أمامية (Front-end) للعبة نرد كلاسيكية تُعرف بـ"Pig Game"، مصممة للعب بين شخصين على نفس الجهاز. التصميم (HTML + CSS) جاهز بالكامل تقريبًا، والمطلوب هو كتابة منطق اللعبة بالجافاسكريبت (JavaScript) لتفعيلها بالكامل.
الملفات المتوفرة حاليًا
ملف HTML يحتوي على هيكل الصفحة (لاعبين: You / Me، أزرار Roll Dice و Hold و New Game)
ملف CSS يحتوي على كامل التنسيقات والتصميم (خلفيات، تدرجات ألوان، تأثيرات، تجاوب مع الشاشات الصغيرة)
6 صور لتمثيل أوجه النرد من 1 إلى 6 (point1.jpg إلى point6.jpg)
ملاحظة مهمة: أسماء الملفات المرفوعة غير متطابقة مع محتواها (محتوى HTML موجود داخل ملف باسم css، والعكس، وملف الجافاسكريبت شبه فارغ). يُفضّل توضيح هذه النقطة للفريلانسر ليقوم بترتيب الملفات بأسمائها الصحيحة أولًا قبل البدء.
المطلوب تنفيذه (الجافاسكريبت)
زر Roll Dice ():
توليد رقم عشوائي بين 1 و6
عرض صورة النرد المطابقة (point1.jpg → point6.jpg)
إذا كان الرقم = 1: تصفير النقاط الحالية (Current Score) وتبديل الدور للاعب الآخر
إذا لم يكن 1: إضافة الرقم إلى Current Score
زر Hold ():
إضافة Current Score إلى رصيد اللاعب (Player Score)
تصفير Current Score
تبديل الدور للاعب الآخر
التحقق: إذا وصل رصيد اللاعب إلى 100 (أو رقم يحدَّد لاحقًا) → إعلان الفوز
زر New Game ():
تصفير كل النقاط (Player Score / Current Score لكلا اللاعبين)
إعادة تفعيل اللاعب الأول
إخفاء صورة النرد
تبديل الدور (Active Player):
إضافة/إزالة كلاس active بين قسم .left و.right بحسب اللاعب الحالي
حالة الفوز:
عرض رسالة أو تأثير بصري عند فوز أحد اللاعبين
تعطيل زر Roll/Hold حتى الضغط على New Game
ملاحظة على التصميم
القسم الأيمن (.right / Me) في HTML الحالي لا يحتوي على أزرار تحكم أو صورة نرد — يجب على الفريلانسر إضافتها بنفس نمط القسم الأيسر حتى تعمل اللعبة لشخصين بشكل كامل ومتماثل.
المخرجات المطلوبة (Deliverables)
كود جافاسكريبت كامل وموثّق بتعليقات بسيطة
أي تعديلات ضرورية على HTML لإضافة عناصر القسم الأيمن الناقصة
ملف يعمل مباشرة بفتح index.html بدون أي أخطاء في الكونسول
توافق مع نفس التصميم الحالي بدون تغييره