Javascript Cookie Clicker

جافا سكريبت - كوكي الفرس

مصدر المهمة : https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md

رابط النسخة المباشرة : https://teo-cozma.github.io/Javascript/

أعضاء الفريق

• بريجيتا سابوتيتي (جافا سكريبت وHTML)
• ديفيد تيريل (جافا سكريبت)
• تيودورا كوزما (HTML وCSS)

اللغات

• HTML
• CSS
• جافا سكريبت

أدوات

• رمز الاستوديو المرئي (محرر النصوص)
• Discord، Google Meet، Github، Replit (الاتصالات)
• أدوبي XD (النماذج الأولية)
• خدمة التحقق من صحة العلامات W3C (فحص HTML)
• خدمة التحقق من صحة W3C CSS (فحص CSS)
• Google Lighthouse (فحص الأداء)

صورة

موارد

ما هو كوكي الفرس؟

• http://orteil.dashnet.org/cookieclicker/
• https://en.wikipedia.org/wiki/Cookie_Clicker
• https://cookie-clicker2.com/
• https://particle-clicker.web.cern.ch/
• https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s

دروس لمشروعنا:

• https://www.flaticon.com/free-icons/cookie

• https://www.youtube.com/watch?v=uUgOBe_wb6E

• https://www.youtube.com/watch?v=j_nI6G3ZDiE

• https://codesource.io/how-to-disable-button-in-javascript/

• https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input

• https://www.youtube.com/watch?v=PSEhNb69XpI

• https://www.youtube.com/watch?v=vU2akkcSV-g

• https://www.youtube.com/watch?v=PSEhNb69XpI

• https://www.youtube.com/watch?v=KgYkgBno5Gs

• https://stackoverflow.com/questions/8583524/how-to-set-time-limit

خدمات التحقق :

• https://validator.w3.org/#validate_by_input
• http://jigsaw.w3.org/css-validator/

---

سجل المشروع

اليوم الأول (25/10)

مراجعة التعليمات

• ماذا: كوكي الفرس.
• لماذا : مشروع الدمج (بشكل رئيسي لمهارات جافا سكريبت).
• الزمان: ابتداءً من اليوم، 4 أيام كاملة من العمل الجماعي، حتى 28/10.
• كيف: في مجموعات مكونة من ثلاثة أفراد، يتعاونون ويستخدمون لغات البرمجة المعنية.
• من: تيودورا كوزما، بريجيتا سابوتيتي، ديفيد تيريل.
  • أي الأدوار؟ هناك الواجهة الأمامية والخلفية وإدارة المشروع. يمكن أن تكون جميع الأدوار قابلة للتبديل ويتم مشاركة الكود على أي حال، ولكن بشكل عام، يمكن لشخص واحد التركيز أكثر على دور معين.
    • الخلفية (جافا سكريبت): ديفيد.
    • الواجهة الخلفية (جافا سكريبت) + الواجهة الأمامية (بنية HTML): بريجيتا.
    • الواجهة الأمامية (CSS + ربما Sass) + مدير المشروع: تيودورا.

العصف الذهني

3 أقسام :

1. قسم ملفات تعريف الارتباط: العنوان 1 لعداد ملفات تعريف الارتباط. H1 لعدد النقرات.

   • ملف تعريف الارتباط التفاعلي + عنوانه + عداد ملفات تعريف الارتباط = القسم الأول.
   • "ضمن HTML، ضع زر النقر الذي سيؤدي إلى زيادة العداد والتسمية التي تمت تهيئتها عند 0 لعرض العداد المذكور."

2. قسم النتيجة:

   • قسم النتيجة: عدد النتيجة.
   • ملف تعريف الارتباط الأول: ملف تعريف الارتباط هو زر خاص به.

(ملف تعريف الارتباط + النتيجة = النصف الأيسر)

3. قسم المتجر :
   • الإنجازات والترقيات؟
   • قسم المتجر = زر الترقية + عداد النقاط = القسم الثاني:

     • قم بعمل مضاعف (نقاط مزدوجة أو ثلاثية) --> هذه الخطوة للمراجعة

     • السعر المضاعف (تم شراؤه)

     • تحديث النتيجة

     • العداد داخل المضاعف

     • زيادة التكلفة (تكلفة المضاعف الأعلى)

       • شاشة مخصصة أيضًا (زر أسفل؟)

     • الخطوة 12: العنصر الضروري، يتم إلغاء تنشيط بعض الأزرار. على سبيل المثال: أقل من 20 نقطة، لا يمكن للاعب الوصول إلى ميزات معينة.

(النصف الأيمن)

مثال (مرجع): http://orteil.dashnet.org/cookieclicker/.

مهام لهذا اليوم

هذا الصباح (10:30 - 12:30)

• بحث حول المشروع (تعليمات التكليف).
  • تعرف على ما يتوافق مع الخطوات الإلزامية الحالية (يتم وضع المكافآت جانبًا في الوقت الحالي).
• نظرة متعمقة على رمز أداة النقر الأصلية لملفات تعريف الارتباط.

(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s) وصف اللعبة (وصفاتها الوجودية!)

• نقرة واحدة = ملف تعريف ارتباط واحد.
• 15 نقرة = 15 ملف تعريف ارتباط = مؤشر واحد (تم شراؤه).
• 10 مؤشرات = ملف تعريف ارتباط واحد في الثانية (CpS).
• 100 ملف تعريف ارتباط = الجدة التي تنتج وتسوق ملفات تعريف الارتباط الخاصة بك.
• ملفات تعريف الارتباط هي العملة التي تسمح لك بشراء المزارع والمناجم والمصانع وما إلى ذلك. = اقتصاد ملفات تعريف الارتباط المتغلغل والساحق. يتوسع هذا إلى ملف تعريف الارتباط في نهاية المطاف.
• تجاوز الوجود = اصعد وابدأ من جديد.
• يولد ملف تعريف الارتباط الذهبي بشكل عشوائي.
• احترس من الجدة: التمرد المحتمل ونهاية العالم. إنقاذ الجميع بمكاسب اقتصادية، أو استغلالهم لكسب المزيد من الثروة.
• "اختراق التعليمات البرمجية" الصغيرة في وحدة التحكم: Game.Earn(x).

(http://orteil.dashnet.org/cookieclicker/)

سجل المعلومات/تاريخ الإصدار

• الادخار الآمن
• نمط عرض المؤشر
• ميزة الاستيراد/التصدير: استرداد اللعبة المحفوظة من الإصدار الوحيد (يتم تعطيله بعد أسبوع)
• زر البيع
• الكعكة الذهبية العشوائية (كيفية تحديد ترددها)
• النقر على احصائيات
• النقر يعزز
• استياء الجدة ونهاية العالم --> مخلوقات تستهلك ملفات تعريف الارتباط
• قسم قائمة الإحصائيات للترقيات والإنجازات
  • إنجازات نكهة الحليب -_-
• قائمة الخيارات :
  • عام: حفظ + حفظ تلقائي، تصدير/استيراد، مسح الحفظ؛
  • الإعدادات: مستوى الصوت، والرسومات الرائعة، والأصوات... هذه كلها مكافآت.

خلف الكود (التحقيق مع المفتش)

• بنية HTML (ما قد نحتفظ به للمظهر):
  • Head : جميع الروابط إلى الأنماط والبرامج النصية (العنوان يومض...)
  • جسم :
    • لا توجد أغلفة لافتة
    • Topbar: حقوق الطبع والنشر والارتباط بوسائل التواصل الاجتماعي (مثل التذييل ولكن في أعلى الصفحة). سنحتاج بالتأكيد إلى تضمين حقوق الطبع والنشر مع أسمائنا هذا العام وروابط لصفحاتنا المقصودة (؟).
    • معرف القسم:"لعبة": القسم الفعلي من اللعبة.
      • الأقسام موجودة تحت علامة "القسم"، ولها أسماء خاصة بها حسب موقعها (يسار، يمين، وسط) + فواصل.
      • المراسي: هل هم نوع الفصل الخاص بهم؟ ابحث عنه.
      • مرساة ملف تعريف الارتباط = ملف تعريف الارتباط القابل للنقر !!!
        • علامة قماش
      • هل نضيف اسم خلفي وهمي ؟
      • عداد ملفات تعريف الارتباط : x ملفات تعريف الارتباط ; في الثانية: ق.
    • هل نقوم بإنشاء قائمة تحتوي على خيارات وإحصائيات ومعلومات و...؟
      • أيضا، القسم الفرعي لكل عنصر القائمة؟
    • (مشكلة فنية: تستمر الصفحة في التحديث لتحديث البيانات لأنه من الصعب البقاء في قسم واحد لإلقاء نظرة على الكود قبل أن يومض)
    • العلامة "ب": ما الغرض منها؟
    • بعض divs مخفية؟
    • قسم المتجر :
      • الشراء/البيع: يجب ربطها بأحداث Javascript حيث ستتغير قيمها مع كل نقرة.
      • المنتجات (المناجم، الجدات): عندما تبدأ اللعبة لأول مرة، يجب أن تكون مخفية/محجوبة. (مرجع آخر مثير للاهتمام: https://particle-clicker.web.cern.ch/)

بعد ظهر اليوم (13:30 - 17:00)

• جمع الأفكار والبحث وتجميع الموارد.
• ما هي الصعوبات/التحديات التقنية التي قد تنتظرنا؟
  • كيف يعمل المضاعف؟
  • عرض تخطيط للأقسام وأزرارها (على الرغم من أن هذا لا يثير القلق بشكل خاص).
  • فهم كيفية تطبيق جافا سكريبت.
    • اجمع الموارد والمعلومات حول كيفية كتابة الرمز لكل زر.

ما هي منهجية العمل الجماعي لدينا؟

• كيف يعمل كل واحد منا؟

  • وحيد
  • تركزت البحوث
  • تركز الترميز
  • هل نقوم بإجراء "جلسات برمجة مباشرة"، حيث نشارك شاشتنا ونكتب الكود، وكل واحد يقدم مدخلاته على الفور؟

• كيف يمكننا أن نجعل هذا الموعد النهائي يعمل لصالحنا؟

• كيف نقوم بتقسيم عمل الترميز؟ كيف نحدد المهام التالية ونفوضها؟ إذا عمل كل منا في وقته الخاص، فكيف يمكننا الاتفاق على الكود النهائي وتوحيده؟

• تحديد كيفية التواصل وتبادل المعلومات:

  • على الديسكورد الغرفة 4 (دردشة + اتصال).
  • ... (أدوات التعاون الأخرى).
  • بالتأكيد جيثب، سيتم مشاركة المستودعات.

• اتخاذ القرار بشأن الخطوات التالية:

  • الانتهاء من البحث اليوم؟
  • هل تريد البدء بالتخطيط (+ الكتابة؟) لبنية HTML؟ هيكل جافا سكريبت؟
  • هل نتبع كل خطوة حرفيا؟
    • لقد تقرر، على الأقل سيتم تضمين الخطوات الإلزامية (جميع المدخلات والأزرار التي تحتوي على الوظائف الأكثر أهمية)، وتم وضع المكافآت جانبًا في الوقت الحالي (ولكن قد يتم تضمينها إذا أمكن).
    • هل يجب اتباع هذه الخطوات واحدة تلو الأخرى أم بعضها في نفس الوقت؟
      • هذا سؤال مهم يجب طرحه نظرًا لأن الأدوار مشتركة: شخصان يتعاونان في الواجهة الخلفية، وشخصان في الواجهة الأمامية.
      • لذلك، في جافا سكريبت، هل سيتم توزيع هذه الخطوات؟
  • عندما يتعلق الأمر ببناء المشروع فعليًا، ما مقدار ما نأخذه من الأصل، وما مقدار ما نجعله خاصًا بنا؟

• طريقة العمل اليومي :

  • يعمل كل منا بمفرده في البداية، وفي نهاية اليوم، نشارك الكود الخاص بنا عبر Discord، ثم "ننفذ" كل شيء على Replit.

التفكير المستقبلي - جزء التقييم

• قم بتقييم التقدم بشكل منتظم وتأكد من تضمين الميزات الضرورية.
• قم بتحديث الملف التمهيدي بانتظام.
• في النهاية (في اليوم الأخير، أو حتى أثناء عملية الترميز)، استخدم أدوات التحقق من الصحة والأداء (انظر أداة التحقق من الصحة Lighthouse وW3C)؛ ربما يوم الخميس.

خطوات بعد ظهر اليوم (14:30 - 16:30)

• مزيد من البحث وتحديد المهام للغد:
  • بريجيتا: بحث وكتابة HTML.
  • ديفيد: بحث جافا سكريبت.
  • تيودورا: البحث البصري والنماذج الأولية

اليوم الثاني (26/10)

اللقاء الصباحي الساعة 9:00:

• اكتملت الخطوة 5.
• رمز المشاركة.
• المسائل الفنية: ربط HTML مع Javascript، وجعل الوظائف تعمل بشكل صحيح.
• أيضًا، المكافآت مخصصة للاعبين، لذا فإن الخطوة 11 وما بعدها إلزامية.
• يتم تنفيذ أداة النقر التلقائي بواسطة David.
• المضاعف الذي قامت به بريجيتا ; في انتظار كذلك.
• حل المشكلات في البرامج النصية.

لهذا الصباح (9:30 – 12:30)

تابع الخطوات المعينة. النظر في أي قضايا. الاجتماع الساعة 13.30 لمناقشة التقدم وحل أي مشاكل.

بعد ظهر هذا اليوم (13:30 - 16:30) تيو: اجعل الموقع مستجيبًا. ملاحظة: يجب أن تتضمن الأزرار المضاعفة التكلفة أيضًا! + ابحث عن البرنامج النصي لتعطيل أزرار معينة وفقًا لكمية ملفات تعريف الارتباط. ديفيد: وظائف المشاركة؛ تم حل وظيفة التحميل. بريجيتا: الكود والوظائف المشتركة؛ تم حل مشكلات بناء الجملة.

اجتماع سكروم (16:30 - 17:00)

• ماذا تم؟

  • خطوات المضاعف

• ما هي القضايا التي ظهرت + تم حلها؟

  • مشاكل مع المضاعف.

• ما هي الخطوات التالية؟

• مشاكل :

  • معرفة كيفية توسيط العناصر !!!!!!! (كان لتحديث ذاكرتي مرة أخرى).
  • كيفية تعطيل زر باستخدام جافا سكريبت: صعوبات الترميز.
  • الحفظ والتحميل لا يعملان مع المضاعف.
  • غير قادر على الاستمرار في استخدام Sass بسبب مشكلات التجميع في CSS الرئيسي. لذا عد إلى التصميم باستخدام Vanilla CSS.

• ما هي المشاكل التي يجب حلها غدا:

  • أزرار الحفظ والتحميل؛
  • احصل على زيادة المضاعف بمقدار 2 (مرة أخرى)؛
  • تمكين/تعطيل الأزرار حسب الظروف (الخطوة 12)؛
  • المكافآت: الخطوة 11.

اليوم الثالث (27/10)

الاجتماع الصباحي (9:00)

• ما تم بالأمس :

  • مستجيب (معلق)
  • حفظ/تحميل التحقيق (معلق)
  • المضاعف (تم الحل)

• ما يجب القيام به اليوم:

  • العمل على أزرار التعطيل (الخطوة 12).
  • فحص الخطوة 8.
  • إعادة جافا سكريبت.
    • حل المشكلات الفنية المتعلقة بالمضاعفات (التحميل والزيادة)؛ قيد الانتظار.
  • قارن رموز جافا سكريبت (بريجيتا، ديفيد).
  • مقارنة ودمج ملفات HTML وتطبيق نمط CSS.
  • من حيث المظهر: هل نحتاج إلى علامة الزر لملف تعريف الارتباط والمؤشر والأزرار الأخرى؟
    • الجواب : نعم. فقط لا تتضمن بالضرورة العلامات "أ".
  • للاستجابة: اجعل الإعدادات مناسبة لشاشات الجوال الصغيرة.

لقاء مسائي (16:45 - 17:00)

• ما تمكنا من القيام به:

  • تمكين / تعطيل الأزرار
  • جعل المضاعف يعمل (فقط باستخدام AutoClicker)
  • ابدأ العمل على التعزيز (المكافأة)
    • العد التنازلي يعمل!
  • استجابة CSS

• ما يجب القيام به غدا:

  • أكمل جميع خطوات جافا سكريبت:
    • اجعل المعزز يعمل
    • أضف وظيفة إعادة الضبط
  • قم بتحديث كود HTML "الرئيسي" باستخدام البرنامج النصي الصحيح، وقم بتصميمه.
  • انشر الصفحة واستخدم LightHouse لفحص إمكانية الوصول وسهولة الاستخدام وتحسين محركات البحث وما إلى ذلك.

اليوم الرابع (28/10)

الاجتماع الصباحي (9:00 - 9:30)

ما يجب القيام به اليوم:

• إصلاح المشكلات الفنية في البرنامج النصي.

  • اجعل المعزز يعمل.
  • اجعل النقرات تعمل بشكل مستقل.
  • منع البرامج النصية من العمل من تلقاء نفسها.
  • قم بإجراء وظيفة المضاعف بدون النقر التلقائي.

• قم بتحديث HTML وCSS بالعلامات الصحيحة.

  • إضافة تذييل!

العمل بعد الظهر (13:30 - 16:00)

• أداة التحقق من صحة HTML W3C (القضايا):

  • لا يمكن أن تحتوي عناصر "التسمية" على أكثر من فرع واحد.
  • لا يمكن أن تكون العناصر "p" من نسل التسميات.
  • يجب أن يكون لأي عنصر "زر" ينحدر من "تسمية" مع سمة "for" قيمة معرف تطابق تلك السمة.
    • الحلول: يمكن إدراج جميع التسميات داخل الأزرار، ولكن يجب أيضًا إدراجها داخل الفقرات.

• أداة التحقق من صحة W3C CSS: لا توجد مشاكل.

• نشر الموقع وتشغيله وإجراء اختبارات الأداء باستخدام LightHouse. النتائج =

  • الأداء = 86؛
  • إمكانية الوصول = 95 ;
  • أفضل الممارسات = 100؛
  • تحسين محركات البحث = 92 ;

• إصلاح المشكلات التي تظهر من الاختبارات.

  • "إزالة موارد حظر العرض" (مشكلة تتعلق باستيراد نمط الخط).
  • "لا تحتوي عناصر الصورة على عرض وارتفاع واضحين."

النتائج =

• الأداء = 91؛
• إمكانية الوصول = 95 ;
• أفضل الممارسات = 100؛
• تحسين محركات البحث = 92 ;

تقرير ما بعد المشروع (16:20 - 17:00 وغداً 29/10):

• المسائل التقنية المتبقية: المضاعف. سيتم مراجعتها مرة أخرى غدا.

(29/10)

• تم إصلاح زر إعادة الضبط!
• حجم خط أكثر استجابة وفقًا لعرض الجهاز.