เรื่องอาชีพและการขยายอาชีพ

สกร.ระดับอำเภอบ้านด่านลานหอย

เขียนโค้ดเกม AR (Augmented Reality) สำหรับเรียนพลศึกษา โดยใช้ HTML, CSS (Tailwind) และ JavaScript ให้อยู่ในไฟล์ index.html ไฟล์เดียวจบ โดยใช้ไลบรารี MediaPipe Hands สำหรับการตรวจจับมือ

รายละเอียดของเกม:

คอนเซปต์เกม: เป็นเกม ขยับรับลูกฟุตบอลจากการยิงจุดโทษ ผู้เล่นจะต้องใช้มือผ่านกล้องเว็บแคม เพื่อรับลูกฟุตบอลที่ลอยเข้ามา ไม่ให้เข้าประตู

ระบบการควบคุม (AR Control):

ใช้ MediaPipe Hands ตรวจจับมือ

สร้างเคอร์เซอร์ติดตามที่ปลายนิ้วชี้ (Index Finger Tip)

ให้แสดงการตรวจจับทั้งมือ Hand Tracking

ใช้การ  'กางนิ้ว' เพื่อ 'ปัดลูกฟุตบอล'

สำคัญ: ต้องมีระบบ Fallback ให้ใช้เมาส์คลิกลาก (Mouse/Touch) เล่นแทนได้ด้วย หากกล้อง หรือ AI ใช้งานไม่ได้

กราฟิกและ UI (Glassmorphism):

หน้าจอเริ่มต้นมีปุ่ม "เข้าสู่เกม (Start)" (กดด้วยเมาส์)

หน้าคำแนะนำมีปุ่ม "เริ่มเกม!" สีเขียวลอยอยู่บน Canvas (ต้องใช้มือจีบ หรือเมาส์คลิก เพื่อกดเริ่ม)

ลูกฟุตบอลเป็นสไตล์ 2.5D มี Emoji ใหญ่ๆ ตรงกลาง (แทนโมเดล 3D)

มีป้ายแสดงจำนวนลูกที่ป้องกันได้ และคะแนน (ด่านละ 100 คะแนน)

ระบบสถานะเคอร์เซอร์ (Cursor Feedback):

ปกติ: วงกลมสีฟ้า

เล็งตรงเป้าหมาย (Hover): วงกลมสีเหลืองเส้นประ

จีบนิ้ววืด (ไม่โดนเป้าหมาย): วงกลมสีแดง

จับสำเร็จ: วงกลมสีเขียว พร้อมสัญลักษณ์ ✔️

หาก AI ยังไม่เจอมือ ให้แสดงข้อความเตือน "กำลังหามือของคุณ..."

ข้อมูลด่าน (Level Data): เตรียมโจทย์ไว้ 3 ด่าน (ใช้ Array of Objects)

ด่าน 1: มีแต่ลูกฟุตบอลพุ่งเข้ามาทีละ 1 ลูก 

ด่าน 2: มีลูกฟุตบอลพุ่งเข้ามา ทีละ 1 ลูก และมีความเร็วมากขึ้น

ด่าน 3: มีลูกฟุตบอลพุ่งเข้ามา ทีละ 1 ลูก มีความเร็วเท่ากับด่านที่ 2 และมีลูกระเบิดที่ถ้าหากรับจะเสียคะแนน 5 คะแนน

เมื่อเล่นจบให้ขึ้นข้อความ "All Clear!"

ข้อกำหนดทางเทคนิค:

Canvas ต้องซ้อนทับวิดีโอ (z-index สูง)

การวาดรูป (drawLoop) ต้องแยกอิสระจากเหตุการณ์ของ MediaPipe (onResults) โดยใช้ requestAnimationFrame

สูตรคำนวณระยะห่างนิ้วโป้งกับนิ้วชี้ ให้ใช้พีทาโกรัส Math.sqrt(dx*dx + dy*dy) เพื่อความแม่นยำ"