ใส่ Prompt :

สร้างเกมการศึกษาแบบ Interactive สำหรับนักเรียนไทย

ชื่อเกม: “ผจญภัยระบบย่อยอาหาร”

กลุ่มสาระการเรียนรู้: วิทยาศาสตร์

ระดับชั้น: ป.5

ระดับความยาก: ปานกลาง

รูปแบบเกม:

เด็กต้องเดินทางผ่านอวัยวะต่าง ๆ ของระบบย่อยอาหาร เช่น ปาก หลอดอาหาร กระเพาะอาหาร ลำไส้เล็ก และลำไส้ใหญ่ พร้อมตอบคำถามเพื่อผ่านด่าน

มี:

- เกมลากวางอวัยวะ

- เกมจับคู่หน้าที่อวัยวะ

- คำถาม Quiz

- ระบบสะสมคะแนน

- ดาวรางวัลเมื่อผ่านด่าน

สไตล์ภาพ:

3D Cute Cartoon + Inside Human Body Adventure + Educational Fantasy Game

โทนสี:

สดใส ฟ้า ชมพู ม่วง เขียว

มีตัวละครเด็กนักเรียนไทย Chibi พร้อมผู้ช่วย AI รูปจุลินทรีย์น่ารัก

สร้างภาพโลโก้สไตล์ 3D สีสันสวยงาม ทันสมัย พื้นหลังโปร่งใส มีข้อความใต้ภาพว่า ช่องลมวรรณารามเกมส์

สื่อถึงการแข่งขันกีฬานักเรียนกลุ่มเครือข่ายโรงเรียนขยายโอกาสทางการศึกษาครั้งที่ 32 "ช่องลมวรรณารามเกมส์" มีกีฬาเซปักตะกร้อ ตะกร้อลอดห่วง วอลเลย์บอล เทเบิลเทนนิส เปตอง ฟุตซอล

https://www.canva.com/

จากนั้นให้นักเรียน copy prompt

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

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

คอนเซปต์เกม: เป็นเกม '"การจำแนกอุปกรณ์คอมพิวเตอร์ โดย ให้ แต่ละประเภท  ผู้เล่นจะต้องใช้มือผ่านกล้องเว็บแคม เพื่อหยิบคำที่ลอยคล้ายๆกับ ฟองอากาศ ลอยเคลื่อนไหวไปมา บริเวณหน้าจอ    โดยใช้นิ้วจับมาใส่ในช่อง โดยแบ่งกลุ่มให้ถูกต้องเป็นเกม "การจำแนกอุปกรณ์คอมพิวเตอร์"

ผู้เล่นต้องใช้มือผ่านกล้องเว็บแคม เพื่อหยิบการ์ดอุปกรณ์คอมพิวเตอร์ที่ลอยเหมือน ฟองอากาศ (Floating Bubble Cards) เคลื่อนที่ไปมาบนหน้าจอ แล้วนำไปวางในหมวดหมู่ที่ถูกต้อง

แบ่งเป็นทั้งหมด 12 ชิ้น

อุปกรณ์รับข้อมูล (Input Device) จำนวน 6 ชิ้น

⌨️ คีย์บอร์ด

🖱️ เมาส์

🎤 ไมโครโฟน

📷 เว็บแคม

🖊️ ปากกาแสง

🎮 จอยเกม

อุปกรณ์แสดงผล (Output Device) จำนวน 6 ชิ้น

🖥️ จอภาพ

🖨️ เครื่องพิมพ์

🔊 ลำโพง

🎧 หูฟัง

📽️ โปรเจคเตอร์

📺 โทรทัศน์

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

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

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

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

ใช้การ 'จีบนิ้ว' (Pinch - นิ้วโป้งแตะนิ้วชี้) เพื่อ 'หยิบ' หรือ 'กดปุ่ม' และ 'กางนิ้ว' เพื่อ 'ปล่อย'

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

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

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

การ์ดคำศัพท์เป็นสไตล์ 2.5D มี Emoji ใหญ่ๆ ตรงกลาง (แทนโมเดล 3D) และด้านล่าง

มีช่องว่างด้านล่างสำหรับนำคำมาใส่  มีป้ายแสดงโจทย์ภาษาไทย และคะแนน (ด่านละ 20 คะแนน)

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

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

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

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

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

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

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

ข้อกำหนดทางเทคนิค: Canvas ต้องซ้อนทับวิดีโอ (z-index สูง)

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

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