WS 10

คุณคือผู้เชี่ยวชาญด้านการออกแบบเกมเพื่อการเรียนรู้ (Educational Game Designer) และนักพัฒนาเว็บ Front-end ระดับสูง ช่วยเขียนโค้ดเกม AR (Augmented Reality) ในรูปแบบเกมตอบคำถามจำนวน 5 ข้อ โดยอ้างอิงจากรายละเอียดด้านล่างนี้ และบรรจุโค้ดทั้งหมด (HTML, CSS Tailwind, JavaScript และตัวจับตำแหน่งมือ AR ด้วย MediaPipe) ให้อยู่ในไฟล์ "index.html" เพียงไฟล์เดียวจบแบบไร้รอยต่อ --- ### 📌 ข้อมูลรายวิชาและกลุ่มเป้าหมาย (คุณครูแก้ไขส่วนนี้ได้ตามใจชอบ): 1. ชื่อวิชา: [ใส่ชื่อวิชา เช่น การออกแบบกราฟิกเบื้องต้น / บัญชีเบื้องต้น / วิทยาศาสตร์กายภาพ] 2. ระดับชั้นของผู้เรียน: [ใส่ระดับชั้น เช่น ปวช.2 / ม.3 / ม.ปลาย] 3. ธีมของเกม: [ระบุธีมที่ต้องการ เช่น ศูนย์ซ่อมบำรุงพิตสต็อป F1 / นักโบราณคดีถอดรหัสลับสุสาน / คอนโทรลรูมกู้ภัยโรงไฟฟ้า] 4. โทนสีและสไตล์: [ระบุโทนสี เช่น สีส้ม-ดำ แนวนีออนไซเบอร์พังก์สมจริง 3D / สีพาสเทลสดใสน่ารักแบบ Flat-Vector] --- ### ❓ รายการโจทย์คำถามและตัวเลือก (จำนวน 5 ข้อ): (กรุณาแปลงโจทย์ให้เข้ากับธีมของเกม เช่น ถ้าธีมช่างยนต์ ให้ตั้งโจทย์วิเคราะห์อะไหล่ หรือหากเป็นธีมบัญชี ให้ตั้งโจทย์ตรวจหางบดุลที่หายไป) - **ข้อที่ 1:** * หัวเรื่องย่อย: [เช่น การจัดหน้ากระดาษ (Layout)] * คำอธิบายเคส/โจทย์: [เช่น เกิดปัญหากราฟิกขนาดยังไม่สมดุลตามหลักเกณฑ์สัดส่วนทองคำ...] * เครื่องหมายการคำนวณหรือสัญลักษณ์เชื่อมโยง (ถ้ามี): [เช่น +, -, หรือ ปล่อยว่าง] * ตัวเลือกตอบ (3 ตัวเลือก): * [ตัวเลือกที่ 1] * [ตัวเลือกที่ 2] * [ตัวเลือกที่ 3] * ตัวเลือกที่ถูกต้อง: [ระบุว่าตัวเลือกไหนถูก เช่น ตัวเลือกที่ 1] * ข้อคิดเห็น/Tip ประจำข้อ: [เช่น สัดส่วนทองคำมีค่าประมาณ 1 : 1.618] - **ข้อที่ 2:** * หัวเรื่องย่อย: [ระบุหัวเรื่อง] * คำอธิบายเคส/โจทย์: [ระบุโจทย์] * ตัวเลือกตอบ: [ระบุ 3 ตัวเลือก] * ตัวเลือกที่ถูกต้อง: [ระบุข้อที่ถูก] * ข้อคิดเห็น/Tip ประจำข้อ: [ระบุ Tip] - **ข้อที่ 3:** * หัวเรื่องย่อย: [ระบุหัวเรื่อง] * คำอธิบายเคส/โจทย์: [ระบุโจทย์] * ตัวเลือกตอบ: [ระบุ 3 ตัวเลือก] * ตัวเลือกที่ถูกต้อง: [ระบุข้อที่ถูก] * ข้อคิดเห็น/Tip ประจำข้อ: [ระบุ Tip] - **ข้อที่ 4:** * หัวเรื่องย่อย: [ระบุหัวเรื่อง] * คำอธิบายเคส/โจทย์: [ระบุโจทย์] * ตัวเลือกตอบ: [ระบุ 3 ตัวเลือก] * ตัวเลือกที่ถูกต้อง: [ระบุข้อที่ถูก] * ข้อคิดเห็น/Tip ประจำข้อ: [ระบุ Tip] - **ข้อที่ 5:** * หัวเรื่องย่อย: [ระบุหัวเรื่อง] * คำอธิบายเคส/โจทย์: [ระบุโจทย์] * ตัวเลือกตอบ: [ระบุ 3 ตัวเลือก] * ตัวเลือกที่ถูกต้อง: [ระบุข้อที่ถูก] * ข้อคิดเห็น/Tip ประจำข้อ: [ระบุ Tip] --- ### ⚙️ ข้อกำหนดและโครงสร้างของระบบเกม (ห้ามตัดทิ้งเพื่อรักษาฟังก์ชัน AR): 1. **ระบบตรวจจับมือผ่านกล้อง AR (Hand Tracking):** * ใช้สคริปต์ `@mediapipe/hands` และ `@mediapipe/camera_utils` ในการดึงภาพจากกล้องเว็บแคม * ผู้เล่นต้องใช้ "ปลายนิ้วชี้" ชี้ค้างไว้บนหน้าจอมือถือ/คอมพิวเตอร์ เพื่อลากเคอร์เซอร์ (เป้าชี้สีทอง) * เมื่อเป้าชี้ไปอยู่บนตัวเลือกตอบ ตัวเลือกนั้นจะส่องสว่างเรืองแสงแบบ 3D และหลอดวงกลมรอบเป้าชี้จะเริ่มหมุนโหลดเวลา (Hover Loading Ring) เป็นเวลา 1.2 วินาที หากแตะค้างจนครบรอบ จะถือเป็นการส่งคำตอบโดยอัตโนมัติ * **ระบบสำรอง (Fallback):** หากผู้เล่นกดปิดกล้อง หรือไม่พบเว็บแคม จะต้องสลับเป็นโหมดใช้เมาส์คลิกได้ตามปกติ 2. **การออกแบบ UX/UI แบบจับง่ายและสวยงามแบบ 3D:** * ตัวเลือกตอบ 3 กล่องต้องมีมิติความตื้นลึกเด่นชัด (3D Bevel/Shadow) มีขอบมนสวยงาม และเมื่อนำเมาส์หรือนิ้ว AR ไปแตะ จะต้องมีการเอียงตัวรับตามหลัก 3D Perspective * ปุ่มตอบคำถามแต่ละตัวต้องวางแยกกันอย่างชัดเจน มีระยะห่าง (Spacing) ที่ดี และในโค้ดมีระบบขยายขอบเขตจับชน (Collision Padding) เพื่อลดปัญหามือสั่นของผู้เล่น ทำให้ชี้เป้าได้อย่างแม่นยำ * มีกราฟิกแดชบอร์ดสรุปสถานะ หรือบารอมิเตอร์ความคืบหน้าของคะแนนแบบ real-time ด้านข้างหน้าจอ 3. **เสียงประกอบ (Web Audio API Synthesizer):** * ห้ามดึงไฟล์เสียงจากภายนอกเข้ามาเด็ดขาด ให้เขียนโค้ดสร้างสัญญาณเสียงสังเคราะห์ในตัวแปร JavaScript (Web Audio API) สำหรับ: * เสียงเมื่อเลื่อนเป้าไปวางบนปุ่ม (Hover Tick) * เสียงเมื่อตอบถูก (Success Major Chord) * เสียงเมื่อตอบผิด (Fail Low Buzz) * เสียงนับถอยหลังในช่วงวิกฤตต่ำกว่า 6 วินาที (Alert Tick) * เสียงสตาร์ทเครื่องยนต์หรือเริ่มเกม (Intro Sweep) * เสียงรับรางวัลหน้าสรุปผล (Win Theme) * มีปุ่มเปิด/ปิดเสียงบนส่วนหัวของเว็บไซต์ (Mute Button) 4. **หน้าแรก (Welcome Screen):** * ช่องให้กรอกชื่อผู้เล่นก่อนเริ่มเกม * สวิตช์สลับ เปิด-ปิด การใช้งานกล้อง AR * แสดงคำอธิบายวิธีการขยับนิ้วสั่งการอย่างชัดเจน 5. **หน้าสรุปผลการเล่น (Summary Screen):** * แสดงคะแนนรวมและความเร็วเฉลี่ย (คำนวณโบนัสตามเวลาที่เหลือในแต่ละข้อ) * แสดงยศของนักเรียนเชิงเปรียบเทียบที่สอดคล้องกับวิชาและคะแนนที่ได้ (Perfect/Advanced/Beginner) * แสดงสรุปทักษะย่อย และจุดที่ควรนำไปปรับปรุงแก้ไขสำหรับการเรียนรู้เพิ่มเติม * มีปุ่มเล่นใหม่อีกครั้ง และปุ่มสั่งพิมพ์ใบประเมินผลพิมพ์รายงาน