Game AR แป้นเหย้า

ช่วยเขียนโค้ดเกม AR (Augmented Reality) สำหรับการศึกษา เพื่อใช้เป็นสื่อการสอนแบบ Interactive โดยใช้ HTML, CSS (Tailwind CSS) และ JavaScript ให้อยู่ในไฟล์ index.html ไฟล์เดียวจบ   เทคโนโลยีที่ใช้: 1. ใช้ไลบรารี MediaPipe Hands สำหรับการตรวจจับมือผ่านกล้องเว็บแคม (ใช้ท่าทาง 'จีบนิ้วชี้และนิ้วโป้ง' เพื่อหยิบจับวัตถุ) 2. ภาพวิดีโอจากกล้องต้องสะท้อนซ้าย-ขวา (Mirror) เพื่อให้ผู้เล่นบังคับมือได้ง่าย แต่ตัวหนังสือข้อความห้ามกลับด้าน 3. ใช้ไลบรารี Tone.js สร้างเสียง Effect ต่างๆ (เสียงประกอบตอนเล่น, เสียงตอบถูก, ตอบผิด, สรุปผล)   คอนเซปต์เกมและระบบการเล่น: - เป็นเกม "เรียงคำศัพท์" ผู้เล่นใช้มือคีบกล่องคำศัพท์ที่ลอยอยู่บนหน้าจอ ไปวางในช่องว่างให้ตรงกับคำถาม - มีหน้า Start Screen ให้กรอกชื่อผู้เล่นก่อนเริ่มเกม พร้อมรอให้กล้องโหลดเสร็จถึงจะกดเริ่มได้ - มีระบบเวลา: ให้เวลา 60 วินาที/ด่าน - มีระบบพลังชีวิต: เริ่มต้นที่ 5ชีวิต หากวางคำศัพท์ผิดช่อง ให้หน้าจอกระพริบสีแดง แจ้งเตือน และลด 1 ชีวิต (ถ้าชีวิตเหลือ 0 = Game Over) - ระบบคิดคะแนน: หากตอบถูกและเวลาเหลือ >= 30 วินาที ได้ 5 คะแนน, แต่ถ้าเหลือ < 30 วินาที ได้ 2 คะแนน - การเปลี่ยนด่าน: เมื่อตอบถูก ให้นับถอยหลัง 5 วินาทีเพื่อไปยังข้อถัดไปอัตโนมัติ (และมีปุ่มให้กดข้ามไปข้อถัดไปได้ทันที) - เมื่อจบทุกด่าน: ให้มีหน้าต่างสรุปผลรวม (ชื่อผู้เล่น, คะแนนรวมที่ทำได้, พลังชีวิตที่เหลือ)   UI/UX และการออกแบบ: - ปรับสัดส่วนเกมให้เป็น 16:9 (เช่น 1280x720) และมีปุ่ม "ขยายเต็มจอ (Fullscreen)" - กราฟิกเน้นความสดใส ดึงดูดความสนใจนักเรียน ใช้โทนสี [ฟ้า, น้ำเงิน, เหลือง, ส้ม, ขาว] หรือสีที่เข้ากับวัยเรียน - ใช้ฟอนต์ภาษาไทย (เช่น Sarabun) ให้ตัวใหญ่อ่านง่ายชัดเจน   เนื้อหาสำหรับเกม (ปรับแก้ตามรายวิชา): รายวิชา: [พิมพ์ไทยดิจิทัล] สำหรับระดับชั้น: [ปวช.1] ช่วยสร้างโจทย์ตามเนื้อหานี้จำนวน [5] ข้อ: ข้อ 1. โจทย์: "[ตัวอักษรนิ้วนางข้างซ้าย คือ]" / ช่องว่างที่ต้องตอบ: "[อักษร-ห]" / คำศัพท์หลอกให้ลอยอยู่บนจอ: "[อักษร-ฟ อักษร-ง อักษร-ก]" ข้อ 2. โจทย์: "[ตัวอักษรนิ้วนางข้างขวา คือ]" / ช่องว่างที่ต้องตอบ: "[อักษร-ส]" / คำศัพท์หลอก: "[อักษร-ฟ อักษร-ง อักษร-ก]" ข้อ 3. โจทย์: "[ตัวอักษรนิ้วชี้ข้างซ้าย คือ]" / ช่องว่างที่ต้องตอบ: "[อักษร-ด]" / คำศัพท์หลอก: "[อักษร-ส อักษร-ง อักษร-ก]" ข้อ 4. โจทย์: "[ตัวอักษรนิ้วก้อยข้างขวา คือ]" / ช่องว่างที่ต้องตอบ: "[อักษร-ว]" / คำศัพท์หลอก: "[อักษร-ส อักษร-ฟ อักษร-ก]" ข้อ 5. โจทย์: "[ตัวอักษรนิ้วกลางข้างซ้าย คือ]" / ช่องว่างที่ต้องตอบ: "[อักษร-ก]" / คำศัพท์หลอก: "[อักษร-ฟ อักษร-ส อักษร-ห]"