תכנות משחק הצבעים בהייפ

• מאי 1, 2024

במדריך הקודם, ייבאנו את התמונות למשחק צביעה עבור מחבר ה- iBooks^ר שאנחנו מכינים ב- Hype Pro. כעת נוסיף את האלמנטים האינטראקטיביים למשחק.

פתח את מסמך ה- Hype ובוא נתחיל.

הצעד הראשון שלנו הוא להוסיף זהות לכל אחת מהשכבות שצריכות להיעלם כאשר לוחצים עליה. זה כולל את שכבות אמנות הקווים לגוף הברווז, הכנף והמקור. על ידי הקצאת כל אחת משכבות אלו למזהה אלמנט ייחודי, אנו יכולים לתכנת את הנראות של שכבות אלה באמצעות JavaScript.

1. פתח את מפקח הזהויות.
   
   
2. בחר את שכבת הברווז_גודל בקו הזמן הראשי.
   
   
3. במפקח הזהות, הוסף מזהה רכיב ייחודי. בוא נשתמש בתעודה של גוף.
   
   
4. בחר את שכבת הברווז_ווינג_ והוסף כנף כמזהה האלמנט הייחודי.
   
   
5. בחר בשכבת הברווזון_באק והוסף מקור כמזהה האלמנט הייחודי.
   
   

כעת כאשר לשכבות ישנם מזהי אלמנטים ייחודיים, אנו יכולים להוסיף את הפעולה לשכבות אלה. אנו נשתמש ב- JavaScript ובמאפיין התצוגה כדי לשלוט על הנראות של שכבות אלה. ערך ברירת המחדל לתצוגה של תמונה הוא בשורה, מה שאומר שהתמונה מוצגת בשאר ה- HTML ואינה מתחילה בשורה חדשה.

כדי להסתיר את התמונות אנו נשתמש ב- JavaScript כדי לשנות את ערך מאפייני התצוגה מ בשורה ל אף אחד עבור כל אחת משכבות אמנות הקו. זה יחשוף את שכבות מילוי הצבעים למטה.

object.style.display = "אין"

1. פתח את מפקח הפעולות.
   
   
2. בחר בשכבת הברווז_גוף.
   
   
3. בקטע לחץ (לחץ) על עכבר, לחץ על סמל הפלוס.
   
   
4. בתפריט הנפתח פעולה, בחר הפעל JavaScript.
   
   
5. מכיוון שזה יהיה JavaScript מותאם אישית, הגדר את התפריט הנפתח פונקציה ל פונקציה חדשה. זה יפתח חלון לשוניות חדש עם קוד JavaScript המוגדר כברירת מחדל ופונקציה בשם untitledFunction.
   
   
6. שנה את שם הפונקציה מ פונקציה ללא כותרת ל BodyFunction. תראה את שם הלשונית משתנה ל- BodyFunction ().
   
   בשלב הבא נוסיף את הקוד להגדרת נכס התצוגה אף אחד בשביל ה גוף אלמנט. הוסף את הקוד הבא בשורה הריקה 5.
   
   hypeDocument.getElementById ("גוף"). style.display = "אין";
   
   
7. חזור לחלון הכרטיסייה Scene Untitled ובחר בשכבה של הברווז.
   
   
8. חזור על השלב הקודם כדי לשנות את שם הפונקציה ל WingFunction ולהוסיף את JavaScript הבא.
   
   hypeDocument.getElementById ("כנף"). style.display = "אין";
   
   
9. בחר בשכבת הברווזון_שחור_שנה, שנה את שם הפונקציה ל BeakFunction ולהוסיף את JavaScript הבא.
   
   hypeDocument.getElementById ("מקור"). style.display = "אין";
   
   זהו זה. בואו נבדוק בדפדפן. אם הכל מסתדר, ייצא את הפרויקט כווידג'ט של מחבר iBooks.
   
   
10. מהתפריט, לחץ על קובץ - ייצא כ HTML5 - רכיב widget של מחבר לוח המחוונים / iBooks.
    
    

הוראות וידאו: יצרתי את המשחק הכי טוב בעולם (מאי 2024).