เกมส์การศึกษา

คำอธิบาย

🍒ฟรี...สร้างเกมการศึกษา “ผจญภัยระบบกระเพาะอาหาร” 🔤
เรียนรู้ระบบร่างกายอย่างสนุกสนาน!
💥Cava ai สร้างสื่อการสอน 🌱(ได้ทุกวิชา) 🌱
📌 วิธีทำ
1️⃣ เข้าสู่ระบบที่ https://www.canva.com/ai/code
2️⃣ วาง Prompt ด้านล่าง ลงไปก่อน
3️⃣ กด แผยแพร่ จบว้าวๆ
เกม : https://kruputta.my.canva.site/c9j03pkdj89q0wce
สร้างด้วย gemini : https://puttawanglap-ctrl.github.io/Stomach/
วิธีกดเผยแพร่ : https://www.facebook.com/share/v/1RtqLyE7Jz/
Prompt : ทำหน้าที่เป็น Expert Web Game Developer และ UI/UX Designer สำหรับเด็ก
ช่วยสร้าง "เกมการศึกษา" รูปแบบ Interactive Learning + Mini Game
หัวข้อเรื่อง: [เปลี่ยนหัวข้อที่ต้องการ เช่น "ระบบกระเพาะอาหาร" หรือ "วัฏจักรน้ำ"] สำหรับนักเรียนระดับชั้นประถมศึกษาปีที่ 6

เงื่อนไขทางเทคนิค (สำคัญมาก):
1. เขียนโค้ดทั้งหมดให้อยู่ใน "ไฟล์ HTML เพียงไฟล์เดียว" (Single HTML File) ซึ่งรวม HTML, CSS และ JavaScript ไว้ด้วยกัน
2. ใช้ Tailwind CSS (ผ่าน CDN) สำหรับจัดการ UI และความสวยงาม
3. เป็น Mobile-First Design รองรับหน้าจอแนวตั้งบนมือถือ (Android/iPhone) ปุ่มใหญ่กดง่าย ใช้ Touch Screen ได้ดี
4. ห้ามใช้ไฟล์รูปภาพภายนอก (ให้ใช้ Emoji หรือ CSS Shapes แทน)
5. ห้ามใช้ไฟล์เสียงภายนอก (ให้ใช้ Web Audio API สังเคราะห์เสียง effect ขึ้นมาในโค้ด เช่น เสียงปุ่มกด เสียงตอบถูก/ผิด เสียงชนะ)
6. ใช้ Vanilla JavaScript ในการจัดการระบบทั้งหมด

ระบบโครงสร้างของเกม:
1. หน้าต้อนรับ (Home Screen):
- มีชื่อเกมสีสันสดใส และแอนิเมชันขยับเบาๆ (Bounce/Pulse)
- [สำคัญ] มีแบบฟอร์มบังคับให้กรอก: "ชื่อ-นามสกุล", "ชั้น", และ "เลขที่" ถ้าไม่กรอกห้ามกดเริ่มเกม
- ปุ่ม "เริ่มเล่นเลย", ปุ่ม "วิธีเล่น" และปุ่ม "เปิด/ปิดเสียง"

2. ระบบจัดการความคืบหน้า (Progression System):
- หน้า "แผนที่ด่าน (Level Map)" แสดงด่านทั้งหมด 5 ด่าน
- ต้องเล่นผ่านทีละด่านเพื่อปลดล็อกด่านถัดไป (Lock/Unlock system)
- มีระบบบันทึกข้อมูล (Save) ด้วย LocalStorage ผู้เล่นปิดเบราว์เซอร์แล้วกลับมาเล่นต่อได้ ข้อมูลชื่อ/ชั้น/เลขที่ ไม่หาย

3. รายละเอียดด่านทั้ง 5 ด่าน (ออกแบบให้มีความหลากหลาย):
- ด่าน 1: เกมจับคู่ (Tap to Match) ให้ผู้เล่นแตะเลือกคำศัพท์ แล้วไปแตะวางในช่องว่างให้ตรงกับตำแหน่งอวัยวะ
- ด่าน 2: เกมเรียงลำดับ (Sorting) มีปุ่มลูกศรขึ้น/ลง ให้ผู้เล่นจัดเรียงลำดับขั้นตอนให้ถูกต้อง
- ด่าน 3: มินิเกมแอคชัน (Canvas Mini-game) ควบคุมตัวละครซ้าย-ขวา (มีปุ่มบนหน้าจอสำหรับมือถือ) เพื่อเก็บไอเทมที่ดี และหลบหลีกไอเทมอันตราย มีจับเวลาและพลังชีวิต (HP)
- ด่าน 4: เกมตอบคำถาม (Quiz) แบบ 4 ตัวเลือก เมื่อตอบจะมีเฉลยพร้อมคำอธิบาย (Explanation) ทันที
- ด่าน 5: สู้บอส (Boss Battle) นำระบบ Quiz มาดัดแปลง มีหลอดเลือด (HP Bar) ของผู้เล่นและของบอส ตอบถูกบอสเลือดลด ตอบผิดผู้เล่นเลือดลด บอสมีแอนิเมชันสั่นๆ ข่มขู่

4. หน้าสรุปผล (Certificate Screen):
- เมื่อชนะบอสในด่าน 5 จะเข้าสู่หน้าใบประกาศนียบัตร
- แสดงข้อความแสดงความยินดีสีสันสวยงาม
- [สำคัญ] ดึงข้อมูล "ชื่อ-นามสกุล", "ชั้น", "เลขที่" ที่กรอกตอนแรกมาแสดง
- แสดงคะแนนรวมทั้งหมดที่ทำได้
- มีข้อความกระพริบแนะนำเด็กๆ ว่า "📸 แคปหน้าจอนี้ส่งคุณครูได้เลย!"
- มีปุ่ม "เล่นอีกครั้ง" (รีเซ็ตข้อมูล)

โทนของเกม (Mood & Tone):
- น่ารัก สีสันสดใส (Pastel, Vibrant colors) เหมาะสำหรับเด็กวัย 11-12 ปี
- ทุกข้อความ ปุ่ม คำถาม และคำอธิบาย ใช้ "ภาษาไทย" ทั้งหมด
- มีลูกเล่น Animation ตอนตอบถูก ตอบผิด หรือเปลี่ยนหน้าจอ

ช่วยสร้างโค้ดทั้งหมดออกมาให้พร้อมใช้งาน สามารถนำไปเปิดใน Browser เล่นได้ทันทีโดยไม่พัง