GAME กายวิภาค

กรุณาเขียนโค้ดสร้างเกมเว็บแอปพลิเคชัน AR (Augmented Reality) ตอบคำถามแบบโต้ตอบ (Interactive Quiz) เพื่อเป็นสื่อการสอนวิชา [ใส่ชื่อวิชา เช่น ภาษาอังกฤษกายวิภาคศิลป์] ระดับชั้น [ใส่ระดับชั้น เช่น ปวช. 1] โดยรวบรวมเนื้อหาทั้งหมดให้อยู่ในไฟล์ "index.html" เพียงไฟล์เดียวจบ (Single File) โดยมีข้อกำหนดทางเทคนิคและการออกแบบอย่างละเอียดดังต่อไปนี้: 1. ระบบการทำงานของเทคโนโลยี (Tech Stack & Libraries): - ใช้ HTML5, CSS ผ่านระบบ Tailwind CSS (เรียกใช้จาก CDN ของ https://cdn.tailwindcss.com) - ใช้ไอคอนสวยงามจากไลบรารี Lucide Icons (เรียกใช้จาก https://unpkg.com/lucide@latest) - ใช้เทคโนโลยีตรวจจับมือ (Hand Tracking) โดยใช้โมเดลปัญญาประดิษฐ์ MediaPipe Hands และกล้องจาก CDN ต่อไปนี้: * https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js * https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js - สำหรับเสียงเอฟเฟกต์ (Sound Effects) ห้ามใช้ลิงก์ไฟล์ภายนอกเด็ดขาด ให้ใช้ "Web Audio API" ในการสร้างเสียงสังเคราะห์ (Synth SFX) เองในตัวโค้ด เช่น เสียงติ๊กเมื่อเล็ง, เสียงยินดีเมื่อตอบถูก, เสียงเตือนเมื่อตอบผิด, และเสียงฉลองชัยชนะเมื่อเล่นจบเกม 2. หน้าจอการใช้งาน (Game Interface Screens): แบ่งหน้าเว็บออกเป็น 3 สถานะหลัก (ควบคุมการสลับหน้าด้วยการซ่อน/แสดง JavaScript): - [หน้าแรก: หน้าลงทะเบียน/ต้อนรับ (Welcome Screen)] มีช่องให้ผู้เรียนกรอก "ชื่อผู้เล่น/รหัสนักเรียน" มีการอธิบายวิธีการเล่นเกมสั้นๆ อย่างเข้าใจง่าย และปุ่มสตาร์ทเกม - [หน้าหลัก: หน้าเล่นเกม (Game Play Screen)] * ฝั่งซ้าย: แสดงโจทย์คำถามภาษาอังกฤษพร้อมคำแปลไทย, แถบโปรเกรสบาร์ความคืบหน้า (เช่น ข้อ 1 จาก 5), และตัวเลือกคำตอบ 4 ตัวเลือกที่มีแอนิเมชันตอนชี้ * ฝั่งขวา: หน้าต่างแสดงภาพเว็บแคมจริงที่สะท้อนแบบ Mirror (กลับซ้ายขวา) พร้อมลายเส้นกระดูกมือสเก็ตช์ที่ตรวจจับด้วย AI และจุดเป้าเล็งวงกลม (Pointer) ที่วิ่งตามปลายนิ้วชี้ * ด้านล่างหน้าต่างกล้อง: มีข้อความเตือนเมื่อไม่พบมือในกล้อง และปุ่ม "สลับใช้เมาส์แทน" (Mouse Fallback) เพื่อให้ผู้ที่ไม่มีเว็บแคมยังคงเล่นเกมได้โดยใช้เมาส์คลิกตัวเลือก - [หน้าสุดท้าย: หน้าสรุปผลคะแนน (Summary Screen)] แสดงคะแนนที่ผู้เรียนทำได้ (เช่น 4/5 คะแนน), คิดเป็นเปอร์เซ็นต์ความถูกต้อง, มีบทวิจารณ์คำวิเคราะห์ผลลัพธ์ที่สร้างสรรค์และเหมาะสมกับสายวิชา, และปุ่มสำหรับ "เริ่มเล่นใหม่อีกครั้ง" หรือ "กลับหน้าแรก" 3. กลไกการเล่นเกม (Gameplay & Collision Logic): - เมื่อขยับปลายนิ้วชี้ไปที่ตัวเลือกใดตัวเลือกหนึ่ง ระบบจะนับเวลาสะสม (Hover Selection) - ขณะเล็งค้างไว้ ให้มีแอนิเมชัน Loading Circle ค่อยๆ เพิ่มขึ้นรอบเป้าเล็ง หากเล็งค้างครบ 1.5 วินาที จะถือเป็นการยืนยันคำตอบข้อนั้นทันที - เมื่อตอบคำถามแล้ว ให้แสดงเฉลยทันที โดยปุ่มที่ตอบถูกจะเป็นสีเขียว และปุ่มที่ตอบผิด (หากเลือกผิด) จะเป็นสีแดง พร้อมเล่นเสียงเอฟเฟกต์ที่สอดคล้องกัน ก่อนจะเปลี่ยนไปข้อถัดไปโดยอัตโนมัติภายใน 1.8 วินาที 4. ธีมการออกแบบ (Visual Aesthetics): - คอนเซปต์การดีไซน์: โทนสีสุภาพ สไตล์ [ระบุสไตล์สี เช่น เอิร์ทโทน ครีม น้ำตาลอบอุ่น หรือ พาสเทล อ่อนโยน] ดูเป็นมิตรและเป็นทางการเหมาะสมกับสถานศึกษา - ใช้ฟอนต์อักษรที่มีความร่วมสมัยและอ่านง่าย (เช่น Prompt หรือพ่วงคู่กับฟอนต์ Serif สำหรับภาษาอังกฤษ) - จัดวางรูปแบบให้อยู่กึ่งกลางหน้าจอ ปรับขนาดเข้ากันได้ดีกับจอคอมพิวเตอร์และหน้าจอแท็บเล็ต (Fully Responsive) 5. ชุดข้อมูลคำถาม (Question Dataset): กรุณาใช้ชุดคำถามทั้งหมด 5 ข้อ ที่เกี่ยวกับหัวข้อ [ระบุหัวข้อ เช่น กายวิภาคพื้นฐานสำหรับการวาดภาพคนครึ่งท่อน] ตัวอย่างเช่น: - ข้อที่ 1: [ระบุโจทย์ และตัวเลือก A, B, C, D พร้อมคำเฉลย] - ข้อที่ 2: [ระบุโจทย์ หรือปล่อยให้ AI ช่วยคิดคำถามเชิงวิชาการที่เหมาะสมกับระดับชั้นเรียนให้] - ข้อที่ 3: ... - ข้อที่ 4: ... - ข้อที่ 5: ...