เขียนพร่อมสร้างเกม

เขียนโค้ดเกม AR (Augmented Reality) สำหรับเรียนภาษาอังกฤษ โดยใช้ HTML, CSS (Tailwind) และ JavaScript ให้อยู่ในไฟล์ index.html ไฟล์เดียวจบ โดยใช้ไลบรารี MediaPipe Hands สำหรับการตรวจจับมือ รายละเอียดของเกม: คอนเซปต์เกม: เป็นเกมจัดหมวดหมู่เป็นอุปกรณ์อินพุต กับอุปกรณ์เอาท์พุต รูปแบบภาพ 3D แบ่งฝั่งซ้ายขวา ฝั่งซ้ายเป็น “อุปกรณ์อินพุต” ฝั่งขวาเป็น“อุปกรณ์เอาท์พุต” ผู้เล่นจะต้องใช้มือผ่านกล้องเว็บแคม โดยมีรายละเอียดดังนี้ 1 เป็นเกมที่มีความรู้เนื้อหาในเรื่องอุปกรณ์คอมพิวเตอร์ อินพุต เอาท์พุต 2 เหมาะสำหรับนักเรียนชั้น ปวช. 1 3 มีรูปภาพอุปกรณ์ 20 ชนิด โชว์ให้ดูทีละภาพ ข้อให้เหมาะสมกับรายวิชา 4 แนวกราฟิก 3D เป็น icon สีสันสดใส 5 มีการใส่ชื่อผู้เล่นในหน้าแรกก่อนจะเริ่มเกม 6 เมื่อเล่นเกมเสร็จ มีหน้าสรุปผลการเล่นของผู้เล่น 7 มีเสียงขณะเล่นเกม และมีเสียง Effect ต่างๆ 8. การเล่น: - ผู้เล่นใช้ "นิ้วโป้ง กับ นิ้วชี้จีบเข้าหากัน" หยิบภาพหน้ากล้องเพื่อเลือกคำตอบ วางให้ตรงกับเงื่อนไขแต่ อินพุต เอ้าท์พุต - มีอุปกรณ์ 2 ประเภท คืออินพุต เอาท์พุต 9. ระบบการเฉลย: - เมื่อตอบคำถาม ให้หน้าจอแสดงว่า "ถูกต้อง" ข้อความสีเขียว หรือ "ผิด" ด้วยข้อความสีแดง - หยุดเวลา 2 วินาที เพื่อโชว์คำตอบที่ถูกต้อง - เปลี่ยนไปข้อถัดไปโดยอัตโนมัติ 7. สรุปผล: มีหน้าสรุปคะแนนหลังเล่นจบ พร้อมข้อความให้กำลังใจ 8. กราฟิกและเสียง: - ธีมสี: มินิมอล หวานแหหว - หน้าจอต้องรองรับทั้งแนวตั้งและแนวนอน (Responsive) - มีเสียง Effect ขณะเล่น เสียงตอบถูก ให้เป็นเสียงแบบฟุ้งฟริ่ง , เสียงตอบผิดให้เป็นเสียงกล้องถ่ายภาพ โดยใช้ Web Audio API สังเคราะห์เสียง ไม่ใช้ไฟล์เสียงจากภายนอก