เนื้อหา

สร้างการวนรอบของเกม ขยาย HTML

รูปแบบตอบสนอง

กวดวิชานี้สาธิตวิธีการสร้างเค้าโครงการตอบสนองโดยใช้ JavaScript เพิ่มกล่องสองในไลบรารี ทำให้หนึ่งสีแดงและสีเขียวหนึ่ง กล่องเหล่านี้เป็นตัวอย่างเพียง สามารถใช้รูปร่างหรือวัตถุใด ๆ


รูปแบบตอบสนอง 1

รูปแบบตอบสนอง 2

รูปแบบตอบสนอง 3

กล่องเพิ่มตัวแก้ไข


รูปแบบตอบสนอง 4

จัดเรียงกล่อง เพื่อให้พวกเขาเติมด้านซ้าย และขวา ปล่อยให้เส้นขอบล้อมรอบ


รูปแบบตอบสนอง 5

ขณะนี้เป็นตัวอย่างของเว็บเพจที่มีเนื้อหาด้านซ้าย และขวา มันจะดูดีบนเบราว์เซอร์บนเดสก์ท็อปหรือโทรศัพท์ในโหมดแนวนอน อับ เค้าโครงนี้จะไม่ทำงานในโหมดแนวตั้ง อย่างใดอย่างหนึ่ง ต้อง shrunk กล่องสองกล่องเล็กพอดี หรือขยายเต็มหน้าจอ และด้านข้างของกล่องตัด


รูปแบบตอบสนอง 6

รูปแบบตอบสนอง 7

สถานการณ์นี้เป็นที่ต้องใช้รูปแบบตอบสนอง ในโหมดแนวตั้ง กล่องหนึ่งควรย้ายข้างต้นอีก การทำเช่นนี้ เราจำเป็นต้องย้ายกล่องโดยใช้ JavaScript หมายถึง ปิด 'ใช้เส้นเวลา' ทั้งกล่องและตั้งค่าเป็น 'ID ของสคริปต์'


รูปแบบตอบสนอง 8

รูปแบบตอบสนอง 9

รูปแบบตอบสนอง 10

เราต้องการปิดในคุณสมบัติภาพยนตร์ย้ายกล่องนอกขอบเขตของภาพยนตร์


รูปแบบตอบสนอง 11


การจัดเรียงกล่องอยู่ 'เมื่อปรับขนาด' ภาพยนตร์เหตุการณ์

ฟังก์ชันที่เราต้องมี GetLeft, GetTop, GetWidth และ GetHeight ฟังก์ชันเหล่านี้ให้ขอบเขตของเว็บเบราว์เซอร์หรืออุปกรณ์ที่ใช้พิกัดของภาพยนตร์ เมื่อคลิป ค่าเหล่านี้กลับขอบเขตของภาพยนตร์ ถ้าคุณกำลังใช้ 'None' ภาพยนตร์ขนาด GetLeft และ GetTop จะเสมอกลับมา 0 และสามารถละเว้น

ก่อนอื่น ให้จัดเรียงกล่องสองกล่องเพื่อหนึ่งเติมด้านซ้าย และอื่น ๆ กรอกด้านขวามือ



BoxA.SetBounds(GetLeft(),GetTop(),GetWidth()/2,GetHeight());
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());

รูปแบบตอบสนอง 13

ถัดไป เราจะเพิ่มเส้นขอบขนาด 10 10 ค่านี้ไม่จำเป็นต้องเซล อยู่ในสเกลเดียวกันภาพยนตร์ ใช้ภาพยนตร์ขนาด 'ไม่มี' สำหรับทุกอย่างจะเป็นพิกเซล



var Border=10;
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);

รูปแบบตอบสนอง 15

สุดท้าย เราจะทดสอบดูว่า ความกว้างของเว็บเบราว์เซอร์หรืออุปกรณ์น้อยกว่าความสูง ที่เกิดขึ้น เมื่อเรียงในกล่องแนวตั้ง



var Border=10;
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}

รูปแบบตอบสนอง 17

ตอนนี้คุณสามารถดู ถ้าคุณปรับขนาดของ player กล่องที่สองจะจัดตัวเองโดยอัตโนมัติ กล่องสองเหล่านี้สามารถถูกแทนที่ ด้วยรูปร่างและวัตถุอื่น ๆ ได้ ตัวอย่างนี้สามารถขยายการจัดการรูปแบบซับซ้อนมากขึ้น


สร้างการวนรอบของเกม ขยาย HTML
เอกสารนี้ถูกแปลจากภาษาอังกฤษ โดยใช้การแปลออนไลน์ เราต้องขออภัยถ้าคุณพบข้อผิดพลาดใด ๆ ถ้าคุณต้องการช่วยให้เราทำการแก้ไข มีตัวแก้ไขแปลใน Hippani Animator (ในเมนูวิธีใช้) เราให้ออกคีย์ใบอนุญาตฟรีให้ทุกคนที่แก้ไขวลีมากกว่า 100 กรุณาติดต่อเราสำหรับรายละเอียดเพิ่มเติม