Workshop10Game

คู่มือและเทมเพลต Prompt สำหรับสร้างเกม AR เพื่อการเรียนรู้ (สไตล์ "เรียงการ์ดคำตอบ")เทมเพลต Prompt นี้ถูกออกแบบมาเพื่อให้คุณครูในทุกกลุ่มสาระการเรียนรู้ (เช่น ภาษาไทย, วิทยาศาสตร์, สังคมศึกษา, คณิตศาสตร์ หรือภาษาต่างประเทศอื่นๆ) นำไปปรับใช้สั่งงาน AI (เช่น Gemini, ChatGPT) เพื่อสร้างเกมเว็บแอปพลิเคชัน AR (Augmented Reality) ผ่านเว็บแคม โดยผู้เรียนสามารถใช้มือจับการ์ดคำตอบมาวางในช่องให้ถูกต้องตามโจทย์📋 วิธีใช้งานเทมเพลตนี้สำหรับคุณครูคัดลอก (Copy) ข้อความ Prompt ในกรอบด้านล่างทั้งหมดแก้ไขข้อความในวงเล็บ [...] ให้เป็นข้อมูลในรายวิชาของคุณครู (เช่น เปลี่ยนจากภาษาอังกฤษเป็นสูตรเคมี, เรียงลำดับประวัติศาสตร์ หรือการสะกดคำภาษาไทย)ส่ง Prompt ที่แก้ไขแล้วให้ AI เพื่อรับโค้ด index.html ไปใช้งานได้ทันที!🤖 ข้อความ Prompt สำหรับคัดลอกไปสั่งงาน AIเขียนโค้ดเกม AR (Augmented Reality) สำหรับเรียนวิชา [ระบุชื่อวิชา เช่น: ภาษาไทย / วิทยาศาสตร์ / ประวัติศาสตร์] โดยใช้ HTML, CSS (Tailwind) และ JavaScript ให้อยู่ในไฟล์ index.html ไฟล์เดียวจบ โดยใช้ไลบรารี MediaPipe Hands สำหรับการตรวจจับมือ รายละเอียดและระบบของเกม: 1. คอนเซปต์เกม: เป็นเกม "เรียงการ์ดคำตอบให้ตรงกับโจทย์" (Arrange the Cards) ผู้เรียนจะต้องใช้มือผ่านกล้องเว็บแคม เพื่อหยิบการ์ดคำตอบ/คำศัพท์ที่ลอยอยู่บนหน้าจอ มาวางเรียงในช่องว่าง (Slots) ด้านล่างให้ถูกต้องและเรียงลำดับตามโจทย์ที่กำหนด 2. ระบบการควบคุม (AR Control & Fallback): - ใช้ MediaPipe Hands ตรวจจับมือเดี่ยว (1 มือ) - สร้างตัวเคอร์เซอร์ (Cursor) ติดตามที่ปลายนิ้วชี้ (Index Finger Tip) - แสดงเส้นประและจุดเชื่อมต่อกระดูกมือ (Hand Connections Tracking) บนหน้าจอเพื่อให้ผู้เล่นเห็นว่าระบบตรวจจับมือได้ - ใช้การ "จีบนิ้ว" (Pinch - นิ้วโป้งแตะนิ้วชี้) เพื่อทำการ "หยิบ (Grab)" การ์ดหรือกดปุ่ม และ "กางนิ้วออก" เพื่อ "ปล่อย (Drop)" การ์ด - สำคัญมาก: ต้องมีระบบ Fallback ให้ใช้เมาส์คลิกลาก หรือใช้นิ้วสัมผัสหน้าจอ (Mouse/Touch Event) เล่นแทนได้ทันที หากผู้เรียนไม่มีกล้องเว็บแคม หรือระบบ AI ตรวจจับมือไม่ทำงาน - สูตรคำนวณระยะห่างนิ้วโป้งกับนิ้วชี้ ให้ใช้พีทาโกรัส Math.sqrt(dx*dx + dy*dy) เพื่อความแม่นยำ และป้องกันปัญหากล้องสลับด้าน (Mirror) โดยการคำนวณตำแหน่ง X แบบสลับฝั่งให้ตรงกับหน้าจอผู้เล่น 3. กราฟิกและดีไซน์ (Glassmorphism & 2.5D): - หน้าจอเริ่มต้น (Start Screen): มีดีไซน์แบบกระจกโปร่งแสง (Glassmorphism) สวยงามทันสมัย พร้อมปุ่ม "เข้าสู่เกม" ขนาดใหญ่ - หน้าแนะนำกติกา (Instructions Screen): แสดงวิธีใช้มือจีบเพื่อเล่น และมีปุ่มลอยสีเขียวเด่นชัดตรงกลาง Canvas ที่ต้องใช้มือจีบค้างไว้หรือใช้เมาส์คลิกเพื่อเริ่มเกมจริง - การ์ดคำตอบ (2.5D Cards): ตกแต่งให้มีความลึกแบบ 2.5D มี Emoji เมนูใหญ่ๆ ตรงกลางการ์ดแทนโมเดล 3D และมีคำตอบ/คำศัพท์อยู่ด้านล่าง เมื่อจับลากให้การ์ดเอียงและขยายขนาดขึ้นเล็กน้อยเพื่อเพิ่มมิติ - ช่องวางคำตอบ (Target Slots): อยู่บริเวณส่วนล่างของจอภาพ มีกรอบเส้นประและเปลี่ยนสีตามสถานะ (เช่น เป็นสีเขียวเมื่อคำตอบที่วางถูกต้อง หรือสีแดงเมื่อวางผิด) - ป้ายแสดงสถานะ (UI Banner): แสดงโจทย์ภาษาไทยด้านซ้ายบน และคะแนนสะสมที่ด้านขวาบน (ผ่าน 1 ด่านได้ 100 คะแนน) 4. ระบบสถานะเคอร์เซอร์ (Cursor Visual Feedback): - สถานะปกติ (Normal): วงกลมสีฟ้าโปร่งใส - เล็งตรงเป้าหมาย (Hover): วงกลมสีเหลืองเส้นประขยายใหญ่ขึ้นเล็กน้อย - จีบนิ้ววืด/ไม่โดนเป้าหมาย (Missed): วงกลมสีแดง - จับเป้าหมายสำเร็จ (Grabbed): วงกลมสีเขียวพร้อมไอคอน "✔️" ตรงกลาง - หากกล้องยังตรวจไม่พบมือผู้เรียน ให้แสดงแถบเตือนสีส้ม "กำลังหามือของคุณ... (หรือใช้เมาส์เล่นแทนได้)" ตรงกลางจอ 5. ข้อมูลด่านและโจทย์ (Level Data): ให้ตั้งค่าและเตรียมข้อมูลด่านไว้จำนวน [ระบุจำนวนด่าน เช่น: 3 ด่าน] โดยเก็บในรูปแบบ Array of Objects เพื่อให้สะดวกต่อการแก้ไขในอนาคต ดังนี้: [คุณครูสามารถระบุข้อมูลด่านของตนเองตรงนี้ได้เลย ตัวอย่างเช่น:] - ด่าน 1: * โจทย์ (โจทย์ด้านบนจอ): "เรียงลำดับวัฏจักรชีวิตของผีเสื้อ" * การ์ดคำตอบที่ต้องลอยกระจัดกระจาย (พร้อมระบุ Emoji): 1. 🥚 ไข่ (Egg) 2. 🐛 หนอนผีเสื้อ (Caterpillar) 3. 🕸️ ดักแด้ (Chrysalis) 4. 🦋 ผีเสื้อ (Butterfly) * (ช่องวางด้านล่างต้องเรียงจากด่าน 1 ไป 4 ตามลำดับนี้) - ด่าน 2: * โจทย์: "เรียงประโยคภาษาไทย: แมวกินปลาทู" * การ์ดคำตอบที่ต้องลอยกระจัดกระจาย: 1. 🐱 แมว 2. 😋 กิน 3. 🐟 ปลาทู - ด่าน 3: * โจทย์: "เรียงสูตรโมเลกุลของน้ำ" * การ์ดคำตอบที่ต้องลอยกระจัดกระจาย: 1. 🎈 H 2. 🎈 H 3. 💨 O 6. เงื่อนไขการชนะและตอนจบเกม: - เมื่อลากการ์ดมาวางในช่องครบถ้วน และคำตอบตรงกับตำแหน่งที่กำหนด (Expected Answer) ให้ตรวจรับคะแนนเพิ่มด่านละ 100 คะแนน และเปลี่ยนเป็นด่านต่อไปโดยอัตโนมัติหลังจากผ่านไป 1 วินาที - เมื่อผ่านครบทุกด่าน ให้แสดงหน้าจอจบเกม "All Clear!" สรุปคะแนนรวม และปุ่มสำหรับเริ่มเล่นใหม่อีกครั้ง 7. ข้อกำหนดเชิงเทคนิค: - ขนาด Canvas ต้องครอบคลุมเต็มหน้าจอ (Viewport Width/Height) และซ้อนทับภาพวิดีโอจากกล้องด้วย z-index ที่ถูกต้อง - การวาดภาพทั้งหมดบน Canvas (Draw Loop) ต้องใช้ requestAnimationFrame รันอย่างอิสระ ไม่สะดุด แม้สัญญาณจากกล้องหรือ MediaPipe จะมีความหน่วงช้า - เขียนโค้ดทั้งหมด (HTML, CSS, JS) บรรจุไว้ในไฟล์เดี่ยวไม่มีการอ้างอิงไฟล์ภายนอกอื่นๆ ยกเว้น CDN ของ Tailwind CSS และ MediaPipe Library ที่จำเป็น 🛠️ จุดที่คุณครูสามารถเปิดไฟล์มาแก้ไขเองได้ (กรณีต้องการปรับโจทย์เพิ่มภายหลัง)เมื่อคุณครูได้ไฟล์ index.html ไปแล้ว และอยากเปลี่ยนโจทย์ด้วยตัวเองโดยไม่ต้องพิมพ์ถาม AI ใหม่ ให้เปิดไฟล์ด้วยโปรแกรมแก้ไขข้อความ (เช่น Notepad, VS Code) แล้วมองหาตัวแปร levels จากนั้นสามารถเพิ่ม-ลบ หรือแก้ไขคำศัพท์และ Emoji ในโครงสร้างด้านล่างนี้ได้ทันที:// มองหาโค้ดส่วนนี้ในไฟล์ index.html เพื่อแก้ไขโจทย์ด้วยตนเอง const levels = [ { prompt: "ฉัน รัก สุนัข", // โจทย์ที่ต้องการให้ผู้เรียนเห็น words: [ { e: "🧑", w: "I" }, // e คือ Emoji, w คือ ตัวอักษรบนการ์ด (และเป็นตัวตรวจความถูกต้อง) { e: "❤️", w: "love" }, { e: "🐶", w: "dogs" } ] }, // สามารถเพิ่มด่านถัดไปตามโครงสร้างนี้ได้ไม่จำกัด... ];