برمجة لعبة اللون في الضجيج

• أبريل 26, 2024

في البرنامج التعليمي السابق ، قمنا باستيراد الصور الخاصة بلعبة التلوين لـ iBooks Author^R التي نقوم بصنعها في Hype Pro. الآن سنضيف العناصر التفاعلية إلى اللعبة.

افتح مستند Hype ودعنا نبدأ.

خطوتنا الأولى هي إضافة هوية لكل طبقة من الطبقات التي يجب أن تختفي عند النقر عليها. يتضمن ذلك طبقات الخط الفني لجسم البط والجناح والمنقار. من خلال تعيين معرف فريد لعنصر من هذه الطبقات ، يمكننا حينئذٍ برمجة رؤية هذه الطبقات باستخدام JavaScript.

1. افتح مفتش الهوية.
   
   
2. حدد طبقة duck_body_line في المخطط الزمني الرئيسي.
   
   
3. في مفتش الهوية ، أضف معرف عنصر فريد. دعنا نستخدم معرف الجسم.
   
   
4. حدد طبقة duck_wing_line وأضفها جناح كمعرف عنصر فريد.
   
   
5. حدد طبقة duck_beak_line وأضفها منقار كمعرف عنصر فريد.
   
   

الآن بما أن الطبقات لها معرفات فريدة للعنصر ، يمكننا إضافة الإجراء إلى هذه الطبقات. سنستخدم JavaScript وخاصية العرض للتحكم في رؤية هذه الطبقات. قيمة خاصية العرض الافتراضية لصورة هي في النسق، مما يعني أن الصورة تُعرض داخل بقية HTML ولا تبدأ في سطر جديد.

لإخفاء الصور ، سنستخدم JavaScript لتغيير قيمة خاصية العرض منه في النسق إلى لا شيء لكل طبقة من طبقات الخط. هذا سيكشف طبقات ملء اللون أدناه.

object.style.display = "لا شيء"

1. افتح مفتش الإجراءات.
   
   
2. حدد طبقة duck_body_line.
   
   
3. في قسم النقر بالماوس (اضغط) ، انقر أيقونة Plus.
   
   
4. في القائمة المنسدلة Action ، اختر Run JavaScript.
   
   
5. لأن هذا سيكون جافا سكريبت مخصص ، قم بتعيين القائمة المنسدلة "الوظيفة" على "وظيفة جديدة". سيؤدي هذا إلى فتح نافذة علامة تبويب جديدة برمز JavaScript الافتراضي ووظيفة تسمى untitledFunction.
   
   
6. تغيير اسم الوظيفة من untitledFunction إلى وظيفة الجسم. سترى اسم علامة التبويب تغيير إلى BodyFunction ().
   
   بعد ذلك ، سنضيف الكود لضبط خاصية العرض على لا شيء ل الجسم جزء. أضف الكود التالي في السطر الفارغ 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none"؛
   
   
7. ارجع إلى نافذة علامة التبويب Untitled Scene وحدد طبقة duck_wing_line.
   
   
8. كرر الخطوة السابقة لتغيير اسم الوظيفة إلى WingFunction وأضف JavaScript التالي.
   
   hypeDocument.getElementById ("Wing"). style.display = "none"؛
   
   
9. حدد طبقة duck_beak_line ، وقم بتغيير اسم الوظيفة إلى BeakFunction وأضف JavaScript التالي.
   
   hypeDocument.getElementById ("Beak"). style.display = "none"؛
   
   هذا هو. دعنا نختبر في المتصفح. إذا سارت الأمور على ما يرام ، فقم بتصدير المشروع كعنصر واجهة مستخدم iBooks.
   
   
10. من القائمة ، انقر فوق ملف - تصدير كـ HTML5 - لوحة أدوات المؤلف / iBooks للمؤلف.
    
    

تعليمات الفيديو: سلسلة دروس ev3 (تتبع الخط باستخدام حساس لون واحد)ev3 tutorials (أبريل 2024).