AR จับคู่ภาพกับคำศัพท์

คัดลอก สร้างเกมการศึกษาแบบ Web AR โดยใช้ HTML5, CSS3 และ JavaScript (ไฟล์เดียวหรือแยกไฟล์ก็ได้) ชื่อเกม "จับคู่ภาพกับคำศัพท์" วัตถุประสงค์ ให้เด็กใช้ "มือจริง" ผ่านกล้องเว็บแคมหรือกล้องโทรศัพท์ แทนเมาส์ในการลากภาพไปวางบนคำศัพท์ที่ตรงกัน เทคโนโลยีที่ใช้ - MediaPipe Hands สำหรับตรวจจับมือ - HTML5 Canvas - JavaScript ES6 - CSS3 - Responsive Design - รองรับ Chrome และ Microsoft Edge - ไม่ต้องติดตั้งโปรแกรม - เปิดเล่นผ่าน Browser ได้ทันที ------------------------- รูปแบบเกม เมื่อเปิดหน้าเว็บ 1. ขออนุญาตใช้กล้อง 2. เปิดกล้องแบบเต็มจอ 3. แสดงตำแหน่งมือแบบ Real-time 4. ใช้นิ้วชี้เป็นตัวควบคุม 5. เมื่อกำมือให้ถือว่า "จับภาพ" 6. ลากภาพไปยังคำศัพท์ 7. เมื่อกางมือให้ปล่อยภาพ 8. หากจับคู่ถูกต้อง - ภาพเด้งเข้าไปหาคำศัพท์ - เล่นเสียง Correct - แสดงดาว ★ - คะแนน +10 - แสดง Animation 9. หากผิด - ภาพสั่น - เล่นเสียง Wrong - คะแนนไม่เพิ่ม ------------------------- รูปแบบหน้าจอ ด้านซ้าย แสดงภาพ 5 รูป