GAME แป้นพิมพ์

ทำหน้าที่เป็นโปรแกรมเมอร์ผู้เชี่ยวชาญด้านการสร้างสื่อการสอน Active Learning และ Web Game ช่วยเขียนโค้ดเกม AR (Augmented Reality) ผ่านเว็บไซต์ โดยมีรายละเอียดดังนี้ ข้อมูลรายวิชา (ปรับแต่งตามต้องการ): ●     ชื่อวิชา: [พิมพไทยดิจิทัล] ●     ระดับชั้นที่สอน: [ปวช.1] ●     ธีมการออกแบบ: [ไอคอนสีสันสดใสน่ารัก] คอนเซปต์และกติกาของเกม (ห้ามลบส่วนนี้): 1.      รูปแบบเกม: เป็นเกม "ยิงลูกโป่งคำถาม" โดยใช้กล้อง Webcam และไลบรารี MediaPipe Hands เพื่อให้ผู้เล่นใช้ "ปลายนิ้วชี้" แตะลูกโป่งที่ลอยขึ้นมาบนหน้าจอ 2.      การแสดงผล: เขียนด้วย HTML, Tailwind CSS, และ JavaScript รวมอยู่ในไฟล์เดียว (.html) 3.      ระบบกล้อง: ภาพวิดีโอจากกล้องต้องสะท้อนซ้าย-ขวา (Mirror) เพื่อให้บังคับมือได้ง่าย แต่ตัวหนังสือและ UI บน Canvas ต้องไม่กลับด้าน (อ่านได้ปกติ) 4.      หน้าจอเริ่มเกม: มีหน้าให้ผู้เล่น "กรอกชื่อ" ก่อนกดเริ่มเกม 5.      ระบบคำถาม: ○     แสดงคำถามไว้ด้านบนของจอ ○     ลูกโป่งคำตอบ (3-5 ตัวเลือก) จะลอยขึ้นมาจากด้านล่างช้าๆ ให้ผู้เล่นมีเวลาอ่าน 6.      ระบบการตอบและพลังชีวิต: ○     ผู้เล่นมีพลังชีวิต 5 ดวง (❤️❤️❤️❤️❤️) ○     หาก แตะลูกโป่งที่ถูก: ได้คะแนน +10, มีเอฟเฟกต์พลุ, และเปลี่ยนไปคำถามข้อถัดไป ○     หาก แตะลูกโป่งที่ผิด: พลังชีวิตลดลง 1 ดวง, ลูกโป่งลูกที่ผิดจะแตกและหายไป ให้ผู้เล่นเลือกตอบลูกที่เหลืออยู่ใหม่ไปเรื่อยๆ จนกว่าจะตอบถูก ○     หากพลังชีวิตเหลือ 0: เกมจบลงทันที (Game Over) 7.      ระบบเสียง (Web Audio API): ห้ามใช้ไฟล์เสียงภายนอก (.mp3) ให้ใช้ Web Audio API สังเคราะห์เสียงขึ้นมาเองทั้งหมด ประกอบด้วย: ○     เสียง BGM คลอตอนเล่นเกม (สไตล์ 8-bit หรือฟองสบู่) ○     เสียง Effect: ปุ่มกด, ลูกโป่งแตก, ตอบถูก, ตอบผิด 8.      หน้าสรุปผล: เมื่อตอบครบทุกข้อ หรือ พลังชีวิตหมด ให้แสดงหน้าสรุปคะแนน พร้อมโชว์ชื่อผู้เล่น และมีปุ่มกดเล่นใหม่อีกครั้ง ชุดคำถาม (โปรดนำข้อมูลนี้ไปแปลงเป็น Array ในโค้ด): 1.     คำถาม: [ตัวอักษร ด ใช้นิ้วใดพิมพ์] ○     [นิ้วชี้ข้างซ้าย] (ถูกต้อง) ○     [นิ้วกลางข้างซ้าย] ○     [นิ้วชี้ข้างขวา] 2.     คำถาม: [ตัวอักษร ส ใช้นิ้วใดพิมพ์] ○     [นิ้วก้อยข้างขวา] ○     [นิ้วนางข้างขวา] (ถูกต้อง) ○     [นิ้วนางข้างซ้าย] 3.     คำถาม: [ตัวอักษร ฟ ใช้นิ้วใดพิมพ์] ○     [นิ้วกลางข้างซ้าย] ○     [นิ้วนางข้างขวา] ○     [นิ้วก้อยข้างซ้าย] (ถูกต้อง) 4.     คำถาม: [ตัวอักษร ว ใช้นิ้วใดพิมพ์] ○     [นิ้วนางข้างขวา] ○     [นิ้วก้อยข้างขวา] (ถูกต้อง) ○     [นิ้วก้อยข้างซ้าย] 5.     คำถาม: [ตัวอักษร ก ใช้นิ้วใดพิมพ์] ○     [นิ้วนางข้างขวา] ○     [นิ้วก้อยข้างขวา] ○     [นิ้วนางข้างซ้าย] (ถูกต้อง) ขอโค้ดที่สมบูรณ์ นำไปรันใช้งานได้ทันที มีการจัดการ Error อย่างเหมาะสม และมีคอมเมนต์ภาษาไทยอธิบายโค้ดส่วนสำคัญครับ