การเขียนโปรแกรมเกมสีใน Hype

• เมษายน 26, 2024

ในบทช่วยสอนก่อนหน้านี้เรานำเข้ารูปภาพสำหรับเกมระบายสีสำหรับผู้แต่ง iBooks^R ที่เราทำใน Hype Pro ตอนนี้เราจะเพิ่มองค์ประกอบการโต้ตอบกับเกม

เปิดเอกสาร Hype ของคุณและเริ่มกันเลย

ขั้นตอนแรกของเราคือการเพิ่มข้อมูลประจำตัวให้กับแต่ละเลเยอร์ที่ต้องหายไปเมื่อคลิก ซึ่งรวมถึงเลเยอร์ภาพตัดปะสำหรับตัวเป็ดปีกและจงอยปาก ด้วยการกำหนด ID องค์ประกอบเฉพาะให้แต่ละเลเยอร์เหล่านี้จากนั้นเราสามารถตั้งโปรแกรมการเปิดเผยเลเยอร์เหล่านี้ด้วย JavaScript

1. เปิดตัวตรวจสอบตัวตน
   
   
2. เลือกเลเยอร์ duck_body_line ในไทม์ไลน์หลัก
   
   
3. ในตัวตรวจสอบตัวตนให้เพิ่ม ID องค์ประกอบที่ไม่ซ้ำ ลองใช้ ID ของ ร่างกาย.
   
   
4. เลือกเลเยอร์ duck_wing_line และเพิ่ม ปีก เป็น ID องค์ประกอบที่ไม่ซ้ำ
   
   
5. เลือกเลเยอร์ duck_beak_line และเพิ่ม จะงอยปาก เป็น ID องค์ประกอบที่ไม่ซ้ำ
   
   

ตอนนี้เลเยอร์มี ID องค์ประกอบที่ไม่ซ้ำกันเราสามารถเพิ่มการดำเนินการกับเลเยอร์เหล่านี้ได้ เราจะใช้ JavaScript และคุณสมบัติการแสดงผลเพื่อควบคุมการมองเห็นของเลเยอร์เหล่านี้ ค่าคุณสมบัติการแสดงผลเริ่มต้นสำหรับรูปภาพคือ แบบอินไลน์ซึ่งหมายความว่าภาพจะปรากฏขึ้นภายในส่วนที่เหลือของ HTML และไม่ได้ขึ้นบรรทัดใหม่

เพื่อซ่อนภาพเราจะใช้ JavaScript เพื่อเปลี่ยนค่าคุณสมบัติการแสดงผล แบบอินไลน์ ถึง ไม่มี สำหรับแต่ละเลเยอร์ภาพลายเส้น นี่จะแสดงเลเยอร์การเติมสีด้านล่าง

object.style.display = "ไม่มี"

1. เปิดตัวตรวจสอบการทำงาน
   
   
2. เลือกเลเยอร์ duck_body_line
   
   
3. ในส่วนคลิกเมาส์ (แตะ) คลิกที่ไอคอนเครื่องหมายบวก
   
   
4. ในเมนูแบบเลื่อนลงการกระทำเลือกเรียกใช้ JavaScript
   
   
5. เนื่องจากนี่จะเป็น JavaScript ที่กำหนดเองให้ตั้งค่าเมนูแบบเลื่อนลงฟังก์ชั่นเป็นฟังก์ชั่นใหม่ สิ่งนี้จะเปิดหน้าต่างแท็บใหม่ที่มีรหัส JavaScript เริ่มต้นและฟังก์ชั่นชื่อ untitledFunction
   
   
6. เปลี่ยนชื่อฟังก์ชั่นจาก untitledFunction ถึง BodyFunction. คุณจะเห็นชื่อของแท็บเปลี่ยนเป็น BodyFunction ()
   
   ต่อไปเราจะเพิ่มรหัสเพื่อตั้งค่าคุณสมบัติการแสดงผลเป็น ไม่มี สำหรับ ร่างกาย ธาตุ. เพิ่มรหัสต่อไปนี้ในบรรทัดว่าง 5
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. กลับไปที่หน้าต่างแท็บไม่มีชื่อฉากและเลือกเลเยอร์ 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 Author
   
   
10. จากเมนูคลิกไฟล์ - ส่งออกเป็น HTML5 - วิดเจ็ต Dashboard / iBooks Author Widget