แมวส้มตลุยอวกาศ

เขียนโค้ดเกม AR (Augmented Reality) สำหรับเรียนวิชา [ระบุชื่อวิชา เช่น: ภาษาอังกฤษสำหรับงานช่างยนต์ / คอมพิวเตอร์พื้นฐาน / บัญชีเบื้องต้น] สำหรับนักเรียนระดับ [ระบุระดับชั้น เช่น: ปวช. 1] โดยให้พัฒนาอยู่บนโครงสร้างไฟล์เดี่ยว index.html โดยใช้ HTML, CSS (Tailwind) และ JavaScript ร่วมกับไลบรารี MediaPipe Hands สำหรับตรวจจับความสูงของมือเพื่อบังคับเกมแบบเรียลไทม์ (Continuous Glide) รายละเอียดของเกมและระบบกราฟิกที่ต้องมี: 1. แนวคิดและธีมเกม: - กำหนดให้ระบบอยู่บนธีม [ระบุธีม เช่น: อู่ซ่อมรถยนต์อวกาศ / เมนบอร์ดคอมพิวเตอร์ยักษ์ / เมืองหลวงตัวเลขทางการเงิน] พื้นหลังเป็นอวกาศไล่เฉดสีลึกลับ มีดาวเคราะห์มีวงแหวนและสะเก็ดดาวระยิบระยับเลื่อนสไลด์ และมีรันเวย์เลเซอร์เรืองแสงที่พื้นล่าง - ตัวละครหลักคือ [ระบุตัวละคร เช่น: หุ่นยนต์ช่างยนต์สีแดงตัวกลม / กระรอกน้อยนักไอที] สวมหมวกอวกาศใส บินลอยตามระดับความสูงมือของผู้เล่นแบบเรียลไทม์อย่างลื่นไหล (ขยับมือขึ้นสุดตัวละครลอยขึ้นฟ้า ขยับมือลงสุดตัวละครจะเลื่อนต่ำลงเกาะรันเวย์) - มีเอฟเฟกต์ไอพ่น [ระบุเอฟเฟกต์ เช่น: ประกายไฟเชื่อมเหล็กสีฟ้า / อนุภาคกระแสไฟฟ้าเรืองแสง] พุ่งออกจากหลังตัวละครขณะเคลื่อนที่ 2. การเล่นและสิ่งกีดขวาง (Obstacles): - มีอุปสรรคสิ่งกีดขวางที่เป็นอุปกรณ์เกี่ยวข้องกับบทเรียนจำนวน 4 อย่าง คือ [ระบุอุปกรณ์หลบหลีก เช่น: ประแจ, หัวเทียน, ล้อรถ, ถังน้ำมัน] วิ่งสวนมาหลายระดับความสูง โดยมีขนาดพอเหมาะ (ประมาณ 55px) เพื่อเว้นช่องว่างให้ตัวละครบินหลบผ่านได้สะดวก - สิ่งกีดขวางแต่ละชิ้นจะมีกรอบสนามพลังหนามเรืองแสงหมุนวนรอบทิศทางเพื่อบอกว่าเป็นอันตราย ห้ามชน! - มีระเบิด (💣) เป็นอุปสรรคเสริม หากชนแล้วตัวละครจะเปลี่ยนเป็นสีดำเกรียมและมีไฟลุกโชนเป็นเวลา 1.5 วินาที พร้อมหักพลังชีวิต 3. ไอเทมสะสมและเควสภารกิจเปิดกล่องคำถาม: - ไอเทมเก็บคะแนนทั่วไปคือ [ระบุไอเทมสะสม เช่น: น็อตฟันเฟืองสีทอง / ชิปหน่วยความจำ / เหรียญทองคำ] ลอยสุ่มระดับความสูงทั่วไป เกิดบ่อยเพื่อให้เก็บสนุก - เมื่อผู้เล่นบังคับตัวละครเก็บไอเทมสะสมครบ 5 ชิ้นแล้ว ระบบจะอัญเชิญไอเทมวิเศษ [ระบุไอเทมวิเศษ เช่น: สมุดคู่มือซ่อมรถยนต์เรืองแสง / คัมภีร์ดาต้าคอมพิวเตอร์] ลอยขึ้นมาเพื่อให้ผู้เล่นบินไปชนเพื่อเข้าสู่ "หน้าจอแบบทดสอบ" - มีก้อนพลังงานฟื้นชีวิต (⚡) ลอยมาเป็นระยะ หากเก็บได้จะฟื้นฟูพลังชีวิตเพิ่ม 1 ดวง (จำกัดสูงสุด 5 ดวง) 4. ระบบแบบทดสอบและการควบคุมตอบคำถามด้วยมือ (AR Hand Select & Dwell Time): - มีชุดคำถาม 5 ข้อที่ออกแบบมาให้เหมาะสมกับวิชา [ระบุชื่อวิชา] ระดับ [ระบุระดับชั้น] - ในหน้าต่างตอบคำถาม ให้ผู้เล่นสามารถใช้ "มือเลื่อนขึ้น-ลง" เพื่อย้ายพอยต์เตอร์หรือไฮไลต์ตัวเลือกคำตอบ A, B, C, D ได้ตามระดับความสูงของมือแบบเรียลไทม์ - มีระบบหน่วงเวลา (Dwell Time): เมื่อผู้เล่นเลื่อนพอยต์เตอร์ค้างไว้ที่ปุ่มคำตอบเดิมเป็นเวลา 1.5 วินาที จะมีเกจชาร์จสีม่วงชดเชยเวลาวิ่งจนเต็ม 100% แล้วทำการส่งคำตอบให้โดยอัตโนมัติ (ไม่ต้องคลิกหรือกดปุ่มใด ๆ เพื่อความสะดวก) - เมื่อตอบเสร็จและกดปุ่มพุ่งยานเดินทางต่อ ตัวละครจะ "กะพริบเป็นอมตะไร้บาดแผลเป็นเวลา 3 วินาที" ไม่โดนสิ่งกีดขวางชน เพื่อให้ผู้เล่นมีเวลาขยับมือปรับพิกัดได้อย่างปลอดภัย 5. ระบบการแสดงเฉลยและการเรียนรู้แบบเห็นภาพ (Visual Explanation with SVG): - เมื่อตอบคำถาม ไม่ว่าจะถูกหรือผิด ต้องแสดงหน้าจอเฉลยที่บอกตัวเลือกที่ถูกต้องและหักคะแนน/บวกคะแนนให้สอดคล้องกัน - มีคำอธิบายสรุปความรู้สั้นกระชับเป็นภาษาไทย - พิเศษ: มีรูปภาพประกอบความรู้ที่สร้างด้วยโค้ด SVG วาดขึ้นมาสด ๆ บนหน้าเฉลย (เช่น ถ้าระบบถามเรื่องหัวเทียน ให้วาดรูปหัวเทียน SVG แสดงขั้วประจุไฟฟ้าอย่างง่าย เพื่อให้นักเรียนเข้าใจเนื้อหาผ่านภาพวาดได้ทันที) 6. ระบบการนำทางและลูกเล่นสับเปลี่ยนบรรยากาศ (Cosmic Theme Swapping): - มีหน้าแรกสำหรับใส่ชื่อผู้เล่น และหน้าสรุปผลคะแนนเมื่อจบเกม - เมื่อผู้เล่นตอบคำถามผ่านในแต่ละข้อ ให้ระบบ "เปลี่ยนโทนสี บรรยากาศพายุเนบิวลา และสีดาวเคราะห์ของฉากหลังอวกาศใหม่ทั้งหมดทันที" เพื่อสลับบรรยากาศการเล่นให้น่าตื่นตาตื่นใจ (เช่น สลับไปมาระหว่างเนบิวลาสีม่วง แดงเพลิง มรกตเขียว มาเจนตา และฟ้าไซเบอร์) - มีเสียงเอฟเฟกต์จำลองสถานการณ์ต่าง ๆ (เสียงพ่นไอพ่น, เสียงตอบถูก, เสียงตอบผิด, เสียงระเบิดตูม, เสียงฟื้นพลังชีวิต และเสียงเกมโอเวอร์) สังเคราะห์สดเรียลไทม์โดยใช้ Web Audio API โดยไม่ต้องโหลดไฟล์ภายนอก