game

ช่วยเขียนโค้ดเกมแนว AR (Augmented Reality) เพื่อใช้เป็นสื่อการสอนแบบ Active Learning ในรูปแบบไฟล์ HTML ไฟล์เดี่ยว (รวม CSS และ JS ไว้ในตัว) โดยใช้ Tailwind CSS และไลบรารีเปิดใช้งานเว็บแคม โดยให้ใช้รายละเอียดการตั้งค่าวิชาและเนื้อหาคำถามดังนี้: ======================================================= [ตั้งค่าเนื้อหาบทเรียนสำหรับคุณครู] - รายวิชา: [ใส่ชื่อวิชา เช่น สุขศึกษา, ภาษาอังกฤษ, วิทยาศาสตร์] - ระดับชั้น: [ใส่ระดับชั้น เช่น ป.6, ม.3, ปวช.1] - ชื่อโจทย์หลัก: [ใส่คำถามหลัก เช่น "วิเคราะห์อาหารนี้ว่าอยู่หมู่ใด", "ประเภทของคำศัพท์ภาษาอังกฤษ"] - ชื่อหมวดหมู่ตัวเลือก (มี 3 หมวด): 1. หมวดหมู่ที่ 1: [เช่น คาร์โบไฮเดรต / Noun / สินทรัพย์] 2. หมวดหมู่ที่ 2: [เช่น โปรตีน / Verb / หนี้สิน] 3. หมวดหมู่ที่ 3: [เช่น ไขมัน / Adjective / ส่วนของเจ้าของ] - รายการข้อคำถามและเฉลยเหตุผล (จำนวน 10 ข้อ): ข้อที่ 1: - โจทย์: [เช่น ข้าวสวย / Apple / เงินสด] - หมวดเฉลยที่ถูกต้อง: [เช่น หมวดหมู่ที่ 1 / หมวดหมู่ที่ 2 / หมวดหมู่ที่ 3] - เหตุผลอธิบายเฉลย: [ใส่คำอธิบายสั้นๆ เพื่อให้นักเรียนเข้าใจเนื้อหา] ข้อที่ 2: - โจทย์: [เช่น เนื้อไก่ / Run / ทุน] - หมวดเฉลยที่ถูกต้อง: [เช่น หมวดหมู่ที่ 2] - เหตุผลอธิบายเฉลย: [ใส่คำอธิบายสั้นๆ] (คุณครูสามารถปรับจำนวนข้อ และรายละเอียดโจทย์ข้อ 3-10 ตามที่ต้องการได้เลย) ======================================================= ข้อกำหนดทางเทคนิคและการออกแบบระบบเกม: 1. การตรวจจับ AR (MediaPipe Hands): - ใช้กล้องเว็บแคมผ่านไลบรารี MediaPipe Hands และกล้องของเบราว์เซอร์ - วิดีโอพื้นหลังบน Canvas ต้องสะท้อนซ้าย-ขวาแบบกระจกเงา (Mirror Video) เพื่อให้ผู้เล่นบังคับมือซ้ายขวาได้ง่ายและเป็นธรรมชาติ แต่ตัวหนังสือ ข้อความ และปุ่มบน UI ทั้งหมดห้ามกลับด้านเด็ดขาด - สแกนพิกัดข้อมือเพื่อขยับตัวละครซ้าย-ขวา และเมื่อกำมือแน่น (Fist) จะเป็นการสั่งให้ตัวละครกระโดดขึ้นไป "ทุบ" กล่องคำตอบด้านบน 2. เสียงประกอบ (Tone.js): - ใช้ Tone.js ในการสร้างเสียงสังเคราะห์ Web Audio (ห้ามใช้ลิงก์ไฟล์เสียงภายนอกเพื่อป้องกันลิงก์เสีย) - มีเสียงประกอบตอนกระโดดทุบกล่อง, เสียงเมื่อตอบถูก, เสียงตอบผิด, เสียงดนตรีฉลองชัยชนะ (จบเกมแบบผ่าน), และเสียงดนตรีเมื่อพ่ายแพ้ (Game Over) 3. ตัวละครสไตล์ "จิบิ (Chibi)": - วาดตัวละคร 2 ตัวละครคือ "ชาย (วายุ)" และ "หญิง (มีนา)" โดยวาดลงบน Canvas ด้วยคำสั่งวาดรูปทรงเรขาคณิต (เช่น อาร์ก สี่เหลี่ยม วงกลม) ห้ามดึงภาพจาก URL ภายนอก - ออกแบบตัวการ์ตูนให้เป็นสไตล์ "จิบิ" หัวโตน่ารัก แก้มปัดสีชมพูระเรื่อ ดวงตาโตกลมมีแววตาประกายสีขาว และมีทรงผมอนิเมะสดใส 4. ระบบกติกาและกลไกเกม: - หน้าจอเริ่มต้น (Start Screen): มีช่องให้กรอกชื่อผู้เล่น และปุ่มเลือกเพศตัวละคร ปุ่มเริ่มเกมจะกดได้ก็ต่อเมื่อกล้องเว็บแคมและ AI โหลดพร้อมทำงานแล้วเท่านั้น - การคิดคะแนนและจำกัดเวลา: ให้เวลา 60 วินาทีต่อข้อ หากตอบถูกและเวลาเหลือตั้งแต่ 30 วินาทีขึ้นไป ได้รับ 10 คะแนน แต่ถ้าต่ำกว่า 30 วินาทีได้รับ 5 คะแนน (คะแนนเต็มรวม 100 คะแนน) - ระบบพลังชีวิต: เริ่มต้นมี 5 หัวใจ หากตอบผิดหน้าจอกระพริบสีแดงและลดพลังชีวิตลง 1 ดวง หากเหลือ 0 หัวใจจะ Game Over ทันที - การเปลี่ยนข้อ: เมื่อตอบถูก จะแสดงหน้าต่างเฉลยเหตุผลอย่างสวยงาม พร้อมตัวนับถอยหลัง 5 วินาทีเพื่อเปลี่ยนข้ออัตโนมัติ และมีปุ่มข้ามข้อได้ทันที - การประเมินผลและการประดับพลุฉลอง: เมื่อจบเกม จะแสดงชื่อผู้เล่น คะแนนรวม และคำประเมินเกรด หากผู้เล่นได้คะแนน 80 คะแนนขึ้นไป ให้มีอนิเมชั่นจุดพลุไฟเรืองแสงหลากสีกระจายตัวเต็มหน้าจอ Canvas และเปิดใช้งาน Web Speech API ส่งเสียงพากย์ภาษาไทยพูดว่า "ยินดีด้วยคุณผ่านเกณฑ์ที่กำหนดค่ะ" 5. UI/UX และสีสัน: - ใช้ Tailwind CSS ควบคู่กับการดีไซน์แบบ Glassmorphic (กระจกโปร่งแสงขอบเรืองแสงไฟนีออน) - จัดสัดส่วนกรอบเกมให้อยู่ในตู้คอนเทนเนอร์ขนาด 16:9 (เช่น 1280x720) เพื่อให้ออกโปรเจกเตอร์หน้าห้องเรียนได้อย่างสวยงาม และมีปุ่มกดเปิดโหมดขยายเต็มหน้าจอ (Fullscreen) - ใช้โทนสีเด่น สีฟ้า น้ำเงิน เหลือง ส้ม ขาว เพื่อดึงดูดสายตานักเรียน