AR Math Game - จับลูกโป่งคำตอบ

คัดลอก Prompt : คุณคือผู้เชี่ยวชาญด้านการพัฒนา Web Application ระดับสูง หน้าที่ของคุณคือการเขียนโค้ดสำหรับเกมเว็บแบบ Single-file HTML (ทุกอย่างรวมอยู่ในไฟล์เดียวทั้ง HTML, CSS, JavaScript และการเชื่อมต่อ API)ชื่อเกม: "AR Math Game - จับลูกโป่งคำตอบ"กรุณาสร้างเกมนี้โดยอ้างอิงดีไซน์และฟีเจอร์จากภาพต้นฉบับ "image_3e55a2.png" และ "image_3e55fa.png" โดยละเอียดดังนี้:1. รายละเอียดการออกแบบ (UI/UX & Visual Design)อ้างอิงความสวยงาม ความโปร่งแสง และสไตล์ความโค้งมนจากรูปภาพประกอบ:โทนสีหลัก (Color Palette):พื้นหลังปกติ: สีฟ้าพาสเทลสดใส (Sky Blue #87CEEB) พร้อมก้อนเมฆสีขาวลอยตกแต่งตามภาพ image_3e55fa.pngกล่องข้อความและปุ่ม: สไตล์ Glassmorphism (กึ่งโปร่งแสง, มีความฟุ้งเบลอของพื้นหลัง Backdrop Blur, เส้นขอบสีขาวบางๆ และเงาตกแต่งเพื่อเพิ่มมิติ)หน้าแรก (Start Screen) - อ้างอิงจากภาพ image_3e55a2.png:มีกล่องหลักตรงกลางสีฟ้าเทากึ่งโปร่งใส ขอบมนขนาดใหญ่มาก (Glassmorphism Panel)พาดหัวใหญ่สีขาวคำว่า "AR Math Game" และย่อยลงมาสีเหลืองเข้ม "จับลูกโป่งคำตอบ"กล่องข้อมูลตรงกลางสีมืดโปร่งแสง (Dark Translucent Box) บรรจุคำอธิบายพร้อมไอคอน: แตะลูกโป่งที่มีคำตอบที่ถูกต้อง วิธีเล่น AR: ยกมือขึ้น ใช้ "ปลายนิ้วชี้" แตะที่ลูกโป่งเพื่อเลือกคำตอบได้เลย วิธีเล่นปกติ: ใช้เมาส์คลิก หรือนิ้วแตะหน้าจอได้เลยข้อความบอกเงื่อนไข: "ตอบถูก +100 คะแนน" (สีเขียวสว่าง) และ "ตอบผิด -20 คะแนน (ครบ 10 ข้อชนะ!)" (สีแดงชมพูอ่อน)ปุ่มเริ่มต้น (Start Game) ขนาดใหญ่ด้านล่าง สีขาวกึ่งโปร่งแสง ขอบโค้งมน ข้อความสีขาวตัวหนา "เริ่มเกม!" มีเอฟเฟกต์ยุบตัวเมื่อกดหน้าจอเล่นเกม (Gameplay UI) - อ้างอิงจากภาพ image_3e55fa.png:แถบแสดงคะแนน (บนซ้าย): แคปซูลโปร่งแสงมนแสดงข้อความ "คะแนน: [SCORE]" (คะแนนใช้ตัวเลขสีเหลืองสว่าง #FFD700)แถบแสดงจำนวนข้อ (บนขวา): แคปซูลโปร่งแสงมนแสดงข้อความ "ข้อที่: [CURRENT]/10" (ตัวเลขแสดงส่วนสีเขียวอ่อน)กล่องโจทย์คณิตศาสตร์ (กึ่งกลางบน): แคปซูลแก้วโปร่งแสง ขอบสีขาวบาง ภายในมีข้อความตัวหนาสีขาวขนาดใหญ่แสดงโจทย์ เช่น "2 - 2 = ?" พร้อมเงาอักษรเพิ่มความชัดเจนลูกโป่งตัวเลขคำตอบ:เป็นทรงกลมรูปไข่มีมิติดูด้าน (3D Glassy Shiny effect) มีจุดสะท้อนแสงสีขาวมุมซ้ายบนมีเชือกสีขาวพลิ้วไหวห้อยอยู่ใต้ลูกโป่งมีสีสันที่แตกต่างกัน (เช่น เขียว, ฟ้า, ส้มเหลือง) ลอยจากล่างขึ้นบนอย่างอิสระ มีความเร็วและการส่ายไปมาที่ต่างกันเล็กน้อยกลางลูกโป่งแสดงตัวเลขคำตอบด้วยฟอนต์สีขาวขนาดใหญ่และหนาระบบเสียงและเอฟเฟกต์ตอนเล่น:เมื่อตอบถูกหรือตอบผิด จะมีละอองปาร์ตี้ (Particle Explosion) แตกออกจากตำแหน่งลูกโป่งตามสีของลูกโป่งนั้นๆแสดงข้อความลอยขึ้นบนหน้าจอแบบเฟดตัว เช่น "+100" สีเขียว หรือ "-20" สีแดง2. ฟังก์ชันทางคณิตศาสตร์และการเล่นเกม (Core Mechanics)สุ่มโจทย์เลขระดับประถมศึกษาตอนต้น (มีทั้งบวกและลบ ผลลัพธ์ไม่ติดลบ และไม่เกิน 30)เมื่อเปลี่ยนข้อใหม่ จะสร้างลูกโป่งคำตอบลอยขึ้นมาอย่างน้อย 3-4 ลูก โดยมีลูกโป่งที่เป็น "คำตอบที่ถูกต้อง" เพียง 1 ลูก และที่เหลือเป็นตัวเลือกหลอกถ้าคำตอบลอยหายไปพ้นขอบบนของจอโดยยังไม่ได้ตอบ ให้สร้างคำตอบชุดใหม่ลอยขึ้นมาแทนเพื่อป้องกันการค้างเมื่อเล่นครบ 10 ข้อ จะแสดงผลลัพธ์คะแนนรวมทั้งหมด พร้อมปุ่มสำหรับเริ่มเล่นใหม่อีกครั้ง3. ระบบตรวจจับการเคลื่อนไหว AR (Augmented Reality Tracking)การใช้กล้องและตรวจจับนิ้ว:ใช้กล้องเว็บแคมดึงภาพแบบ Mirror สลับซ้ายขวาเพื่อให้ควบคุมง่ายเหมือนส่องกระจกนำเข้าไลบรารี MediaPipe Hands ผ่าน CDN เพื่อการทำงานที่เสถียรและเร็วตรวจจับโครงสร้างนิ้วมือ โดยอ้างอิง "ปลายนิ้วชี้" (Index Finger Tip - Landmark มาเป็นตัวชี้เป้า (Cursor) ในหน้าจอCursor บนหน้าจอ:เมื่อยกนิ้วขึ้นมา จะมีสัญลักษณ์วงกลมสีเหลืองใสและจุดสีแดงเล็กๆ ตรงกลาง ปรากฏขึ้นที่ปลายนิ้วชี้บนจอตามพิกัดจริงการชนกัน (Collision Detection):คำนวณระยะห่างระหว่างจุดปลายนิ้วชี้กับจุดศูนย์กลางของลูกโป่ง ถ้าปลายนิ้วขยับเข้าไปทับบริเวณขอบเขตของลูกโป่ง ให้ถือว่าเป็นการเลือกตอบ (Pop) ทันทีระบบสำรอง (Fallback):หากอุปกรณ์ไม่มีกล้อง หรือผู้ใช้ปฏิเสธการเข้าถึงกล้อง ให้ระบบเปลี่ยนไปใช้ระบบการคลิกเมาส์และทัชสกรีนบนจอโดยอัตโนมัติอย่างราบรื่น4. โครงสร้างและการเขียนโค้ด (Technical Implementation Rules)Single File: ทุกอย่างต้องอยู่ในไฟล์เดียว index.html เท่านั้นCSS Framework: แนะนำให้ใช้ Tailwind CSS ควบคู่ไปกับการเขียน Custom CSS เพื่อสร้างเอฟเฟกต์ Glassmorphic และความโปร่งแสงของ UICanvas Rendering: ควรใช้ HTML5 Canvas ในการเรนเดอร์เมฆ, ลูกโป่ง, เชือกผูกลูกโป่ง, สะเก็ดการระเบิดของเอฟเฟกต์ และตัวชี้เป้าปลายนิ้วชี้ เพื่อให้ประมวลผลวิดีโอคู่กันไปได้อย่างลื่นไหล (60FPS)Responsive Design: โครงร่าง UI ทั้งหมดต้องปรับขนาดให้พอดีกับจอทุกขนาด (สมาร์ตโฟน, แท็บเล็ต, คอมพิวเตอร์เดสก์ท็อป)ภาษา: ข้อความ UI ทั้งหมดรวมถึงฟอนต์ ต้องรองรับภาษาไทยอย่างสมบูรณ์สวยงาม (เช่น ใช้ฟอนต์ 'Kanit' จาก Google Fonts)