สร้างภาพ

🍒ฟรี...สร้างเกมการศึกษา “ผจญภัยระบบกระเพาะอาหาร” 🔤 เรียนรู้ระบบร่างกายอย่างสนุกสนาน! 💥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 เล่นได้ทันทีโดยไม่พัง